forty-cdk 0.2.0 → 0.3.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/accordion/README.md +122 -0
- package/aspect-ratio/README.md +76 -0
- package/avatar/README.md +100 -0
- package/breadcrumbs/README.md +49 -0
- package/breakpoints/README.md +81 -0
- package/button/README.md +49 -0
- package/calendar/README.md +458 -0
- package/carousel/README.md +358 -0
- package/checkbox/README.md +146 -0
- package/combobox/README.md +535 -0
- package/context-menu/README.md +139 -0
- package/date-field/README.md +184 -0
- package/date-picker/README.md +338 -0
- package/dialog/README.md +388 -0
- package/disclosure/README.md +114 -0
- package/drag-drop/README.md +359 -0
- package/drawer/README.md +560 -0
- package/dropdown-menu/README.md +176 -0
- package/fesm2022/forty-cdk-accordion.mjs +348 -0
- package/fesm2022/forty-cdk-accordion.mjs.map +1 -0
- package/fesm2022/forty-cdk-aspect-ratio.mjs +74 -0
- package/fesm2022/forty-cdk-aspect-ratio.mjs.map +1 -0
- package/fesm2022/forty-cdk-avatar.mjs +308 -0
- package/fesm2022/forty-cdk-avatar.mjs.map +1 -0
- package/fesm2022/forty-cdk-breadcrumbs.mjs +125 -0
- package/fesm2022/forty-cdk-breadcrumbs.mjs.map +1 -0
- package/fesm2022/forty-cdk-breakpoints.mjs +117 -0
- package/fesm2022/forty-cdk-breakpoints.mjs.map +1 -0
- package/fesm2022/forty-cdk-button.mjs +134 -0
- package/fesm2022/forty-cdk-button.mjs.map +1 -0
- package/fesm2022/forty-cdk-calendar.mjs +2034 -0
- package/fesm2022/forty-cdk-calendar.mjs.map +1 -0
- package/fesm2022/forty-cdk-carousel.mjs +968 -0
- package/fesm2022/forty-cdk-carousel.mjs.map +1 -0
- package/fesm2022/forty-cdk-checkbox.mjs +226 -0
- package/fesm2022/forty-cdk-checkbox.mjs.map +1 -0
- package/fesm2022/forty-cdk-combobox.mjs +2596 -0
- package/fesm2022/forty-cdk-combobox.mjs.map +1 -0
- package/fesm2022/forty-cdk-context-menu.mjs +413 -0
- package/fesm2022/forty-cdk-context-menu.mjs.map +1 -0
- package/fesm2022/forty-cdk-core.mjs +9022 -0
- package/fesm2022/forty-cdk-core.mjs.map +1 -0
- package/fesm2022/forty-cdk-date-field.mjs +744 -0
- package/fesm2022/forty-cdk-date-field.mjs.map +1 -0
- package/fesm2022/forty-cdk-date-picker.mjs +1011 -0
- package/fesm2022/forty-cdk-date-picker.mjs.map +1 -0
- package/fesm2022/forty-cdk-dialog.mjs +707 -0
- package/fesm2022/forty-cdk-dialog.mjs.map +1 -0
- package/fesm2022/forty-cdk-disclosure.mjs +190 -0
- package/fesm2022/forty-cdk-disclosure.mjs.map +1 -0
- package/fesm2022/forty-cdk-drag-drop.mjs +1180 -0
- package/fesm2022/forty-cdk-drag-drop.mjs.map +1 -0
- package/fesm2022/forty-cdk-drawer.mjs +1641 -0
- package/fesm2022/forty-cdk-drawer.mjs.map +1 -0
- package/fesm2022/forty-cdk-dropdown-menu.mjs +350 -0
- package/fesm2022/forty-cdk-dropdown-menu.mjs.map +1 -0
- package/fesm2022/forty-cdk-field.mjs +425 -0
- package/fesm2022/forty-cdk-field.mjs.map +1 -0
- package/fesm2022/forty-cdk-fieldset.mjs +164 -0
- package/fesm2022/forty-cdk-fieldset.mjs.map +1 -0
- package/fesm2022/forty-cdk-file-upload.mjs +221 -0
- package/fesm2022/forty-cdk-file-upload.mjs.map +1 -0
- package/fesm2022/forty-cdk-hover-card.mjs +496 -0
- package/fesm2022/forty-cdk-hover-card.mjs.map +1 -0
- package/fesm2022/forty-cdk-input.mjs +274 -0
- package/fesm2022/forty-cdk-input.mjs.map +1 -0
- package/fesm2022/forty-cdk-internationalized-date.mjs +1 -1
- package/fesm2022/forty-cdk-internationalized-date.mjs.map +1 -1
- package/fesm2022/forty-cdk-listbox.mjs +1279 -0
- package/fesm2022/forty-cdk-listbox.mjs.map +1 -0
- package/fesm2022/forty-cdk-menu.mjs +1439 -0
- package/fesm2022/forty-cdk-menu.mjs.map +1 -0
- package/fesm2022/forty-cdk-menubar.mjs +787 -0
- package/fesm2022/forty-cdk-menubar.mjs.map +1 -0
- package/fesm2022/forty-cdk-meter.mjs +211 -0
- package/fesm2022/forty-cdk-meter.mjs.map +1 -0
- package/fesm2022/forty-cdk-navigation-menu.mjs +1145 -0
- package/fesm2022/forty-cdk-navigation-menu.mjs.map +1 -0
- package/fesm2022/forty-cdk-number-input.mjs +559 -0
- package/fesm2022/forty-cdk-number-input.mjs.map +1 -0
- package/fesm2022/forty-cdk-otp-input.mjs +527 -0
- package/fesm2022/forty-cdk-otp-input.mjs.map +1 -0
- package/fesm2022/forty-cdk-pagination.mjs +323 -0
- package/fesm2022/forty-cdk-pagination.mjs.map +1 -0
- package/fesm2022/forty-cdk-pane-resizer.mjs +297 -0
- package/fesm2022/forty-cdk-pane-resizer.mjs.map +1 -0
- package/fesm2022/forty-cdk-popover.mjs +698 -0
- package/fesm2022/forty-cdk-popover.mjs.map +1 -0
- package/fesm2022/forty-cdk-progress.mjs +226 -0
- package/fesm2022/forty-cdk-progress.mjs.map +1 -0
- package/fesm2022/forty-cdk-radio-group.mjs +378 -0
- package/fesm2022/forty-cdk-radio-group.mjs.map +1 -0
- package/fesm2022/forty-cdk-scroll-area.mjs +640 -0
- package/fesm2022/forty-cdk-scroll-area.mjs.map +1 -0
- package/fesm2022/forty-cdk-search.mjs +205 -0
- package/fesm2022/forty-cdk-search.mjs.map +1 -0
- package/fesm2022/forty-cdk-select.mjs +1661 -0
- package/fesm2022/forty-cdk-select.mjs.map +1 -0
- package/fesm2022/forty-cdk-separator.mjs +82 -0
- package/fesm2022/forty-cdk-separator.mjs.map +1 -0
- package/fesm2022/forty-cdk-signal-forms.mjs +97 -0
- package/fesm2022/forty-cdk-signal-forms.mjs.map +1 -0
- package/fesm2022/forty-cdk-slider.mjs +803 -0
- package/fesm2022/forty-cdk-slider.mjs.map +1 -0
- package/fesm2022/forty-cdk-stepper.mjs +886 -0
- package/fesm2022/forty-cdk-stepper.mjs.map +1 -0
- package/fesm2022/forty-cdk-switch.mjs +137 -0
- package/fesm2022/forty-cdk-switch.mjs.map +1 -0
- package/fesm2022/forty-cdk-table.mjs +1518 -0
- package/fesm2022/forty-cdk-table.mjs.map +1 -0
- package/fesm2022/forty-cdk-tabs.mjs +400 -0
- package/fesm2022/forty-cdk-tabs.mjs.map +1 -0
- package/fesm2022/forty-cdk-time-field.mjs +593 -0
- package/fesm2022/forty-cdk-time-field.mjs.map +1 -0
- package/fesm2022/forty-cdk-time-picker.mjs +1013 -0
- package/fesm2022/forty-cdk-time-picker.mjs.map +1 -0
- package/fesm2022/forty-cdk-toast.mjs +1153 -0
- package/fesm2022/forty-cdk-toast.mjs.map +1 -0
- package/fesm2022/forty-cdk-toggle.mjs +516 -0
- package/fesm2022/forty-cdk-toggle.mjs.map +1 -0
- package/fesm2022/forty-cdk-toolbar.mjs +374 -0
- package/fesm2022/forty-cdk-toolbar.mjs.map +1 -0
- package/fesm2022/forty-cdk-tooltip.mjs +672 -0
- package/fesm2022/forty-cdk-tooltip.mjs.map +1 -0
- package/fesm2022/forty-cdk-tree.mjs +2007 -0
- package/fesm2022/forty-cdk-tree.mjs.map +1 -0
- package/fesm2022/forty-cdk-virtualization.mjs +1 -1
- package/fesm2022/forty-cdk-virtualization.mjs.map +1 -1
- package/fesm2022/forty-cdk.mjs +0 -43310
- package/fesm2022/forty-cdk.mjs.map +1 -1
- package/field/README.md +97 -0
- package/fieldset/README.md +86 -0
- package/file-upload/README.md +73 -0
- package/hover-card/README.md +171 -0
- package/input/README.md +156 -0
- package/listbox/README.md +424 -0
- package/menu/README.md +181 -0
- package/menubar/README.md +140 -0
- package/meter/README.md +128 -0
- package/navigation-menu/README.md +253 -0
- package/number-input/README.md +171 -0
- package/otp-input/README.md +198 -0
- package/package.json +213 -1
- package/pagination/README.md +61 -0
- package/pane-resizer/README.md +136 -0
- package/popover/README.md +262 -0
- package/progress/README.md +115 -0
- package/radio-group/README.md +129 -0
- package/scroll-area/README.md +184 -0
- package/search/README.md +42 -0
- package/select/README.md +488 -0
- package/separator/README.md +84 -0
- package/signal-forms/README.md +72 -0
- package/slider/README.md +152 -0
- package/stepper/README.md +292 -0
- package/switch/README.md +116 -0
- package/table/README.md +769 -0
- package/tabs/README.md +130 -0
- package/time-field/README.md +157 -0
- package/time-picker/README.md +172 -0
- package/toast/README.md +398 -0
- package/toggle/README.md +224 -0
- package/toolbar/README.md +109 -0
- package/tooltip/README.md +274 -0
- package/tree/README.md +708 -0
- package/types/forty-cdk-accordion.d.ts +242 -0
- package/types/forty-cdk-aspect-ratio.d.ts +59 -0
- package/types/forty-cdk-avatar.d.ts +133 -0
- package/types/forty-cdk-breadcrumbs.d.ts +92 -0
- package/types/forty-cdk-breakpoints.d.ts +141 -0
- package/types/forty-cdk-button.d.ts +80 -0
- package/types/forty-cdk-calendar.d.ts +914 -0
- package/types/forty-cdk-carousel.d.ts +530 -0
- package/types/forty-cdk-checkbox.d.ts +141 -0
- package/types/forty-cdk-combobox.d.ts +1259 -0
- package/types/forty-cdk-context-menu.d.ts +313 -0
- package/types/forty-cdk-core.d.ts +5774 -0
- package/types/forty-cdk-date-field.d.ts +307 -0
- package/types/forty-cdk-date-picker.d.ts +622 -0
- package/types/forty-cdk-dialog.d.ts +546 -0
- package/types/forty-cdk-disclosure.d.ts +127 -0
- package/types/forty-cdk-drag-drop.d.ts +456 -0
- package/types/forty-cdk-drawer.d.ts +871 -0
- package/types/forty-cdk-dropdown-menu.d.ts +242 -0
- package/types/forty-cdk-field.d.ts +236 -0
- package/types/forty-cdk-fieldset.d.ts +119 -0
- package/types/forty-cdk-file-upload.d.ts +124 -0
- package/types/forty-cdk-hover-card.d.ts +320 -0
- package/types/forty-cdk-input.d.ts +169 -0
- package/types/forty-cdk-internationalized-date.d.ts +1 -1
- package/types/forty-cdk-listbox.d.ts +513 -0
- package/types/forty-cdk-menu.d.ts +629 -0
- package/types/forty-cdk-menubar.d.ts +451 -0
- package/types/forty-cdk-meter.d.ts +122 -0
- package/types/forty-cdk-navigation-menu.d.ts +514 -0
- package/types/forty-cdk-number-input.d.ts +319 -0
- package/types/forty-cdk-otp-input.d.ts +248 -0
- package/types/forty-cdk-pagination.d.ts +214 -0
- package/types/forty-cdk-pane-resizer.d.ts +145 -0
- package/types/forty-cdk-popover.d.ts +509 -0
- package/types/forty-cdk-progress.d.ts +143 -0
- package/types/forty-cdk-radio-group.d.ts +222 -0
- package/types/forty-cdk-scroll-area.d.ts +258 -0
- package/types/forty-cdk-search.d.ts +142 -0
- package/types/forty-cdk-select.d.ts +899 -0
- package/types/forty-cdk-separator.d.ts +59 -0
- package/types/forty-cdk-signal-forms.d.ts +58 -0
- package/types/forty-cdk-slider.d.ts +379 -0
- package/types/forty-cdk-stepper.d.ts +650 -0
- package/types/forty-cdk-switch.d.ts +87 -0
- package/types/forty-cdk-table.d.ts +723 -0
- package/types/forty-cdk-tabs.d.ts +235 -0
- package/types/forty-cdk-time-field.d.ts +307 -0
- package/types/forty-cdk-time-picker.d.ts +578 -0
- package/types/forty-cdk-toast.d.ts +598 -0
- package/types/forty-cdk-toggle.d.ts +310 -0
- package/types/forty-cdk-toolbar.d.ts +217 -0
- package/types/forty-cdk-tooltip.d.ts +436 -0
- package/types/forty-cdk-tree.d.ts +688 -0
- package/types/forty-cdk.d.ts +1 -19743
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
import * as _angular_core from '@angular/core';
|
|
2
|
+
import { InjectionToken, Signal, Provider } from '@angular/core';
|
|
3
|
+
import * as forty_cdk_file_upload from 'forty-cdk/file-upload';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Shared state contract between the pieces of a FileUpload primitive.
|
|
7
|
+
* Provided by `ForFileUpload`, consumed by `ForFileUploadInput` and
|
|
8
|
+
* `ForFileUploadTrigger`.
|
|
9
|
+
*/
|
|
10
|
+
interface ForFileUploadContext {
|
|
11
|
+
readonly accept: Signal<string | null>;
|
|
12
|
+
readonly multiple: Signal<boolean>;
|
|
13
|
+
readonly directory: Signal<boolean>;
|
|
14
|
+
readonly disabled: Signal<boolean>;
|
|
15
|
+
/** Registers the native `<input type="file">` so the root can open the dialog and sync dropped files. */
|
|
16
|
+
registerInput(el: HTMLInputElement): void;
|
|
17
|
+
/** Opens the native file chooser dialog by programmatically clicking the registered input. */
|
|
18
|
+
openFileDialog(): void;
|
|
19
|
+
/** Emits `filesChange` with the given `FileList` if it is non-empty. */
|
|
20
|
+
emitFiles(files: FileList): void;
|
|
21
|
+
}
|
|
22
|
+
declare const FOR_FILE_UPLOAD_CONTEXT: InjectionToken<ForFileUploadContext>;
|
|
23
|
+
|
|
24
|
+
/**
|
|
25
|
+
* Root drop zone for the FileUpload primitive. Composes with
|
|
26
|
+
* `[forFileUploadInput]` (the accessible native file input) and
|
|
27
|
+
* `[forFileUploadTrigger]` (the button that opens the dialog).
|
|
28
|
+
*
|
|
29
|
+
* `filesChange` is a plain `output<FileList>()` — this primitive is not a
|
|
30
|
+
* Signal Forms control; the native `<input type="file">` is the form participant.
|
|
31
|
+
*
|
|
32
|
+
* Reflects `data-dragging` while files are dragged over the zone and
|
|
33
|
+
* `data-disabled` when the input is disabled.
|
|
34
|
+
*/
|
|
35
|
+
declare class ForFileUpload implements ForFileUploadContext {
|
|
36
|
+
#private;
|
|
37
|
+
/** MIME types or file extensions accepted by the file chooser (e.g. `"image/*,.pdf"`). */
|
|
38
|
+
readonly accept: _angular_core.InputSignal<string | null>;
|
|
39
|
+
/** Whether multiple files can be selected at once. */
|
|
40
|
+
readonly multiple: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
41
|
+
/**
|
|
42
|
+
* When `true`, the native picker selects a whole folder; the emitted
|
|
43
|
+
* `FileList` then contains every file inside it (each carrying a
|
|
44
|
+
* `webkitRelativePath` so the consumer can reconstruct the tree).
|
|
45
|
+
*/
|
|
46
|
+
readonly directory: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
47
|
+
/** Whether the file upload zone and all its pieces are disabled. */
|
|
48
|
+
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
49
|
+
/** Emitted when files are chosen via the dialog or dropped onto the zone. */
|
|
50
|
+
readonly filesChange: _angular_core.OutputEmitterRef<FileList>;
|
|
51
|
+
protected readonly dragging: _angular_core.Signal<boolean>;
|
|
52
|
+
/** Registers the native input so the root can open the dialog and sync dropped files. */
|
|
53
|
+
registerInput(el: HTMLInputElement): void;
|
|
54
|
+
/** Opens the native file chooser dialog if not disabled. */
|
|
55
|
+
openFileDialog(): void;
|
|
56
|
+
/** Emits `filesChange` with the provided `FileList` if it contains at least one file. */
|
|
57
|
+
emitFiles(files: FileList): void;
|
|
58
|
+
protected onDragEnter(event: DragEvent): void;
|
|
59
|
+
protected onDragOver(event: DragEvent): void;
|
|
60
|
+
protected onDragLeave(): void;
|
|
61
|
+
protected onDrop(event: DragEvent): void;
|
|
62
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ForFileUpload, never>;
|
|
63
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ForFileUpload, "[forFileUpload]", ["forFileUpload"], { "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "directory": { "alias": "directory"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "filesChange": "filesChange"; }, never, never, true, never>;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
/**
|
|
67
|
+
* The native `<input type="file">` piece of the FileUpload primitive.
|
|
68
|
+
* Apply on a real `<input>` element inside `[forFileUpload]`.
|
|
69
|
+
*
|
|
70
|
+
* The directive forces `type="file"` and mirrors `accept`, `multiple`,
|
|
71
|
+
* `directory` (as `webkitdirectory`), and `disabled` from the root context.
|
|
72
|
+
* When the user selects files via the native dialog the `change` event emits
|
|
73
|
+
* `filesChange` on the root.
|
|
74
|
+
*
|
|
75
|
+
* Consumers are expected to visually hide this input with their own CSS
|
|
76
|
+
* (e.g. an `sr-only` / `visually-hidden` utility) while keeping it focusable
|
|
77
|
+
* so keyboard users and assistive technology can activate it directly. The
|
|
78
|
+
* directive never sets `hidden`, `display:none`, or `visibility:hidden` — it
|
|
79
|
+
* remains strictly headless.
|
|
80
|
+
*/
|
|
81
|
+
declare class ForFileUploadInput {
|
|
82
|
+
#private;
|
|
83
|
+
protected readonly ctx: forty_cdk_file_upload.ForFileUploadContext;
|
|
84
|
+
constructor();
|
|
85
|
+
protected onChange(): void;
|
|
86
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ForFileUploadInput, never>;
|
|
87
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ForFileUploadInput, "input[forFileUploadInput]", ["forFileUploadInput"], {}, {}, never, never, true, never>;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
/**
|
|
91
|
+
* Trigger button that opens the native file chooser dialog.
|
|
92
|
+
* Apply on a native `<button>` inside `[forFileUpload]`.
|
|
93
|
+
*
|
|
94
|
+
* `type="button"` is forced to prevent accidental form submission.
|
|
95
|
+
* The native `disabled` attribute is reflected imperatively so the button
|
|
96
|
+
* is visually and functionally disabled when the root zone is disabled.
|
|
97
|
+
*/
|
|
98
|
+
declare class ForFileUploadTrigger {
|
|
99
|
+
protected readonly ctx: forty_cdk_file_upload.ForFileUploadContext;
|
|
100
|
+
constructor();
|
|
101
|
+
protected onClick(): void;
|
|
102
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ForFileUploadTrigger, never>;
|
|
103
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ForFileUploadTrigger, "[forFileUploadTrigger]", ["forFileUploadTrigger"], {}, {}, never, never, true, never>;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
/**
|
|
107
|
+
* Defaults inherited by descendant file-upload zones in the surrounding
|
|
108
|
+
* injector scope. Configure with `provideForFileUploadDefaults`. The shape
|
|
109
|
+
* is a stub today — present so future per-scope tuning can land without
|
|
110
|
+
* churning the public surface.
|
|
111
|
+
*/
|
|
112
|
+
interface ForFileUploadDefaults {
|
|
113
|
+
}
|
|
114
|
+
/** Token holding the resolved file-upload defaults for the current scope. */
|
|
115
|
+
declare const FOR_FILE_UPLOAD_DEFAULTS: _angular_core.InjectionToken<ForFileUploadDefaults>;
|
|
116
|
+
/**
|
|
117
|
+
* Configures forty-cdk file-upload defaults for this injector scope. Partial
|
|
118
|
+
* overrides inherit unspecified keys from the parent scope (or library
|
|
119
|
+
* defaults at the root).
|
|
120
|
+
*/
|
|
121
|
+
declare function provideForFileUploadDefaults(defaults?: Partial<ForFileUploadDefaults>): Provider[];
|
|
122
|
+
|
|
123
|
+
export { FOR_FILE_UPLOAD_CONTEXT, FOR_FILE_UPLOAD_DEFAULTS, ForFileUpload, ForFileUploadInput, ForFileUploadTrigger, provideForFileUploadDefaults };
|
|
124
|
+
export type { ForFileUploadContext, ForFileUploadDefaults };
|
|
@@ -0,0 +1,320 @@
|
|
|
1
|
+
import * as _angular_core from '@angular/core';
|
|
2
|
+
import { InjectionToken, Signal, Provider } from '@angular/core';
|
|
3
|
+
import { AnchoredPositioningContext, FloatingSide, FloatingAlign, VetoableNativeEvent } from 'forty-cdk/core';
|
|
4
|
+
import * as forty_cdk_hover_card from 'forty-cdk/hover-card';
|
|
5
|
+
|
|
6
|
+
/** Why an open / close was scheduled. */
|
|
7
|
+
type HoverCardScheduleReason = 'hover-trigger' | 'hover-content' | 'focus' | 'escape';
|
|
8
|
+
interface ForHoverCardContext extends AnchoredPositioningContext {
|
|
9
|
+
readonly open: Signal<boolean>;
|
|
10
|
+
readonly disabled: Signal<boolean>;
|
|
11
|
+
readonly trigger: Signal<HTMLElement | null>;
|
|
12
|
+
readonly content: Signal<HTMLElement | null>;
|
|
13
|
+
registerTrigger(el: HTMLElement): void;
|
|
14
|
+
unregisterTrigger(el: HTMLElement): void;
|
|
15
|
+
registerArrow(el: HTMLElement): void;
|
|
16
|
+
unregisterArrow(el: HTMLElement): void;
|
|
17
|
+
registerContent(el: HTMLElement): void;
|
|
18
|
+
unregisterContent(el: HTMLElement): void;
|
|
19
|
+
/** Schedule the card to open after `openDelay` ms (instant when delay is 0). */
|
|
20
|
+
scheduleOpen(reason: HoverCardScheduleReason): void;
|
|
21
|
+
/** Schedule the card to close after `closeDelay` ms (instant on `escape`). */
|
|
22
|
+
scheduleClose(reason: HoverCardScheduleReason): void;
|
|
23
|
+
/** Cancel any pending open / close timer without changing state. */
|
|
24
|
+
cancelPending(): void;
|
|
25
|
+
/**
|
|
26
|
+
* Emit the public `(escapeKeyDown)` output and, unless prevented, close.
|
|
27
|
+
* Driven by the content's document-level dismissable layer, so the card
|
|
28
|
+
* responds to Escape regardless of where focus lives — including a card
|
|
29
|
+
* opened by hover while focus sits on an unrelated element.
|
|
30
|
+
*/
|
|
31
|
+
emitEscapeKeyDown(event: KeyboardEvent): void;
|
|
32
|
+
}
|
|
33
|
+
declare const FOR_HOVER_CARD_CONTEXT: InjectionToken<ForHoverCardContext>;
|
|
34
|
+
|
|
35
|
+
/**
|
|
36
|
+
* Headless hover-preview card. Use it to surface rich, interactive previews
|
|
37
|
+
* (profile snapshots, link previews, definition cards) on hover or focus
|
|
38
|
+
* of an already-meaningful trigger (a link, a name).
|
|
39
|
+
*
|
|
40
|
+
* **Not a tooltip.** Hover-cards may contain interactive content
|
|
41
|
+
* (clickable links, copy buttons, …); the trigger must convey full meaning
|
|
42
|
+
* on its own so keyboard-only users miss nothing.
|
|
43
|
+
*
|
|
44
|
+
* Open / close delays default to 700 / 300 ms; the per-injector-scope
|
|
45
|
+
* `provideForHoverCardDefaults` configures the cadence and the skip-delay
|
|
46
|
+
* window for adjacent cards.
|
|
47
|
+
*
|
|
48
|
+
* @example
|
|
49
|
+
* ```html
|
|
50
|
+
* <span forHoverCard #card="forHoverCard">
|
|
51
|
+
* <a forHoverCardTrigger href="/users/ada">Ada Lovelace</a>
|
|
52
|
+
* @if (card.open()) {
|
|
53
|
+
* <div forHoverCardContent animate.enter="fade-in" animate.leave="fade-out">
|
|
54
|
+
* <img src="/api/avatar/ada" alt="" />
|
|
55
|
+
* <h3>Ada Lovelace</h3>
|
|
56
|
+
* <p>Mathematician.</p>
|
|
57
|
+
* </div>
|
|
58
|
+
* }
|
|
59
|
+
* </span>
|
|
60
|
+
* ```
|
|
61
|
+
*/
|
|
62
|
+
declare class ForHoverCard implements ForHoverCardContext {
|
|
63
|
+
#private;
|
|
64
|
+
/**
|
|
65
|
+
* Two-way bindable. Whether the card is currently shown. The `model()`
|
|
66
|
+
* change emitter (`(openChange)`) fires only on internal transitions
|
|
67
|
+
* (delay-driven, escape, blur, and the force-close that runs when `disabled`
|
|
68
|
+
* flips to true), never on consumer writes through `[(open)]`.
|
|
69
|
+
*/
|
|
70
|
+
readonly open: _angular_core.ModelSignal<boolean>;
|
|
71
|
+
/**
|
|
72
|
+
* Per-card override for the side the card is anchored to. Pair with
|
|
73
|
+
* `align` for the full positioning API. When `undefined` (default), falls
|
|
74
|
+
* back to `ForHoverCardDefaults.side` from the surrounding
|
|
75
|
+
* `provideForHoverCardDefaults` scope (`'top'` unless configured).
|
|
76
|
+
*
|
|
77
|
+
* The input is aliased to `side`; consumers bind `[side]="..."` and read
|
|
78
|
+
* the effective value via the public `side` computed below.
|
|
79
|
+
*/
|
|
80
|
+
readonly _sideInput: _angular_core.InputSignal<FloatingSide | undefined>;
|
|
81
|
+
/** Effective anchor side: the `side` input when set, else the scope default. */
|
|
82
|
+
readonly side: _angular_core.Signal<FloatingSide>;
|
|
83
|
+
/**
|
|
84
|
+
* Per-card override for the alignment along the chosen `side`. When
|
|
85
|
+
* `undefined` (default), falls back to `ForHoverCardDefaults.align` from the
|
|
86
|
+
* surrounding `provideForHoverCardDefaults` scope (`'center'` unless
|
|
87
|
+
* configured).
|
|
88
|
+
*
|
|
89
|
+
* The input is aliased to `align`; consumers bind `[align]="..."` and read
|
|
90
|
+
* the effective value via the public `align` computed below.
|
|
91
|
+
*/
|
|
92
|
+
readonly _alignInput: _angular_core.InputSignal<FloatingAlign | undefined>;
|
|
93
|
+
/** Effective alignment: the `align` input when set, else the scope default. */
|
|
94
|
+
readonly align: _angular_core.Signal<FloatingAlign>;
|
|
95
|
+
/**
|
|
96
|
+
* Per-card override for the gap (px) between trigger and card along the
|
|
97
|
+
* main axis. When `undefined` (default),
|
|
98
|
+
* falls back to `ForHoverCardDefaults.sideOffset` from the surrounding
|
|
99
|
+
* `provideForHoverCardDefaults` scope (`8` unless configured).
|
|
100
|
+
*
|
|
101
|
+
* The input is aliased to `sideOffset`; consumers bind `[sideOffset]="..."`
|
|
102
|
+
* and read the effective value via the public `sideOffset` computed below.
|
|
103
|
+
*/
|
|
104
|
+
readonly _sideOffsetInput: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
|
|
105
|
+
/** Effective main-axis gap (px): the `sideOffset` input when set, else the scope default. */
|
|
106
|
+
readonly sideOffset: _angular_core.Signal<number>;
|
|
107
|
+
/** Gap (px) along the cross axis. Default `0`. */
|
|
108
|
+
readonly alignOffset: _angular_core.InputSignalWithTransform<number, unknown>;
|
|
109
|
+
/** When `true` (default), `flip` and `shift` keep the card inside the viewport. */
|
|
110
|
+
readonly avoidCollisions: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
111
|
+
/**
|
|
112
|
+
* Per-card override for the padding (px) applied uniformly to the `flip`,
|
|
113
|
+
* `shift`, and `size` middlewares. When `undefined` (default), falls back
|
|
114
|
+
* to `ForHoverCardDefaults.collisionPadding` from the surrounding
|
|
115
|
+
* `provideForHoverCardDefaults` scope (`8` unless configured).
|
|
116
|
+
*
|
|
117
|
+
* The input is aliased to `collisionPadding`; consumers bind
|
|
118
|
+
* `[collisionPadding]="..."` and read the effective value via the public
|
|
119
|
+
* `collisionPadding` computed below.
|
|
120
|
+
*/
|
|
121
|
+
readonly _collisionPaddingInput: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
|
|
122
|
+
/** Effective collision padding (px): the `collisionPadding` input when set, else the scope default. */
|
|
123
|
+
readonly collisionPadding: _angular_core.Signal<number>;
|
|
124
|
+
/** Padding (px) for the `arrow` middleware. Default `0`. */
|
|
125
|
+
readonly arrowPadding: _angular_core.InputSignalWithTransform<number, unknown>;
|
|
126
|
+
/** Stickiness behaviour for `shift`. Default `'partial'`. */
|
|
127
|
+
readonly sticky: _angular_core.InputSignal<false | "partial" | "always">;
|
|
128
|
+
/** When `true`, sets `data-detached=""` while the trigger is scrolled off-screen. */
|
|
129
|
+
readonly hideWhenDetached: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
130
|
+
/**
|
|
131
|
+
* When `true` (default), the content is clipped until floating-ui resolves
|
|
132
|
+
* its first position, preventing a flash at the viewport corner. Set to
|
|
133
|
+
* `false` so a dramatic `animate.enter` plays from its first frame (the
|
|
134
|
+
* surface may flash briefly at the unresolved position while positioning
|
|
135
|
+
* computes).
|
|
136
|
+
*/
|
|
137
|
+
readonly clipUntilPositioned: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
138
|
+
/** Per-card override for open delay (ms). Falls back to coordinator (700ms). */
|
|
139
|
+
readonly openDelay: _angular_core.InputSignal<number | undefined>;
|
|
140
|
+
/** Per-card override for close delay (ms). Falls back to coordinator (300ms). */
|
|
141
|
+
readonly closeDelay: _angular_core.InputSignal<number | undefined>;
|
|
142
|
+
/** When true, all hover / focus interaction is ignored and any open card is forced closed. */
|
|
143
|
+
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
144
|
+
/**
|
|
145
|
+
* Fires when the user presses Escape while the card is open, regardless of
|
|
146
|
+
* where focus currently lives — on the trigger, inside the portaled
|
|
147
|
+
* content, or on an unrelated element (the common case for a card opened by
|
|
148
|
+
* hover). Routed through the content's document-level dismissable layer.
|
|
149
|
+
* Call `preventDefault()` on the emitted veto to suppress the automatic
|
|
150
|
+
* close. The native `KeyboardEvent` is on `.event`.
|
|
151
|
+
*/
|
|
152
|
+
readonly escapeKeyDown: _angular_core.OutputEmitterRef<VetoableNativeEvent<KeyboardEvent>>;
|
|
153
|
+
readonly trigger: _angular_core.Signal<HTMLElement | null>;
|
|
154
|
+
readonly arrow: _angular_core.Signal<HTMLElement | null>;
|
|
155
|
+
readonly content: _angular_core.Signal<HTMLElement | null>;
|
|
156
|
+
constructor();
|
|
157
|
+
registerTrigger(el: HTMLElement): void;
|
|
158
|
+
unregisterTrigger(el: HTMLElement): void;
|
|
159
|
+
registerArrow(el: HTMLElement): void;
|
|
160
|
+
unregisterArrow(el: HTMLElement): void;
|
|
161
|
+
registerContent(el: HTMLElement): void;
|
|
162
|
+
unregisterContent(el: HTMLElement): void;
|
|
163
|
+
scheduleOpen(_reason: HoverCardScheduleReason): void;
|
|
164
|
+
scheduleClose(reason: HoverCardScheduleReason): void;
|
|
165
|
+
cancelPending(): void;
|
|
166
|
+
/**
|
|
167
|
+
* Emit `(escapeKeyDown)` and, unless the consumer calls `preventDefault()`
|
|
168
|
+
* on the veto, close immediately. Driven by the content's document-level
|
|
169
|
+
* dismissable layer so Escape works no matter where focus currently lives
|
|
170
|
+
* — including a hover-opened card with focus on an unrelated element.
|
|
171
|
+
*/
|
|
172
|
+
emitEscapeKeyDown(event: KeyboardEvent): void;
|
|
173
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ForHoverCard, never>;
|
|
174
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ForHoverCard, "[forHoverCard]", ["forHoverCard"], { "open": { "alias": "open"; "required": false; "isSignal": true; }; "_sideInput": { "alias": "side"; "required": false; "isSignal": true; }; "_alignInput": { "alias": "align"; "required": false; "isSignal": true; }; "_sideOffsetInput": { "alias": "sideOffset"; "required": false; "isSignal": true; }; "alignOffset": { "alias": "alignOffset"; "required": false; "isSignal": true; }; "avoidCollisions": { "alias": "avoidCollisions"; "required": false; "isSignal": true; }; "_collisionPaddingInput": { "alias": "collisionPadding"; "required": false; "isSignal": true; }; "arrowPadding": { "alias": "arrowPadding"; "required": false; "isSignal": true; }; "sticky": { "alias": "sticky"; "required": false; "isSignal": true; }; "hideWhenDetached": { "alias": "hideWhenDetached"; "required": false; "isSignal": true; }; "clipUntilPositioned": { "alias": "clipUntilPositioned"; "required": false; "isSignal": true; }; "openDelay": { "alias": "openDelay"; "required": false; "isSignal": true; }; "closeDelay": { "alias": "closeDelay"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "escapeKeyDown": "escapeKeyDown"; }, never, never, true, never>;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
/**
|
|
178
|
+
* Element that activates the hover-card on hover or focus. Apply on a link,
|
|
179
|
+
* a button, or any focusable element that already conveys the underlying
|
|
180
|
+
* action (the card adds preview, not meaning).
|
|
181
|
+
*
|
|
182
|
+
* Reflects `data-state` so consumers can style the trigger when its card is
|
|
183
|
+
* open (e.g. an underline that turns solid).
|
|
184
|
+
*
|
|
185
|
+
* **Intentional ARIA exception.** The trigger exposes no `aria-controls`,
|
|
186
|
+
* `aria-expanded`, or `aria-describedby`, and `[forHoverCardContent]` carries
|
|
187
|
+
* no role. This is deliberate: the trigger must already be
|
|
188
|
+
* self-meaningful (a link or button that conveys the underlying action on its
|
|
189
|
+
* own — the card adds preview, not meaning), and the card is non-essential
|
|
190
|
+
* supplementary content that is hover/focus-revealed and not part of the
|
|
191
|
+
* accessibility relationship. Popover / Tooltip, whose content is meant to be
|
|
192
|
+
* discovered via the trigger, do wire trigger ARIA — HoverCard intentionally
|
|
193
|
+
* does not.
|
|
194
|
+
*
|
|
195
|
+
* Escape dismissal is owned by the content's document-level dismissable
|
|
196
|
+
* layer (see `ForHoverCardContent`), so it works from the trigger and from
|
|
197
|
+
* unrelated focus alike — the trigger carries no Escape listener of its own.
|
|
198
|
+
*
|
|
199
|
+
* The root is normally resolved via DI from the enclosing `[forHoverCard]`.
|
|
200
|
+
* When the trigger is declared inside an `ng-template` stamped into the root
|
|
201
|
+
* (e.g. via `ngTemplateOutlet`), DI resolves at the template's declaration
|
|
202
|
+
* site and misses the root — pass it explicitly through the selector input,
|
|
203
|
+
* `routerLink`-style: `[forHoverCardTrigger]="root"` with `#root="forHoverCard"`.
|
|
204
|
+
*/
|
|
205
|
+
declare class ForHoverCardTrigger {
|
|
206
|
+
#private;
|
|
207
|
+
/**
|
|
208
|
+
* Optional explicit reference to the `[forHoverCard]` root, named after the
|
|
209
|
+
* selector `routerLink`-style. The bare valueless attribute keeps resolving
|
|
210
|
+
* the enclosing root via DI; pass the root explicitly
|
|
211
|
+
* (`[forHoverCardTrigger]="root"`, with `#root="forHoverCard"`) when the
|
|
212
|
+
* trigger is declared in an `ng-template` stamped inside the root — DI
|
|
213
|
+
* resolves at the template's declaration site, so the enclosing root is
|
|
214
|
+
* invisible there. The empty string (what the valueless attribute yields)
|
|
215
|
+
* is treated as unset.
|
|
216
|
+
*/
|
|
217
|
+
readonly forHoverCardTrigger: _angular_core.InputSignal<"" | ForHoverCardContext>;
|
|
218
|
+
protected readonly ctx: _angular_core.Signal<ForHoverCardContext>;
|
|
219
|
+
constructor();
|
|
220
|
+
protected onPointerEnter(): void;
|
|
221
|
+
protected onPointerLeave(event: PointerEvent): void;
|
|
222
|
+
protected onFocus(): void;
|
|
223
|
+
protected onBlur(): void;
|
|
224
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ForHoverCardTrigger, never>;
|
|
225
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ForHoverCardTrigger, "[forHoverCardTrigger]", ["forHoverCardTrigger"], { "forHoverCardTrigger": { "alias": "forHoverCardTrigger"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
/**
|
|
229
|
+
* The hover-card surface. Portaled to `document.body` and positioned by
|
|
230
|
+
* floating-ui (via the shared `injectOverlayShell` helper). Pointer-enter
|
|
231
|
+
* on the content cancels the pending close, so the user can move the
|
|
232
|
+
* cursor from the trigger into the card to interact with its content
|
|
233
|
+
* (links, buttons, copy targets).
|
|
234
|
+
*
|
|
235
|
+
* Mount / unmount via `@if (card.open())` on the consumer side so
|
|
236
|
+
* `animate.enter` / `animate.leave` work natively.
|
|
237
|
+
*
|
|
238
|
+
* Escape is routed through the shared document-level `DismissableLayer`
|
|
239
|
+
* (Escape-only — outside dismissal stays implicit via pointer-leave
|
|
240
|
+
* timing), so it dismisses the card no matter where focus lives when the
|
|
241
|
+
* card was hover-opened. Initial-focus and return-focus bundles are
|
|
242
|
+
* omitted because the surface is informational and never steals focus.
|
|
243
|
+
*
|
|
244
|
+
* **Intentional ARIA exception.** The content carries no role (only
|
|
245
|
+
* `data-state` for styling) and the trigger exposes no ARIA linkage — the
|
|
246
|
+
* card is non-essential supplementary content. See
|
|
247
|
+
* `ForHoverCardTrigger` for the full rationale.
|
|
248
|
+
*/
|
|
249
|
+
declare class ForHoverCardContent {
|
|
250
|
+
protected readonly ctx: forty_cdk_hover_card.ForHoverCardContext;
|
|
251
|
+
constructor();
|
|
252
|
+
protected onPointerEnter(): void;
|
|
253
|
+
protected onPointerLeave(): void;
|
|
254
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ForHoverCardContent, never>;
|
|
255
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ForHoverCardContent, "[forHoverCardContent]", ["forHoverCardContent"], {}, {}, never, never, true, never>;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
/**
|
|
259
|
+
* Arrow pointing from the card back to its trigger. Floating-ui places it
|
|
260
|
+
* along the right edge so the consumer only has to give it a size and a
|
|
261
|
+
* background — no positioning math required.
|
|
262
|
+
*/
|
|
263
|
+
declare class ForHoverCardArrow {
|
|
264
|
+
#private;
|
|
265
|
+
constructor();
|
|
266
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ForHoverCardArrow, never>;
|
|
267
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ForHoverCardArrow, "[forHoverCardArrow]", ["forHoverCardArrow"], {}, {}, never, never, true, never>;
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
/**
|
|
271
|
+
* Defaults inherited by descendant hover-cards in the surrounding injector
|
|
272
|
+
* scope. Configure with `provideForHoverCardDefaults` at the app root or in
|
|
273
|
+
* any component's `providers`.
|
|
274
|
+
*/
|
|
275
|
+
interface ForHoverCardDefaults {
|
|
276
|
+
/** Open delay (ms) for cards that don't override `openDelay` locally. */
|
|
277
|
+
openDelay: number;
|
|
278
|
+
/** Close delay (ms) for cards that don't override `closeDelay` locally. */
|
|
279
|
+
closeDelay: number;
|
|
280
|
+
/**
|
|
281
|
+
* Window (ms) after a peer card in this scope closes during which the
|
|
282
|
+
* next open is instant — useful for adjacent profile cards in a list,
|
|
283
|
+
* so cursor movement doesn't feel sluggish.
|
|
284
|
+
*/
|
|
285
|
+
skipDelayDuration: number;
|
|
286
|
+
/**
|
|
287
|
+
* Side the card is anchored to for cards that don't override `side`
|
|
288
|
+
* locally. Library fallback `'top'`.
|
|
289
|
+
*/
|
|
290
|
+
side: FloatingSide;
|
|
291
|
+
/**
|
|
292
|
+
* Alignment along the chosen `side` for cards that don't override `align`
|
|
293
|
+
* locally. Library fallback `'center'`.
|
|
294
|
+
*/
|
|
295
|
+
align: FloatingAlign;
|
|
296
|
+
/**
|
|
297
|
+
* Gap (px) between trigger and card along the main axis for cards that
|
|
298
|
+
* don't override `sideOffset` locally.
|
|
299
|
+
* Library fallback `8`.
|
|
300
|
+
*/
|
|
301
|
+
sideOffset: number;
|
|
302
|
+
/**
|
|
303
|
+
* Padding (px) applied uniformly to the `flip`, `shift`, and `size`
|
|
304
|
+
* middlewares for cards that don't override `collisionPadding` locally.
|
|
305
|
+
* Library fallback `8`.
|
|
306
|
+
*/
|
|
307
|
+
collisionPadding: number;
|
|
308
|
+
}
|
|
309
|
+
/** Token holding the resolved hover-card defaults for the current scope. */
|
|
310
|
+
declare const FOR_HOVER_CARD_DEFAULTS: _angular_core.InjectionToken<ForHoverCardDefaults>;
|
|
311
|
+
/**
|
|
312
|
+
* Configures forty-cdk hover-card defaults for this injector scope.
|
|
313
|
+
* Partial overrides inherit unspecified keys from the parent scope (or
|
|
314
|
+
* library defaults at the root). Each call establishes a new coordinator
|
|
315
|
+
* scope.
|
|
316
|
+
*/
|
|
317
|
+
declare function provideForHoverCardDefaults(defaults?: Partial<ForHoverCardDefaults>): Provider[];
|
|
318
|
+
|
|
319
|
+
export { FOR_HOVER_CARD_CONTEXT, FOR_HOVER_CARD_DEFAULTS, ForHoverCard, ForHoverCardArrow, ForHoverCardContent, ForHoverCardTrigger, provideForHoverCardDefaults };
|
|
320
|
+
export type { ForHoverCardContext, ForHoverCardDefaults, HoverCardScheduleReason };
|
|
@@ -0,0 +1,169 @@
|
|
|
1
|
+
import { FormValueControl } from '@angular/forms/signals';
|
|
2
|
+
import { TextValueControlBase } from 'forty-cdk/core';
|
|
3
|
+
import * as i0 from '@angular/core';
|
|
4
|
+
import { Provider } from '@angular/core';
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* Headless text `<input>` implementing Angular's `FormValueControl<string>`
|
|
8
|
+
* from `@angular/forms/signals`, so it auto-wires with `[formField]` and
|
|
9
|
+
* auto-associates inside a `[forField]` (label / description / error) with no
|
|
10
|
+
* extra markup.
|
|
11
|
+
*
|
|
12
|
+
* Apply on a native `<input>`. The element keeps its own `type`
|
|
13
|
+
* (`text` / `email` / `password` / …), caret, IME composition, and native form
|
|
14
|
+
* submission — the directive only bridges the value to a signal and reflects
|
|
15
|
+
* validation state. For a multi-line control use `[forTextarea]`.
|
|
16
|
+
*
|
|
17
|
+
* The host gets `data-empty` (while the value is `''`), `data-disabled`, and
|
|
18
|
+
* `data-readonly` for CSS hooks.
|
|
19
|
+
*
|
|
20
|
+
* @example
|
|
21
|
+
* ```html
|
|
22
|
+
* <input forInput [(value)]="email" type="email" />
|
|
23
|
+
*
|
|
24
|
+
* <!-- With Signal Forms + Field (auto-wired): -->
|
|
25
|
+
* <div forField>
|
|
26
|
+
* <label forLabel>Full name</label>
|
|
27
|
+
* <input forInput [formField]="profile.name" />
|
|
28
|
+
* </div>
|
|
29
|
+
* ```
|
|
30
|
+
*/
|
|
31
|
+
declare class ForInput extends TextValueControlBase implements FormValueControl<string> {
|
|
32
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ForInput, never>;
|
|
33
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<ForInput, "[forInput]", ["forInput"], {}, {}, never, never, true, never>;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
/**
|
|
37
|
+
* Headless multi-line text `<textarea>` implementing Angular's
|
|
38
|
+
* `FormValueControl<string>` from `@angular/forms/signals`, so it auto-wires
|
|
39
|
+
* with `[formField]` and auto-associates inside a `[forField]` (label /
|
|
40
|
+
* description / error) with no extra markup.
|
|
41
|
+
*
|
|
42
|
+
* Apply on a native `<textarea>`. The element keeps its own caret, wrapping,
|
|
43
|
+
* IME composition, and native form submission — the directive only bridges the
|
|
44
|
+
* value to a signal and reflects validation state. The string-valued sibling
|
|
45
|
+
* of `[forInput]`.
|
|
46
|
+
*
|
|
47
|
+
* The host gets `data-empty` (while the value is `''`), `data-disabled`, and
|
|
48
|
+
* `data-readonly` for CSS hooks.
|
|
49
|
+
*
|
|
50
|
+
* With `[autosize]` the host grows and shrinks its height to fit the content on
|
|
51
|
+
* every edit, programmatic value change, and width reflow, and reflects
|
|
52
|
+
* `data-autosize` for styling (pair it with `resize: none; overflow: hidden;`).
|
|
53
|
+
* Autosize is a DOM side effect gated to the browser, so it is inert under SSR.
|
|
54
|
+
*
|
|
55
|
+
* @example
|
|
56
|
+
* ```html
|
|
57
|
+
* <textarea forTextarea [(value)]="bio" placeholder="About you"></textarea>
|
|
58
|
+
*
|
|
59
|
+
* <!-- Grow to content: -->
|
|
60
|
+
* <textarea forTextarea autosize [(value)]="bio"></textarea>
|
|
61
|
+
*
|
|
62
|
+
* <!-- With Signal Forms + Field (auto-wired): -->
|
|
63
|
+
* <div forField>
|
|
64
|
+
* <label forLabel>Bio</label>
|
|
65
|
+
* <textarea forTextarea [formField]="profile.bio"></textarea>
|
|
66
|
+
* </div>
|
|
67
|
+
* ```
|
|
68
|
+
*/
|
|
69
|
+
declare class ForTextarea extends TextValueControlBase implements FormValueControl<string> {
|
|
70
|
+
#private;
|
|
71
|
+
/**
|
|
72
|
+
* Opt into height auto-sizing. When `true` the textarea's height tracks its
|
|
73
|
+
* content: it grows as the value gets taller and shrinks back as it gets
|
|
74
|
+
* shorter, recomputed on every edit, on programmatic `value` writes, and on
|
|
75
|
+
* width reflow. Defaults to `false`, leaving the element's height to CSS.
|
|
76
|
+
*/
|
|
77
|
+
readonly autosize: i0.InputSignalWithTransform<boolean, unknown>;
|
|
78
|
+
constructor();
|
|
79
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ForTextarea, never>;
|
|
80
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<ForTextarea, "[forTextarea]", ["forTextarea"], { "autosize": { "alias": "autosize"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
/**
|
|
84
|
+
* Defaults inherited by descendant `[forInput]` / `[forTextarea]` controls in
|
|
85
|
+
* the surrounding injector scope. Configure with `provideForInputDefaults`.
|
|
86
|
+
* The shape is a stub today — present so future per-scope tuning can land
|
|
87
|
+
* without churning the public surface.
|
|
88
|
+
*/
|
|
89
|
+
interface ForInputDefaults {
|
|
90
|
+
}
|
|
91
|
+
/** Token holding the resolved text-input defaults for the current scope. */
|
|
92
|
+
declare const FOR_INPUT_DEFAULTS: i0.InjectionToken<ForInputDefaults>;
|
|
93
|
+
/**
|
|
94
|
+
* Configures forty-cdk text-input defaults for this injector scope. Partial
|
|
95
|
+
* overrides inherit unspecified keys from the parent scope (or library
|
|
96
|
+
* defaults at the root).
|
|
97
|
+
*/
|
|
98
|
+
declare function provideForInputDefaults(defaults?: Partial<ForInputDefaults>): Provider[];
|
|
99
|
+
|
|
100
|
+
/**
|
|
101
|
+
* Exact public names of every `ForInput` input, its models included. Spread it into the
|
|
102
|
+
* `inputs` array of a `hostDirectives` entry so a wrapper component re-exposes the
|
|
103
|
+
* primitive's full surface — the Signal Forms members `[formField]` binds among them —
|
|
104
|
+
* without hand-maintaining the list. Always spread into an inline object literal as shown
|
|
105
|
+
* below: the literal is what keeps the entry statically analyzable for consumers compiling
|
|
106
|
+
* against the published package. An anti-drift spec fails when this list no longer matches
|
|
107
|
+
* the directive's actual API. See `docs/wrapping-form-primitives.md` for both supported
|
|
108
|
+
* wrapping patterns.
|
|
109
|
+
*
|
|
110
|
+
* @example
|
|
111
|
+
* ```ts
|
|
112
|
+
* @Component({
|
|
113
|
+
* selector: 'input[myInput]',
|
|
114
|
+
* template: '',
|
|
115
|
+
* hostDirectives: [
|
|
116
|
+
* {
|
|
117
|
+
* directive: ForInput,
|
|
118
|
+
* inputs: [...FOR_INPUT_HOST_DIRECTIVE_INPUTS],
|
|
119
|
+
* outputs: [...FOR_INPUT_HOST_DIRECTIVE_OUTPUTS],
|
|
120
|
+
* },
|
|
121
|
+
* ],
|
|
122
|
+
* })
|
|
123
|
+
* export class MyInput {}
|
|
124
|
+
* ```
|
|
125
|
+
*/
|
|
126
|
+
declare const FOR_INPUT_HOST_DIRECTIVE_INPUTS: readonly ["value", "dirty", "disabled", "errors", "invalid", "name", "pending", "readonly", "required", "touched"];
|
|
127
|
+
/**
|
|
128
|
+
* Exact public names of every `ForInput` output, the Signal Forms `touch` output
|
|
129
|
+
* included. Spread it into the `outputs` array of the same `hostDirectives` entry as
|
|
130
|
+
* {@link FOR_INPUT_HOST_DIRECTIVE_INPUTS}.
|
|
131
|
+
*/
|
|
132
|
+
declare const FOR_INPUT_HOST_DIRECTIVE_OUTPUTS: readonly ["valueChange", "touchedChange", "touch"];
|
|
133
|
+
|
|
134
|
+
/**
|
|
135
|
+
* Exact public names of every `ForTextarea` input, its models included. Spread it into the
|
|
136
|
+
* `inputs` array of a `hostDirectives` entry so a wrapper component re-exposes the
|
|
137
|
+
* primitive's full surface — the Signal Forms members `[formField]` binds among them —
|
|
138
|
+
* without hand-maintaining the list. Always spread into an inline object literal as shown
|
|
139
|
+
* below: the literal is what keeps the entry statically analyzable for consumers compiling
|
|
140
|
+
* against the published package. An anti-drift spec fails when this list no longer matches
|
|
141
|
+
* the directive's actual API. See `docs/wrapping-form-primitives.md` for both supported
|
|
142
|
+
* wrapping patterns.
|
|
143
|
+
*
|
|
144
|
+
* @example
|
|
145
|
+
* ```ts
|
|
146
|
+
* @Component({
|
|
147
|
+
* selector: 'textarea[myTextarea]',
|
|
148
|
+
* template: '',
|
|
149
|
+
* hostDirectives: [
|
|
150
|
+
* {
|
|
151
|
+
* directive: ForTextarea,
|
|
152
|
+
* inputs: [...FOR_TEXTAREA_HOST_DIRECTIVE_INPUTS],
|
|
153
|
+
* outputs: [...FOR_TEXTAREA_HOST_DIRECTIVE_OUTPUTS],
|
|
154
|
+
* },
|
|
155
|
+
* ],
|
|
156
|
+
* })
|
|
157
|
+
* export class MyTextarea {}
|
|
158
|
+
* ```
|
|
159
|
+
*/
|
|
160
|
+
declare const FOR_TEXTAREA_HOST_DIRECTIVE_INPUTS: readonly ["value", "autosize", "dirty", "disabled", "errors", "invalid", "name", "pending", "readonly", "required", "touched"];
|
|
161
|
+
/**
|
|
162
|
+
* Exact public names of every `ForTextarea` output, the Signal Forms `touch` output
|
|
163
|
+
* included. Spread it into the `outputs` array of the same `hostDirectives` entry as
|
|
164
|
+
* {@link FOR_TEXTAREA_HOST_DIRECTIVE_INPUTS}.
|
|
165
|
+
*/
|
|
166
|
+
declare const FOR_TEXTAREA_HOST_DIRECTIVE_OUTPUTS: readonly ["valueChange", "touchedChange", "touch"];
|
|
167
|
+
|
|
168
|
+
export { FOR_INPUT_DEFAULTS, FOR_INPUT_HOST_DIRECTIVE_INPUTS, FOR_INPUT_HOST_DIRECTIVE_OUTPUTS, FOR_TEXTAREA_HOST_DIRECTIVE_INPUTS, FOR_TEXTAREA_HOST_DIRECTIVE_OUTPUTS, ForInput, ForTextarea, provideForInputDefaults };
|
|
169
|
+
export type { ForInputDefaults };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { Provider } from '@angular/core';
|
|
3
3
|
import { CalendarDate, CalendarDateTime } from '@internationalized/date';
|
|
4
|
-
import { DateAdapter } from 'forty-cdk';
|
|
4
|
+
import { DateAdapter } from 'forty-cdk/core';
|
|
5
5
|
|
|
6
6
|
/**
|
|
7
7
|
* {@link DateAdapter} over `@internationalized/date`'s immutable `CalendarDate`.
|