@mintplayer/ng-bootstrap 21.30.0 → 21.31.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/fesm2022/mintplayer-ng-bootstrap-a11y.mjs +455 -0
- package/fesm2022/mintplayer-ng-bootstrap-a11y.mjs.map +1 -0
- package/fesm2022/mintplayer-ng-bootstrap-accordion.mjs +8 -5
- package/fesm2022/mintplayer-ng-bootstrap-accordion.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-breadcrumb.mjs +10 -4
- package/fesm2022/mintplayer-ng-bootstrap-breadcrumb.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-button-group.mjs +7 -4
- package/fesm2022/mintplayer-ng-bootstrap-button-group.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-calendar.mjs +131 -3
- package/fesm2022/mintplayer-ng-bootstrap-calendar.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-carousel.mjs +80 -48
- package/fesm2022/mintplayer-ng-bootstrap-carousel.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-code-snippet.mjs +4 -1
- package/fesm2022/mintplayer-ng-bootstrap-code-snippet.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-color-picker.mjs +218 -14
- package/fesm2022/mintplayer-ng-bootstrap-color-picker.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-datatable.mjs +4 -3
- package/fesm2022/mintplayer-ng-bootstrap-datatable.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-datepicker.mjs +2 -2
- package/fesm2022/mintplayer-ng-bootstrap-datepicker.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-dock.mjs +294 -3
- package/fesm2022/mintplayer-ng-bootstrap-dock.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-dropdown-menu.mjs +163 -18
- package/fesm2022/mintplayer-ng-bootstrap-dropdown-menu.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-dropdown.mjs +179 -7
- package/fesm2022/mintplayer-ng-bootstrap-dropdown.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-file-upload.mjs +14 -4
- package/fesm2022/mintplayer-ng-bootstrap-file-upload.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-has-overlay.mjs +14 -0
- package/fesm2022/mintplayer-ng-bootstrap-has-overlay.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-list-group.mjs +2 -1
- package/fesm2022/mintplayer-ng-bootstrap-list-group.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-marquee.mjs +7 -4
- package/fesm2022/mintplayer-ng-bootstrap-marquee.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-modal.mjs +70 -6
- package/fesm2022/mintplayer-ng-bootstrap-modal.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-multiselect.mjs +5 -4
- package/fesm2022/mintplayer-ng-bootstrap-multiselect.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-navbar-toggler.mjs +6 -6
- package/fesm2022/mintplayer-ng-bootstrap-navbar-toggler.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-navbar.mjs +45 -13
- package/fesm2022/mintplayer-ng-bootstrap-navbar.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-offcanvas.mjs +51 -5
- package/fesm2022/mintplayer-ng-bootstrap-offcanvas.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-pagination.mjs +5 -3
- package/fesm2022/mintplayer-ng-bootstrap-pagination.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-placeholder.mjs +18 -4
- package/fesm2022/mintplayer-ng-bootstrap-placeholder.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-playlist-toggler.mjs +6 -6
- package/fesm2022/mintplayer-ng-bootstrap-playlist-toggler.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-popover.mjs +61 -6
- package/fesm2022/mintplayer-ng-bootstrap-popover.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-priority-nav.mjs +19 -4
- package/fesm2022/mintplayer-ng-bootstrap-priority-nav.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-progress-bar.mjs +8 -5
- package/fesm2022/mintplayer-ng-bootstrap-progress-bar.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-range.mjs +4 -3
- package/fesm2022/mintplayer-ng-bootstrap-range.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-rating.mjs +34 -4
- package/fesm2022/mintplayer-ng-bootstrap-rating.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-reduced-motion.mjs +59 -0
- package/fesm2022/mintplayer-ng-bootstrap-reduced-motion.mjs.map +1 -0
- package/fesm2022/mintplayer-ng-bootstrap-resizable.mjs +91 -2
- package/fesm2022/mintplayer-ng-bootstrap-resizable.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-scheduler.mjs +16 -5
- package/fesm2022/mintplayer-ng-bootstrap-scheduler.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-scrollspy.mjs +2 -2
- package/fesm2022/mintplayer-ng-bootstrap-scrollspy.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-searchbox.mjs +28 -5
- package/fesm2022/mintplayer-ng-bootstrap-searchbox.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-select.mjs +4 -3
- package/fesm2022/mintplayer-ng-bootstrap-select.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-select2.mjs +18 -4
- package/fesm2022/mintplayer-ng-bootstrap-select2.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-signature-pad.mjs +4 -3
- package/fesm2022/mintplayer-ng-bootstrap-signature-pad.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-tab-control.mjs +2 -2
- package/fesm2022/mintplayer-ng-bootstrap-tab-control.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-table.mjs +10 -3
- package/fesm2022/mintplayer-ng-bootstrap-table.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-tile-manager.mjs +143 -29
- package/fesm2022/mintplayer-ng-bootstrap-tile-manager.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-timepicker.mjs +2 -2
- package/fesm2022/mintplayer-ng-bootstrap-timepicker.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-toast.mjs +7 -4
- package/fesm2022/mintplayer-ng-bootstrap-toast.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-toggle-button.mjs +42 -21
- package/fesm2022/mintplayer-ng-bootstrap-toggle-button.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-tooltip.mjs +33 -4
- package/fesm2022/mintplayer-ng-bootstrap-tooltip.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-treeview.mjs +17 -7
- package/fesm2022/mintplayer-ng-bootstrap-treeview.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-typeahead.mjs +50 -8
- package/fesm2022/mintplayer-ng-bootstrap-typeahead.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-virtual-datatable.mjs +34 -12
- package/fesm2022/mintplayer-ng-bootstrap-virtual-datatable.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-web-components-a11y.mjs +74 -0
- package/fesm2022/mintplayer-ng-bootstrap-web-components-a11y.mjs.map +1 -0
- package/fesm2022/mintplayer-ng-bootstrap-web-components-scheduler.mjs +1476 -71
- package/fesm2022/mintplayer-ng-bootstrap-web-components-scheduler.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-web-components-splitter.mjs +194 -2
- package/fesm2022/mintplayer-ng-bootstrap-web-components-splitter.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-web-components-tab-control.mjs +4 -0
- package/fesm2022/mintplayer-ng-bootstrap-web-components-tab-control.mjs.map +1 -1
- package/package.json +14 -2
- package/types/mintplayer-ng-bootstrap-a11y.d.ts +196 -0
- package/types/mintplayer-ng-bootstrap-accordion.d.ts +4 -2
- package/types/mintplayer-ng-bootstrap-breadcrumb.d.ts +2 -1
- package/types/mintplayer-ng-bootstrap-button-group.d.ts +2 -1
- package/types/mintplayer-ng-bootstrap-calendar.d.ts +32 -0
- package/types/mintplayer-ng-bootstrap-carousel.d.ts +56 -3
- package/types/mintplayer-ng-bootstrap-code-snippet.d.ts +1 -0
- package/types/mintplayer-ng-bootstrap-color-picker.d.ts +75 -4
- package/types/mintplayer-ng-bootstrap-datatable.d.ts +1 -1
- package/types/mintplayer-ng-bootstrap-dock.d.ts +51 -0
- package/types/mintplayer-ng-bootstrap-dropdown-menu.d.ts +54 -9
- package/types/mintplayer-ng-bootstrap-dropdown.d.ts +57 -2
- package/types/mintplayer-ng-bootstrap-file-upload.d.ts +4 -1
- package/types/mintplayer-ng-bootstrap-has-overlay.d.ts +14 -0
- package/types/mintplayer-ng-bootstrap-marquee.d.ts +2 -1
- package/types/mintplayer-ng-bootstrap-modal.d.ts +25 -1
- package/types/mintplayer-ng-bootstrap-multiselect.d.ts +2 -1
- package/types/mintplayer-ng-bootstrap-navbar-toggler.d.ts +4 -2
- package/types/mintplayer-ng-bootstrap-navbar.d.ts +25 -1
- package/types/mintplayer-ng-bootstrap-offcanvas.d.ts +23 -1
- package/types/mintplayer-ng-bootstrap-pagination.d.ts +3 -1
- package/types/mintplayer-ng-bootstrap-placeholder.d.ts +5 -1
- package/types/mintplayer-ng-bootstrap-playlist-toggler.d.ts +4 -2
- package/types/mintplayer-ng-bootstrap-popover.d.ts +21 -1
- package/types/mintplayer-ng-bootstrap-priority-nav.d.ts +4 -1
- package/types/mintplayer-ng-bootstrap-progress-bar.d.ts +4 -2
- package/types/mintplayer-ng-bootstrap-range.d.ts +2 -1
- package/types/mintplayer-ng-bootstrap-rating.d.ts +3 -0
- package/types/mintplayer-ng-bootstrap-reduced-motion.d.ts +36 -0
- package/types/mintplayer-ng-bootstrap-resizable.d.ts +4 -0
- package/types/mintplayer-ng-bootstrap-scheduler.d.ts +42 -9
- package/types/mintplayer-ng-bootstrap-scrollspy.d.ts +1 -1
- package/types/mintplayer-ng-bootstrap-searchbox.d.ts +8 -1
- package/types/mintplayer-ng-bootstrap-select.d.ts +2 -1
- package/types/mintplayer-ng-bootstrap-select2.d.ts +3 -0
- package/types/mintplayer-ng-bootstrap-signature-pad.d.ts +2 -1
- package/types/mintplayer-ng-bootstrap-table.d.ts +8 -1
- package/types/mintplayer-ng-bootstrap-tile-manager.d.ts +21 -2
- package/types/mintplayer-ng-bootstrap-toast.d.ts +6 -1
- package/types/mintplayer-ng-bootstrap-toggle-button.d.ts +11 -0
- package/types/mintplayer-ng-bootstrap-tooltip.d.ts +5 -0
- package/types/mintplayer-ng-bootstrap-treeview.d.ts +12 -1
- package/types/mintplayer-ng-bootstrap-typeahead.d.ts +11 -3
- package/types/mintplayer-ng-bootstrap-virtual-datatable.d.ts +14 -1
- package/types/mintplayer-ng-bootstrap-web-components-a11y.d.ts +34 -0
- package/types/mintplayer-ng-bootstrap-web-components-scheduler-core.d.ts +35 -11
- package/types/mintplayer-ng-bootstrap-web-components-scheduler.d.ts +246 -0
- package/types/mintplayer-ng-bootstrap-web-components-splitter.d.ts +95 -37
|
@@ -1,26 +1,34 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
2
|
import { ElementRef } from '@angular/core';
|
|
3
|
+
import { BsRovingFocusDirective } from '@mintplayer/ng-bootstrap/a11y';
|
|
3
4
|
|
|
4
5
|
declare class BsTypeaheadComponent {
|
|
6
|
+
private announcer;
|
|
5
7
|
isOpen: _angular_core.ModelSignal<boolean>;
|
|
6
|
-
readonly listboxId: string;
|
|
7
8
|
suggestions: _angular_core.InputSignal<any[]>;
|
|
8
9
|
isLoading: _angular_core.WritableSignal<boolean>;
|
|
9
10
|
showNoSuggestions: _angular_core.Signal<boolean>;
|
|
10
11
|
readonly textbox: _angular_core.Signal<ElementRef<HTMLInputElement>>;
|
|
12
|
+
readonly rovingFocus: _angular_core.Signal<BsRovingFocusDirective | undefined>;
|
|
11
13
|
searchterm: _angular_core.ModelSignal<string>;
|
|
12
14
|
isLoadingText: _angular_core.InputSignal<string>;
|
|
13
15
|
noSuggestionsText: _angular_core.InputSignal<string>;
|
|
16
|
+
resultsAnnouncementSingular: _angular_core.InputSignal<string>;
|
|
17
|
+
resultsAnnouncementPlural: _angular_core.InputSignal<(count: number) => string>;
|
|
14
18
|
provideSuggestions: _angular_core.OutputEmitterRef<string>;
|
|
15
19
|
suggestionSelected: _angular_core.OutputEmitterRef<any>;
|
|
16
20
|
submitted: _angular_core.OutputEmitterRef<string>;
|
|
21
|
+
private requestInFlight;
|
|
17
22
|
constructor();
|
|
23
|
+
private announceResults;
|
|
18
24
|
onProvideSuggestions(value: string): void;
|
|
19
25
|
suggestionClicked(suggestion: any): void;
|
|
20
|
-
|
|
26
|
+
onActivate(): void;
|
|
27
|
+
onCancel(): void;
|
|
28
|
+
onSubmit(event?: Event): void;
|
|
21
29
|
focus(): void;
|
|
22
30
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<BsTypeaheadComponent, never>;
|
|
23
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<BsTypeaheadComponent, "bs-typeahead", never, { "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; "suggestions": { "alias": "suggestions"; "required": false; "isSignal": true; }; "searchterm": { "alias": "searchterm"; "required": false; "isSignal": true; }; "isLoadingText": { "alias": "isLoadingText"; "required": false; "isSignal": true; }; "noSuggestionsText": { "alias": "noSuggestionsText"; "required": false; "isSignal": true; }; }, { "isOpen": "isOpenChange"; "searchterm": "searchtermChange"; "provideSuggestions": "provideSuggestions"; "suggestionSelected": "suggestionSelected"; "submitted": "submitted"; }, never, never, true, never>;
|
|
31
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<BsTypeaheadComponent, "bs-typeahead", never, { "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; "suggestions": { "alias": "suggestions"; "required": false; "isSignal": true; }; "searchterm": { "alias": "searchterm"; "required": false; "isSignal": true; }; "isLoadingText": { "alias": "isLoadingText"; "required": false; "isSignal": true; }; "noSuggestionsText": { "alias": "noSuggestionsText"; "required": false; "isSignal": true; }; "resultsAnnouncementSingular": { "alias": "resultsAnnouncementSingular"; "required": false; "isSignal": true; }; "resultsAnnouncementPlural": { "alias": "resultsAnnouncementPlural"; "required": false; "isSignal": true; }; }, { "isOpen": "isOpenChange"; "searchterm": "searchtermChange"; "provideSuggestions": "provideSuggestions"; "suggestionSelected": "suggestionSelected"; "submitted": "submitted"; }, never, never, true, never>;
|
|
24
32
|
}
|
|
25
33
|
|
|
26
34
|
export { BsTypeaheadComponent };
|
|
@@ -8,11 +8,17 @@ declare class VirtualDatatableDataSource<T> extends DataSource<T> {
|
|
|
8
8
|
private readonly fetchFn;
|
|
9
9
|
private readonly pageSize;
|
|
10
10
|
private readonly cachedPages;
|
|
11
|
-
private totalRecords
|
|
11
|
+
private readonly totalRecords$;
|
|
12
12
|
private dataStream;
|
|
13
13
|
private subscription?;
|
|
14
14
|
private resetSubject;
|
|
15
15
|
private resetVersion;
|
|
16
|
+
/**
|
|
17
|
+
* Emits the current total record count. Backed by the same value as
|
|
18
|
+
* `length`, but observable so consumers (e.g. virtual-datatable's ARIA
|
|
19
|
+
* row-count binding) can react to it without polling.
|
|
20
|
+
*/
|
|
21
|
+
readonly length$: Observable<number>;
|
|
16
22
|
constructor(fetchFn: (skip: number, take: number) => Promise<{
|
|
17
23
|
data: T[];
|
|
18
24
|
totalRecords: number;
|
|
@@ -44,6 +50,13 @@ declare class BsVirtualDatatableComponent<TData> extends DatatableSortBase imple
|
|
|
44
50
|
isResponsive: _angular_core.InputSignal<boolean>;
|
|
45
51
|
itemSize: _angular_core.InputSignal<number>;
|
|
46
52
|
readonly rowTemplate: _angular_core.WritableSignal<TemplateRef<BsVirtualRowTemplateContext<TData>> | undefined>;
|
|
53
|
+
/**
|
|
54
|
+
* Total logical row count for ARIA = data rows + 1 header row.
|
|
55
|
+
* Stays in sync with `dataSource.length$` so SR users hear "row 47 of
|
|
56
|
+
* 10000" even though the DOM only renders the visible viewport.
|
|
57
|
+
*/
|
|
58
|
+
readonly totalRowCount: _angular_core.WritableSignal<number>;
|
|
59
|
+
constructor();
|
|
47
60
|
ngAfterViewInit(): void;
|
|
48
61
|
ngOnDestroy(): void;
|
|
49
62
|
private setupScrollSync;
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { ReactiveController, ReactiveControllerHost, TemplateResult } from 'lit';
|
|
2
|
+
|
|
3
|
+
interface LiveAnnouncerOptions {
|
|
4
|
+
/** "polite" waits for an SR-idle moment; "assertive" interrupts. Default: "polite". */
|
|
5
|
+
politeness?: 'polite' | 'assertive';
|
|
6
|
+
/** ms after which the live region is blanked so the same message can re-announce later. Default: 1500. */
|
|
7
|
+
clearAfterMs?: number;
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* Lit reactive controller that owns a visually-hidden live region for a Lit
|
|
11
|
+
* web component. Call announce() to push a message; call template() once
|
|
12
|
+
* inside the host's render() to drop the live region into the shadow tree.
|
|
13
|
+
*
|
|
14
|
+
* Why a controller and not a free-floating div appended to the shadow root:
|
|
15
|
+
* Lit's render owns its render root; appending children outside the rendered
|
|
16
|
+
* subtree is fragile across re-renders. Going through the template keeps the
|
|
17
|
+
* region inside Lit's managed DOM and avoids "where did my element go" bugs.
|
|
18
|
+
*/
|
|
19
|
+
declare class LiveAnnouncerController implements ReactiveController {
|
|
20
|
+
private host;
|
|
21
|
+
private message;
|
|
22
|
+
private clearTimer;
|
|
23
|
+
private readonly politeness;
|
|
24
|
+
private readonly clearAfterMs;
|
|
25
|
+
constructor(host: ReactiveControllerHost, options?: LiveAnnouncerOptions);
|
|
26
|
+
hostDisconnected(): void;
|
|
27
|
+
announce(message: string): void;
|
|
28
|
+
/** Returns the live-region template fragment. Call once inside the host's render(). */
|
|
29
|
+
template(): TemplateResult;
|
|
30
|
+
private scheduleClear;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
export { LiveAnnouncerController };
|
|
34
|
+
export type { LiveAnnouncerOptions };
|
|
@@ -357,20 +357,43 @@ interface BaseEventDetail {
|
|
|
357
357
|
originalEvent?: Event;
|
|
358
358
|
}
|
|
359
359
|
/**
|
|
360
|
-
* Event click
|
|
360
|
+
* Event-selected event detail. Fires on mouse click and on keyboard Tab
|
|
361
|
+
* landing on an event (PRD scheduler-keyboard-grid-nav D3 — renamed from
|
|
362
|
+
* `EventClickDetail` because keyboard Tab now triggers the same event).
|
|
361
363
|
*/
|
|
362
|
-
interface
|
|
363
|
-
/** The
|
|
364
|
+
interface EventSelectedDetail extends BaseEventDetail {
|
|
365
|
+
/** The selected event */
|
|
364
366
|
event: SchedulerEvent;
|
|
365
367
|
}
|
|
366
368
|
/**
|
|
367
|
-
* Event create
|
|
369
|
+
* Event create *request* detail. Per PRD scheduler-controlled-selection,
|
|
370
|
+
* the scheduler does not construct or store the event itself — the consumer
|
|
371
|
+
* receives the range and decides whether to add an event for it.
|
|
368
372
|
*/
|
|
369
373
|
interface EventCreateDetail extends BaseEventDetail {
|
|
370
|
-
/** The
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
+
/** The selected time range. */
|
|
375
|
+
range: {
|
|
376
|
+
start: Date;
|
|
377
|
+
end: Date;
|
|
378
|
+
};
|
|
379
|
+
/** Resource the request targets (timeline view only). */
|
|
380
|
+
resourceId?: string;
|
|
381
|
+
/** View that produced the request. */
|
|
382
|
+
view: ViewType;
|
|
383
|
+
}
|
|
384
|
+
/**
|
|
385
|
+
* Selection-change detail. Fires on every transition — including the
|
|
386
|
+
* transition to an empty selection. `selectedEvent` and `range` are
|
|
387
|
+
* independent dimensions of the selection state.
|
|
388
|
+
*/
|
|
389
|
+
interface SelectionChangeDetail {
|
|
390
|
+
selectedEvent: SchedulerEvent | null;
|
|
391
|
+
range: {
|
|
392
|
+
start: Date;
|
|
393
|
+
end: Date;
|
|
394
|
+
} | null;
|
|
395
|
+
view: ViewType;
|
|
396
|
+
resourceId?: string;
|
|
374
397
|
}
|
|
375
398
|
/**
|
|
376
399
|
* Event update event detail
|
|
@@ -421,14 +444,15 @@ interface ViewChangeDetail {
|
|
|
421
444
|
* Custom event map for the scheduler web component
|
|
422
445
|
*/
|
|
423
446
|
interface SchedulerEventMap {
|
|
424
|
-
'event-
|
|
425
|
-
'event-dblclick': CustomEvent<
|
|
447
|
+
'event-selected': CustomEvent<EventSelectedDetail>;
|
|
448
|
+
'event-dblclick': CustomEvent<EventSelectedDetail>;
|
|
426
449
|
'event-create': CustomEvent<EventCreateDetail>;
|
|
427
450
|
'event-update': CustomEvent<EventUpdateDetail>;
|
|
428
451
|
'event-delete': CustomEvent<EventDeleteDetail>;
|
|
429
452
|
'date-click': CustomEvent<DateClickDetail>;
|
|
430
453
|
'date-select': CustomEvent<DateSelectDetail>;
|
|
431
454
|
'view-change': CustomEvent<ViewChangeDetail>;
|
|
455
|
+
'selection-change': CustomEvent<SelectionChangeDetail>;
|
|
432
456
|
}
|
|
433
457
|
|
|
434
458
|
/**
|
|
@@ -887,4 +911,4 @@ declare function removeClasses(element: Element, ...classes: string[]): void;
|
|
|
887
911
|
declare function toggleClass(element: Element, className: string, condition: boolean): void;
|
|
888
912
|
|
|
889
913
|
export { DEFAULT_COLORS, DEFAULT_OPTIONS, DateService, PositionService, ResourceService, TimelineService, addAlpha, addClasses, darkenColor, dateService, findClosestWithData, generateEventId, generateGroupId, generateId, generateResourceId, getCSSVariable, getColorByIndex, getContrastColor, getDataAttributes, getElementByData, getRelativePosition, getScrollPosition, isInViewport, isResource, isResourceGroup, lightenColor, positionService, removeClasses, resourceService, scrollToTime, setCSSVariable, timelineService, toggleClass };
|
|
890
|
-
export type { BaseEventDetail, BusinessHours, DateClickDetail, DateSelectDetail, DayOfWeek, DisplayMode, DragOperationType, DragResult, DragState,
|
|
914
|
+
export type { BaseEventDetail, BusinessHours, DateClickDetail, DateSelectDetail, DayOfWeek, DisplayMode, DragOperationType, DragResult, DragState, EventCreateDetail, EventDeleteDetail, EventLayoutInfo, EventPosition, EventSelectedDetail, EventUpdateDetail, FlattenedResource, HeaderToolbar, PreviewEvent, Resource, ResourceGroup, SchedulerEvent, SchedulerEventMap, SchedulerEventPart, SchedulerEventWithParts, SchedulerGrid, SchedulerOptions, SelectionChangeDetail, TimeFormat, TimeSlot, TimeSlotRow, TimelineTrack, ViewChangeDetail, ViewType };
|
|
@@ -25,10 +25,13 @@ declare class MpScheduler extends LitElement {
|
|
|
25
25
|
private previousView;
|
|
26
26
|
private previousDate;
|
|
27
27
|
private previousSelectedEventId;
|
|
28
|
+
private previousRangeKey;
|
|
28
29
|
private pendingDragUpdate;
|
|
29
30
|
private latestDragState;
|
|
30
31
|
private boundHandleKeyDown;
|
|
32
|
+
private boundHandleFocusIn;
|
|
31
33
|
private nowIndicatorTimer;
|
|
34
|
+
private readonly liveAnnouncer;
|
|
32
35
|
constructor();
|
|
33
36
|
connectedCallback(): void;
|
|
34
37
|
disconnectedCallback(): void;
|
|
@@ -54,6 +57,13 @@ declare class MpScheduler extends LitElement {
|
|
|
54
57
|
today(): void;
|
|
55
58
|
gotoDate(date: Date): void;
|
|
56
59
|
changeView(view: ViewType): void;
|
|
60
|
+
/**
|
|
61
|
+
* Clear the time-range selection and the focused-cell selection. Public
|
|
62
|
+
* because — per PRD scheduler-controlled-selection — the WC no longer
|
|
63
|
+
* auto-clears on commit; consumers call this from their `event-create`
|
|
64
|
+
* handler if they want the post-create selection cleared.
|
|
65
|
+
*/
|
|
66
|
+
clearSelection(): void;
|
|
57
67
|
addEvent(event: SchedulerEvent): void;
|
|
58
68
|
updateEvent(event: SchedulerEvent): void;
|
|
59
69
|
removeEvent(eventId: string): void;
|
|
@@ -74,7 +84,156 @@ declare class MpScheduler extends LitElement {
|
|
|
74
84
|
private handleDragComplete;
|
|
75
85
|
private handleClick;
|
|
76
86
|
private handleDoubleClick;
|
|
87
|
+
/**
|
|
88
|
+
* When focus lands on an event block (Tab, programmatic, or click), select
|
|
89
|
+
* the event and emit `event-selected` for mouse-parity (PRD §6.5 D3). The
|
|
90
|
+
* subsequent setSelectedEvent call routes through detectAndEmitChanges
|
|
91
|
+
* which fires `selection-change`.
|
|
92
|
+
*
|
|
93
|
+
* `focusin` bubbles across shadow boundaries but `e.target` is retargeted
|
|
94
|
+
* to the host. Use composedPath()[0] for the actual focused element.
|
|
95
|
+
*/
|
|
96
|
+
private handleFocusIn;
|
|
77
97
|
private handleKeyDown;
|
|
98
|
+
private getFocusedKind;
|
|
99
|
+
private handleAltShortcut;
|
|
100
|
+
private handleEventKeyDown;
|
|
101
|
+
/**
|
|
102
|
+
* Inter-event arrow nav (PRD scheduler-controlled-selection §5.3): walk
|
|
103
|
+
* the events in document order (start time, with id as tiebreaker) by ±1.
|
|
104
|
+
* No wrap at the ends — matches the APG list/feed pattern.
|
|
105
|
+
*/
|
|
106
|
+
private focusAdjacentEvent;
|
|
107
|
+
private handleCellKeyDown;
|
|
108
|
+
/**
|
|
109
|
+
* If a cell is the active element but state.focusedCell is empty (e.g.
|
|
110
|
+
* Tab landed on the fallback first cell), seed the state from the
|
|
111
|
+
* active element's data attributes.
|
|
112
|
+
*/
|
|
113
|
+
private initFocusedCellFromActive;
|
|
114
|
+
/**
|
|
115
|
+
* Month-view keyboard handler (PRD scheduler-controlled-selection §5.1).
|
|
116
|
+
* Arrows walk days; ArrowUp/Down ± one week; cross-month moves auto-
|
|
117
|
+
* advance the displayed date so the new month renders. Enter emits
|
|
118
|
+
* `event-create` for the focused day's full range.
|
|
119
|
+
*/
|
|
120
|
+
private handleMonthCellKeyDown;
|
|
121
|
+
/**
|
|
122
|
+
* Year-view keyboard handler (PRD scheduler-controlled-selection §5.2).
|
|
123
|
+
* The focus unit is a month — ArrowLeft/Right ± 1, ArrowUp/Down ± 3 to
|
|
124
|
+
* mirror the visual 4×3 layout. Cross-year auto-advances. Enter emits
|
|
125
|
+
* `event-create` for the focused month's full range.
|
|
126
|
+
*/
|
|
127
|
+
private handleYearCellKeyDown;
|
|
128
|
+
/**
|
|
129
|
+
* Sync `focusedDate` from the currently-active month/year cell. Runs at
|
|
130
|
+
* the top of every Phase B keydown so click-driven and Tab-driven focus
|
|
131
|
+
* moves are reflected in state before arrow keys read it.
|
|
132
|
+
*/
|
|
133
|
+
private syncFocusedDateFromActive;
|
|
134
|
+
private moveFocusedDateByDays;
|
|
135
|
+
private moveFocusedDateByMonths;
|
|
136
|
+
/**
|
|
137
|
+
* Apply a focused-date update. If the new date crosses the displayed
|
|
138
|
+
* period (different month on month view; different year on year view),
|
|
139
|
+
* also bump `state.date` so the view re-renders to the new period —
|
|
140
|
+
* APG date-picker auto-advance behaviour. Then schedule a focus
|
|
141
|
+
* restoration on the matching cell after the next render.
|
|
142
|
+
*/
|
|
143
|
+
private commitFocusedDate;
|
|
144
|
+
/**
|
|
145
|
+
* Find the month/year date-cell DOM element by id and focus it. Keys are
|
|
146
|
+
* built from *local* date components to match `MonthView.dayKey()` /
|
|
147
|
+
* `YearView.monthKey()` — see those helpers for why ISO is unsafe across
|
|
148
|
+
* non-UTC timezones.
|
|
149
|
+
*/
|
|
150
|
+
private scrollAndFocusDateCell;
|
|
151
|
+
/**
|
|
152
|
+
* Emit `event-create` covering the focused day (month view) or focused
|
|
153
|
+
* month (year view). No internal mutation per PRD
|
|
154
|
+
* scheduler-controlled-selection — consumer constructs the actual event.
|
|
155
|
+
*/
|
|
156
|
+
private commitFocusedDateAsCreate;
|
|
157
|
+
private moveCellByTime;
|
|
158
|
+
/** Week view ArrowLeft/Right: ±1 day, same time-of-day. No-op on day view. */
|
|
159
|
+
private moveCellByDay;
|
|
160
|
+
/** Timeline ArrowUp/Down: ±1 resource, same time-of-day. PRD D1: cross-resource
|
|
161
|
+
* Shift+Arrow is intentionally ignored (resource is categorical). */
|
|
162
|
+
private moveCellByResource;
|
|
163
|
+
private moveCellToColumnExtreme;
|
|
164
|
+
private moveCellToViewExtreme;
|
|
165
|
+
/**
|
|
166
|
+
* PageUp/PageDown — advance one period (week or day) and re-focus the same
|
|
167
|
+
* day-of-week + time-of-day in the new period. Selection is cleared since
|
|
168
|
+
* crossing a period boundary breaks the linear-range invariant.
|
|
169
|
+
*/
|
|
170
|
+
private moveCellByPeriod;
|
|
171
|
+
/**
|
|
172
|
+
* Apply the focus move to state and DOM. `extend` grows the selection
|
|
173
|
+
* range; otherwise selection is cleared. Live-region announces the new
|
|
174
|
+
* focused cell or selection range.
|
|
175
|
+
*/
|
|
176
|
+
private commitFocusMove;
|
|
177
|
+
private cellIsWithinView;
|
|
178
|
+
private parseTimeOnDay;
|
|
179
|
+
private adjacentResource;
|
|
180
|
+
private getResourceTitle;
|
|
181
|
+
/**
|
|
182
|
+
* Find the cell DOM element for a (slot, resource) pair and call .focus()
|
|
183
|
+
* on it. scrollIntoView with block:nearest provides parity with mouse
|
|
184
|
+
* drag-near-edge auto-pan (PRD D6).
|
|
185
|
+
*/
|
|
186
|
+
private scrollAndFocusCell;
|
|
187
|
+
/** Re-focus whatever cell the keyboard model currently considers focused. */
|
|
188
|
+
private focusFocusedCell;
|
|
189
|
+
private cssEscape;
|
|
190
|
+
/**
|
|
191
|
+
* Emit `event-create` covering the active selection range, or a single
|
|
192
|
+
* cell when no selection is active. Per PRD scheduler-controlled-selection,
|
|
193
|
+
* this is a *request* — no internal state mutation, no auto-clear, no
|
|
194
|
+
* auto-focus. The consumer constructs the SchedulerEvent and decides
|
|
195
|
+
* whether/when to clear the selection.
|
|
196
|
+
*/
|
|
197
|
+
private createEventFromCellOrSelection;
|
|
198
|
+
/**
|
|
199
|
+
* Active keyboard-driven event move. Captures the original time range and
|
|
200
|
+
* (timeline) resource so Escape can revert; the working copy is mutated in
|
|
201
|
+
* place by arrow keys and committed or rolled back on Enter / Escape.
|
|
202
|
+
*/
|
|
203
|
+
private keyboardMove;
|
|
204
|
+
/**
|
|
205
|
+
* Enter keyboard event-move mode. Captures the working copy and a snapshot
|
|
206
|
+
* of the resource (timeline). Visual feedback is provided by routing the
|
|
207
|
+
* working start/end through the existing previewEvent state — the same
|
|
208
|
+
* channel used for mouse drag — so the event renders at the projected
|
|
209
|
+
* destination as the user nudges.
|
|
210
|
+
*/
|
|
211
|
+
private enterEventMoveMode;
|
|
212
|
+
/**
|
|
213
|
+
* Move-mode keymap. Layered on the existing M-mode foundation:
|
|
214
|
+
* - bare Arrow keys nudge the event
|
|
215
|
+
* - Shift+Arrow resizes the end edge
|
|
216
|
+
* - Alt+Shift+Arrow resizes the start edge
|
|
217
|
+
* - on week view, Shift+ArrowLeft/Right pushes the end edge across the
|
|
218
|
+
* day boundary (PRD D5) — symmetric with Shift+ArrowDown for time.
|
|
219
|
+
* - Enter commits, Escape reverts.
|
|
220
|
+
*/
|
|
221
|
+
private handleKeyboardMove;
|
|
222
|
+
private minutesPerSlot;
|
|
223
|
+
/** Shift the working event by `deltaMs` along the time axis (preserves duration). */
|
|
224
|
+
private nudgeKeyboardMove;
|
|
225
|
+
/** Walk to the next/previous resource (timeline only). Updates the preview's resourceId. */
|
|
226
|
+
private nudgeKeyboardMoveResource;
|
|
227
|
+
/**
|
|
228
|
+
* Resize one edge of the working event. Clamps to a minimum duration of
|
|
229
|
+
* one slot to keep the event valid, and refuses to invert (start ≤ end).
|
|
230
|
+
*/
|
|
231
|
+
private resizeKeyboardMoveEdge;
|
|
232
|
+
/** Mirror keyboardMove.working* into state.previewEvent so views render the destination,
|
|
233
|
+
* then scroll the destination into view so the sighted-keyboard user can see it (PRD D6). */
|
|
234
|
+
private applyKeyboardMovePreview;
|
|
235
|
+
private commitEventMoveMode;
|
|
236
|
+
private cancelEventMoveMode;
|
|
78
237
|
private startNowIndicatorTimer;
|
|
79
238
|
private stopNowIndicatorTimer;
|
|
80
239
|
private getSlotAtPosition;
|
|
@@ -111,6 +270,26 @@ interface SchedulerState {
|
|
|
111
270
|
isMouseDown: boolean;
|
|
112
271
|
/** Loading state */
|
|
113
272
|
isLoading: boolean;
|
|
273
|
+
/** Currently keyboard-focused cell. Drives roving tabindex inside the grid. */
|
|
274
|
+
focusedCell: TimeSlot | null;
|
|
275
|
+
/** Resource pinned to the focused cell (timeline view only). */
|
|
276
|
+
focusedResourceId: string | null;
|
|
277
|
+
/** The cell where the user first held Shift to begin a range selection. */
|
|
278
|
+
selectionAnchor: TimeSlot | null;
|
|
279
|
+
/** Current end-cell of the keyboard-driven selection. Range spans from the
|
|
280
|
+
* earliest cell.start to the latest cell.end across both anchor and extent. */
|
|
281
|
+
selectionExtent: TimeSlot | null;
|
|
282
|
+
/** Resource pinned at the anchor (timeline only); cross-resource selection is intentionally ignored (PRD D1). */
|
|
283
|
+
selectionResourceId: string | null;
|
|
284
|
+
/** ID of the event currently in keyboard move-mode (PRD §6.6). Drives `aria-pressed` on the event button. */
|
|
285
|
+
keyboardMoveEventId: string | null;
|
|
286
|
+
/**
|
|
287
|
+
* Keyboard-focused day on month-view, or first-of-month on year-view.
|
|
288
|
+
* Distinct from `focusedCell` (which carries a slot range), because month-
|
|
289
|
+
* and year-view cells aren't time slots — month cells are whole days, year
|
|
290
|
+
* cells are whole months.
|
|
291
|
+
*/
|
|
292
|
+
focusedDate: Date | null;
|
|
114
293
|
}
|
|
115
294
|
/**
|
|
116
295
|
* Create initial scheduler state
|
|
@@ -227,6 +406,27 @@ declare class SchedulerStateManager {
|
|
|
227
406
|
* Navigate to a specific date
|
|
228
407
|
*/
|
|
229
408
|
gotoDate(date: Date): void;
|
|
409
|
+
/**
|
|
410
|
+
* Move the keyboard focus to a cell. Setting `clearSelection` (default)
|
|
411
|
+
* also drops any active range selection — used for plain Arrow nav, where
|
|
412
|
+
* Shift would have stayed held to keep the range alive.
|
|
413
|
+
*/
|
|
414
|
+
setFocusedCell(cell: TimeSlot | null, resourceId?: string | null, clearSelection?: boolean): void;
|
|
415
|
+
/**
|
|
416
|
+
* Begin or extend a range selection. Anchor is set on first call (when
|
|
417
|
+
* Shift is first held), pinned at the *previously-focused* cell. Extent
|
|
418
|
+
* moves with each subsequent Shift+Arrow.
|
|
419
|
+
*/
|
|
420
|
+
extendSelection(extent: TimeSlot, resourceId?: string | null): void;
|
|
421
|
+
/**
|
|
422
|
+
* Clear any active range selection without touching the focused cell.
|
|
423
|
+
*/
|
|
424
|
+
clearSelection(): void;
|
|
425
|
+
/**
|
|
426
|
+
* Move the keyboard focus to a calendar date — used by month and year views
|
|
427
|
+
* (PRD scheduler-controlled-selection §5). Pass `null` to clear.
|
|
428
|
+
*/
|
|
429
|
+
setFocusedDate(date: Date | null): void;
|
|
230
430
|
}
|
|
231
431
|
|
|
232
432
|
/**
|
|
@@ -275,8 +475,22 @@ declare abstract class BaseView {
|
|
|
275
475
|
* Year view renderer
|
|
276
476
|
*/
|
|
277
477
|
declare class YearView extends BaseView {
|
|
478
|
+
/** Cache of `.scheduler-year-month` cards keyed by `YYYY-MM`. */
|
|
479
|
+
private monthCards;
|
|
278
480
|
render(): void;
|
|
481
|
+
/**
|
|
482
|
+
* Build a `YYYY-MM` key from a Date, which is the unit of focus on year
|
|
483
|
+
* view (PRD scheduler-controlled-selection §5.2 — year cells are months,
|
|
484
|
+
* not days).
|
|
485
|
+
*/
|
|
486
|
+
private static monthKey;
|
|
279
487
|
private createMonthCard;
|
|
488
|
+
/**
|
|
489
|
+
* Apply roving tabindex based on `state.focusedDate`'s month. Year-view's
|
|
490
|
+
* focus unit is a month, so we strip down `focusedDate` to its `YYYY-MM`
|
|
491
|
+
* key. Falls back to the displayed year's first month if no focus yet.
|
|
492
|
+
*/
|
|
493
|
+
private updateMonthCardFocus;
|
|
280
494
|
update(state: SchedulerState): void;
|
|
281
495
|
destroy(): void;
|
|
282
496
|
}
|
|
@@ -287,7 +501,20 @@ declare class YearView extends BaseView {
|
|
|
287
501
|
declare class MonthView extends BaseView {
|
|
288
502
|
private dayCells;
|
|
289
503
|
render(): void;
|
|
504
|
+
/**
|
|
505
|
+
* Build a `YYYY-MM-DD` key from a Date using *local* components. Using
|
|
506
|
+
* `toISOString()` here would shift the key in any non-UTC timezone (a
|
|
507
|
+
* local midnight on May 12 in CEST is May 11 22:00 UTC), and the resulting
|
|
508
|
+
* cell IDs would not match the visible day numbers.
|
|
509
|
+
*/
|
|
510
|
+
static dayKey(d: Date): string;
|
|
290
511
|
private createDayCell;
|
|
512
|
+
/**
|
|
513
|
+
* Apply roving tabindex based on `state.focusedDate`. The grid must always
|
|
514
|
+
* have exactly one tab-reachable cell, so when no date is focused yet we
|
|
515
|
+
* fall back to today (if visible) or the first day of the displayed month.
|
|
516
|
+
*/
|
|
517
|
+
private updateDayCellFocus;
|
|
291
518
|
private renderEvents;
|
|
292
519
|
update(state: SchedulerState): void;
|
|
293
520
|
private optionsRequireRerender;
|
|
@@ -303,6 +530,14 @@ declare class WeekView extends BaseView {
|
|
|
303
530
|
private slotElements;
|
|
304
531
|
render(): void;
|
|
305
532
|
update(state: SchedulerState): void;
|
|
533
|
+
/**
|
|
534
|
+
* Apply roving tabindex and aria-selected to each cached slot element. Also
|
|
535
|
+
* toggles the `.selected` class so the existing `.scheduler-time-slot.selected`
|
|
536
|
+
* styling lights up cells in the keyboard-driven range. A linear time-range
|
|
537
|
+
* selection (PRD D1) lights up every slot whose [start, end) intersects
|
|
538
|
+
* the range, including across day boundaries on week view.
|
|
539
|
+
*/
|
|
540
|
+
private updateCellFocusAndSelection;
|
|
306
541
|
private optionsRequireRerender;
|
|
307
542
|
private renderEvents;
|
|
308
543
|
private createEventElement;
|
|
@@ -321,6 +556,11 @@ declare class DayView extends BaseView {
|
|
|
321
556
|
private slotElements;
|
|
322
557
|
private dayColumn;
|
|
323
558
|
render(): void;
|
|
559
|
+
/**
|
|
560
|
+
* Apply roving tabindex + aria-selected + `.selected` class to each cached
|
|
561
|
+
* slot element based on focusedCell and selection range.
|
|
562
|
+
*/
|
|
563
|
+
private updateCellFocusAndSelection;
|
|
324
564
|
private renderEvents;
|
|
325
565
|
private createEventElement;
|
|
326
566
|
private renderNowIndicator;
|
|
@@ -339,6 +579,12 @@ declare class TimelineView extends BaseView {
|
|
|
339
579
|
private rowElements;
|
|
340
580
|
private slotWidth;
|
|
341
581
|
render(): void;
|
|
582
|
+
/**
|
|
583
|
+
* Apply roving tabindex + aria-selected + `.selected` class to each
|
|
584
|
+
* timeline-slot element. Selection is constrained to the resource pinned
|
|
585
|
+
* at the anchor (PRD D1: cross-resource selection ignored).
|
|
586
|
+
*/
|
|
587
|
+
private updateCellFocusAndSelection;
|
|
342
588
|
private createResourceRow;
|
|
343
589
|
private renderEvents;
|
|
344
590
|
private createEventElement;
|
|
@@ -28,10 +28,76 @@ interface PanelInfo {
|
|
|
28
28
|
initialSize?: number;
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
+
interface NormalizedPointerEvent {
|
|
32
|
+
clientX: number;
|
|
33
|
+
clientY: number;
|
|
34
|
+
point: Point;
|
|
35
|
+
originalEvent: MouseEvent | TouchEvent;
|
|
36
|
+
isTouch: boolean;
|
|
37
|
+
}
|
|
38
|
+
declare function normalizePointerEvent(event: MouseEvent | TouchEvent): NormalizedPointerEvent;
|
|
39
|
+
|
|
40
|
+
interface InputHandlerCallbacks {
|
|
41
|
+
onResizeStart: (event: NormalizedPointerEvent, dividerIndex: number, dividerElement: HTMLElement) => void;
|
|
42
|
+
onResizeMove: (event: NormalizedPointerEvent) => void;
|
|
43
|
+
onResizeEnd: (event: NormalizedPointerEvent) => void;
|
|
44
|
+
/**
|
|
45
|
+
* Keyboard-driven resize. Fires once per arrow / Home / End keystroke on a
|
|
46
|
+
* focused divider. Granularity is encoded as the boolean `fine` (Shift held)
|
|
47
|
+
* — translation to percent/px lives in the splitter, not the input layer.
|
|
48
|
+
*/
|
|
49
|
+
onResizeKey?: (key: ResizeKey, fine: boolean, dividerIndex: number, dividerElement: HTMLElement) => void;
|
|
50
|
+
}
|
|
51
|
+
type ResizeKey = 'ArrowLeft' | 'ArrowRight' | 'ArrowUp' | 'ArrowDown' | 'Home' | 'End';
|
|
52
|
+
declare class InputHandler {
|
|
53
|
+
private isActive;
|
|
54
|
+
private currentDividerIndex;
|
|
55
|
+
private currentDividerElement;
|
|
56
|
+
private callbacks;
|
|
57
|
+
private boundMouseMove;
|
|
58
|
+
private boundMouseUp;
|
|
59
|
+
private boundTouchMove;
|
|
60
|
+
private boundTouchEnd;
|
|
61
|
+
constructor(callbacks: InputHandlerCallbacks);
|
|
62
|
+
attachDividerListeners(divider: HTMLElement, index: number): void;
|
|
63
|
+
private handleKeyDown;
|
|
64
|
+
private handleMouseDown;
|
|
65
|
+
private handleMouseMove;
|
|
66
|
+
private handleMouseUp;
|
|
67
|
+
private handleTouchStart;
|
|
68
|
+
private handleTouchMove;
|
|
69
|
+
private handleTouchEnd;
|
|
70
|
+
private startResize;
|
|
71
|
+
private endResize;
|
|
72
|
+
dispose(): void;
|
|
73
|
+
getIsActive(): boolean;
|
|
74
|
+
}
|
|
75
|
+
|
|
31
76
|
interface SplitterResizeEventDetail {
|
|
32
77
|
sizes: number[];
|
|
33
78
|
orientation: Direction;
|
|
34
79
|
}
|
|
80
|
+
/**
|
|
81
|
+
* `<mp-splitter>` — resizable panel splitter.
|
|
82
|
+
*
|
|
83
|
+
* Light-DOM children are projected into named slots (`panel-${i}`) inside a
|
|
84
|
+
* shadow-DOM flex container with auto-inserted dividers between them. Drag a
|
|
85
|
+
* divider to redistribute space; sizes survive container resize via a
|
|
86
|
+
* proportional rescale.
|
|
87
|
+
*
|
|
88
|
+
* Pointer + keyboard interactions both flow through the same path:
|
|
89
|
+
* - Pointer drag → `InputHandler` → `handleResizeStart/Move/End`.
|
|
90
|
+
* - Arrow keys ±10% (Shift = ±1%), Home/End to limits → `handleResizeKey`.
|
|
91
|
+
*
|
|
92
|
+
* ARIA: each divider is a `role="separator"` with `aria-orientation`,
|
|
93
|
+
* `aria-controls` referencing the deterministic IDs of the two adjacent
|
|
94
|
+
* panel wrappers, and percent-based `aria-valuenow / valuemin / valuemax`
|
|
95
|
+
* that update on every drag-preview frame, container resize, and keystroke.
|
|
96
|
+
*
|
|
97
|
+
* Public API: `[orientation]`, `[min-panel-size]`, `[touch-mode]`;
|
|
98
|
+
* `getPanelSizes()` / `setPanelSizes()`; events `resize-start`, `resizing`,
|
|
99
|
+
* `resize-end` carrying `{ sizes, orientation }`.
|
|
100
|
+
*/
|
|
35
101
|
declare class MpSplitter extends LitElement {
|
|
36
102
|
static styles: lit.CSSResult[];
|
|
37
103
|
static get observedAttributes(): string[];
|
|
@@ -45,6 +111,7 @@ declare class MpSplitter extends LitElement {
|
|
|
45
111
|
private mutationObserver;
|
|
46
112
|
private containerResizeObserver;
|
|
47
113
|
private unsubscribeState;
|
|
114
|
+
private readonly instanceId;
|
|
48
115
|
constructor();
|
|
49
116
|
render(): TemplateResult;
|
|
50
117
|
protected firstUpdated(): void;
|
|
@@ -57,9 +124,30 @@ declare class MpSplitter extends LitElement {
|
|
|
57
124
|
get touchMode(): boolean;
|
|
58
125
|
set touchMode(value: boolean);
|
|
59
126
|
getPanelSizes(): number[];
|
|
127
|
+
/**
|
|
128
|
+
* Drive a keyboard-style resize on a divider programmatically. Used by the
|
|
129
|
+
* dock manager's intersection-handle keymap so a single keystroke can
|
|
130
|
+
* resize both the horizontal and vertical dividers a 2D handle sits on,
|
|
131
|
+
* without re-implementing the percent-step + clamp math here.
|
|
132
|
+
*
|
|
133
|
+
* `key` is one of the keys handled by the divider keymap
|
|
134
|
+
* (Arrow{Left,Right,Up,Down}, Home, End); `fine` halves the step (matches
|
|
135
|
+
* Shift modifier on the keyboard path).
|
|
136
|
+
*/
|
|
137
|
+
resizeDividerBy(dividerIndex: number, key: ResizeKey, fine?: boolean): void;
|
|
60
138
|
setPanelSizes(sizes: number[]): void;
|
|
61
139
|
private setupMutationObserver;
|
|
62
140
|
private subscribeToState;
|
|
141
|
+
/**
|
|
142
|
+
* Mirror current panel sizes to each divider's aria-valuenow / valuemin /
|
|
143
|
+
* valuemax as percent of container. Per §10 Q3 of the WC ARIA PRD: percent
|
|
144
|
+
* is more intuitive for SR users than pixels.
|
|
145
|
+
*
|
|
146
|
+
* Per-divider math: divider i sits between panels[i] and panels[i+1] and
|
|
147
|
+
* "owns" the size of panels[i]. valuemin = minPanelSize as % of container;
|
|
148
|
+
* valuemax = (panels[i].size + panels[i+1].size - minPanelSize) as %.
|
|
149
|
+
*/
|
|
150
|
+
private updateDividerAriaValues;
|
|
63
151
|
private updatePanelsFromSlot;
|
|
64
152
|
/**
|
|
65
153
|
* Read each panel-wrapper's measured pixel size and persist it as the
|
|
@@ -82,6 +170,13 @@ declare class MpSplitter extends LitElement {
|
|
|
82
170
|
private handleResizeStart;
|
|
83
171
|
private handleResizeMove;
|
|
84
172
|
private handleResizeEnd;
|
|
173
|
+
/**
|
|
174
|
+
* Keyboard-driven resize on a focused divider. ArrowKeys ±10% (Shift = ±1%)
|
|
175
|
+
* along the splitter's axis; Home/End shrink/grow panelBefore to its limit.
|
|
176
|
+
* Fires resize-start → resize-end with the new sizes so consumers don't
|
|
177
|
+
* need to special-case keyboard vs. drag.
|
|
178
|
+
*/
|
|
179
|
+
private handleResizeKey;
|
|
85
180
|
private applyPanelSizes;
|
|
86
181
|
}
|
|
87
182
|
|
|
@@ -122,43 +217,6 @@ declare class ResizeManager {
|
|
|
122
217
|
getMinPanelSize(): number;
|
|
123
218
|
}
|
|
124
219
|
|
|
125
|
-
interface NormalizedPointerEvent {
|
|
126
|
-
clientX: number;
|
|
127
|
-
clientY: number;
|
|
128
|
-
point: Point;
|
|
129
|
-
originalEvent: MouseEvent | TouchEvent;
|
|
130
|
-
isTouch: boolean;
|
|
131
|
-
}
|
|
132
|
-
declare function normalizePointerEvent(event: MouseEvent | TouchEvent): NormalizedPointerEvent;
|
|
133
|
-
|
|
134
|
-
interface InputHandlerCallbacks {
|
|
135
|
-
onResizeStart: (event: NormalizedPointerEvent, dividerIndex: number, dividerElement: HTMLElement) => void;
|
|
136
|
-
onResizeMove: (event: NormalizedPointerEvent) => void;
|
|
137
|
-
onResizeEnd: (event: NormalizedPointerEvent) => void;
|
|
138
|
-
}
|
|
139
|
-
declare class InputHandler {
|
|
140
|
-
private isActive;
|
|
141
|
-
private currentDividerIndex;
|
|
142
|
-
private currentDividerElement;
|
|
143
|
-
private callbacks;
|
|
144
|
-
private boundMouseMove;
|
|
145
|
-
private boundMouseUp;
|
|
146
|
-
private boundTouchMove;
|
|
147
|
-
private boundTouchEnd;
|
|
148
|
-
constructor(callbacks: InputHandlerCallbacks);
|
|
149
|
-
attachDividerListeners(divider: HTMLElement, index: number): void;
|
|
150
|
-
private handleMouseDown;
|
|
151
|
-
private handleMouseMove;
|
|
152
|
-
private handleMouseUp;
|
|
153
|
-
private handleTouchStart;
|
|
154
|
-
private handleTouchMove;
|
|
155
|
-
private handleTouchEnd;
|
|
156
|
-
private startResize;
|
|
157
|
-
private endResize;
|
|
158
|
-
dispose(): void;
|
|
159
|
-
getIsActive(): boolean;
|
|
160
|
-
}
|
|
161
|
-
|
|
162
220
|
declare const splitterStyles: lit.CSSResult;
|
|
163
221
|
|
|
164
222
|
export { InputHandler, MpSplitter, ResizeManager, ResizeState, SplitterStateManager, normalizePointerEvent, splitterStyles };
|