@genesislcap/foundation-ui 14.341.0 → 14.343.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/dist/custom-elements.json +1730 -190
- package/dist/dts/base-components.d.ts +11 -0
- package/dist/dts/base-components.d.ts.map +1 -1
- package/dist/dts/dialog/dialog.d.ts +28 -3
- package/dist/dts/dialog/dialog.d.ts.map +1 -1
- package/dist/dts/dialog/dialog.styles.d.ts.map +1 -1
- package/dist/dts/dialog/dialog.template.d.ts.map +1 -1
- package/dist/dts/index.d.ts +1 -0
- package/dist/dts/index.d.ts.map +1 -1
- package/dist/dts/section-navigator/index.d.ts +4 -0
- package/dist/dts/section-navigator/index.d.ts.map +1 -0
- package/dist/dts/section-navigator/section-navigator.d.ts +152 -0
- package/dist/dts/section-navigator/section-navigator.d.ts.map +1 -0
- package/dist/dts/section-navigator/section-navigator.styles.d.ts +3 -0
- package/dist/dts/section-navigator/section-navigator.styles.d.ts.map +1 -0
- package/dist/dts/section-navigator/section-navigator.template.d.ts +4 -0
- package/dist/dts/section-navigator/section-navigator.template.d.ts.map +1 -0
- package/dist/esm/base-components.js +2 -0
- package/dist/esm/dialog/dialog.js +217 -0
- package/dist/esm/dialog/dialog.styles.js +142 -0
- package/dist/esm/dialog/dialog.template.js +10 -0
- package/dist/esm/index.js +1 -0
- package/dist/esm/section-navigator/index.js +3 -0
- package/dist/esm/section-navigator/section-navigator.js +561 -0
- package/dist/esm/section-navigator/section-navigator.styles.js +195 -0
- package/dist/esm/section-navigator/section-navigator.template.js +49 -0
- package/package.json +18 -18
|
@@ -324,6 +324,17 @@ export declare const baseComponents: {
|
|
|
324
324
|
foundationTreeItem: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").TreeItemOptions>) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").TreeItemOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
|
|
325
325
|
foundationTreeView: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition>) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("./tree-view").TreeView>;
|
|
326
326
|
foundationUrlInput: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition>) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("./url-input").UrlInput>;
|
|
327
|
+
foundationSectionNavigator: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
|
|
328
|
+
baseName: string;
|
|
329
|
+
template: import("@microsoft/fast-element").ViewTemplate<import("./section-navigator").SectionNavigator, any>;
|
|
330
|
+
styles: import("@microsoft/fast-element").ElementStyles;
|
|
331
|
+
shadowOptions: ShadowRootInit;
|
|
332
|
+
}>) => import("@microsoft/fast-foundation").FoundationElementRegistry<{
|
|
333
|
+
baseName: string;
|
|
334
|
+
template: import("@microsoft/fast-element").ViewTemplate<import("./section-navigator").SectionNavigator, any>;
|
|
335
|
+
styles: import("@microsoft/fast-element").ElementStyles;
|
|
336
|
+
shadowOptions: ShadowRootInit;
|
|
337
|
+
}, typeof import("./section-navigator").SectionNavigator>;
|
|
327
338
|
register(container?: Container, ...rest: any[]): void;
|
|
328
339
|
};
|
|
329
340
|
//# sourceMappingURL=base-components.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-components.d.ts","sourceRoot":"","sources":["../../src/base-components.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"base-components.d.ts","sourceRoot":"","sources":["../../src/base-components.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAoF5D,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAoFJ,SAAS,WAAW,GAAG,EAAE;CAe/C,CAAC"}
|
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
import { NotificationStructure } from '@genesislcap/foundation-notifications';
|
|
2
2
|
import { FoundationElement } from '@microsoft/fast-foundation';
|
|
3
3
|
import type { DialogPosition, DialogType } from './dialog.types';
|
|
4
|
-
/**
|
|
5
|
-
* Focus trapping will be addressed as part of https://genesisglobal.atlassian.net/browse/FUI-2083
|
|
6
|
-
*/
|
|
7
4
|
export declare const foundationDialogShadowOptions: ShadowRootInit;
|
|
8
5
|
export declare const defaultDialogConfig: {};
|
|
9
6
|
export declare abstract class DialogElement extends FoundationElement {
|
|
@@ -22,6 +19,18 @@ export declare abstract class DialogElement extends FoundationElement {
|
|
|
22
19
|
* Whether or not to show the close icon
|
|
23
20
|
*/
|
|
24
21
|
showCloseIcon: boolean;
|
|
22
|
+
/**
|
|
23
|
+
* Whether or not the dialog is resizable
|
|
24
|
+
*/
|
|
25
|
+
resizable: boolean;
|
|
26
|
+
/**
|
|
27
|
+
* Minimum width for the dialog
|
|
28
|
+
*/
|
|
29
|
+
minWidth: number;
|
|
30
|
+
/**
|
|
31
|
+
* Minimum height for the dialog
|
|
32
|
+
*/
|
|
33
|
+
minHeight: number;
|
|
25
34
|
/**
|
|
26
35
|
* Callback to run *before* HTMLDialogElement is shown
|
|
27
36
|
*/
|
|
@@ -30,7 +39,23 @@ export declare abstract class DialogElement extends FoundationElement {
|
|
|
30
39
|
* Callback to run *after* HTMLDialogElement is closed
|
|
31
40
|
*/
|
|
32
41
|
onCloseCallback: () => void;
|
|
42
|
+
private isResizing;
|
|
43
|
+
private currentResizeHandle;
|
|
44
|
+
private startX;
|
|
45
|
+
private startY;
|
|
46
|
+
private startWidth;
|
|
47
|
+
private startHeight;
|
|
48
|
+
private startLeft;
|
|
49
|
+
private startTop;
|
|
50
|
+
private resizeOffsetX;
|
|
51
|
+
private resizeOffsetY;
|
|
33
52
|
connectedCallback(): void;
|
|
53
|
+
disconnectedCallback(): void;
|
|
54
|
+
private setupResizeHandlers;
|
|
55
|
+
private removeResizeHandlers;
|
|
56
|
+
private handleResizeStart;
|
|
57
|
+
private handleResizeMove;
|
|
58
|
+
private handleResizeEnd;
|
|
34
59
|
/**
|
|
35
60
|
* Determine if the dialog is showing or closed.
|
|
36
61
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/dialog/dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,uCAAuC,CAAC;AAE9E,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAK/D,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/dialog/dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,uCAAuC,CAAC;AAE9E,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAK/D,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAWjE,eAAO,MAAM,6BAA6B,EAAE,cAG3C,CAAC;AAEF,eAAO,MAAM,mBAAmB,IAAK,CAAC;AAEtC,8BAAsB,aAAc,SAAQ,iBAAiB;IAC3D;;;OAGG;IACH,WAAW,EAAG,iBAAiB,CAAC;IAChC,UAAU,EAAG,WAAW,CAAC;IACzB,cAAc,EAAG,eAAe,CAAC;IACrB,YAAY,EAAG,qBAAqB,CAAC;IACjD,mBAAmB;IAIU,IAAI,EAAE,UAAU,CAAa;IAEpD,QAAQ,EAAE,cAAc,CAAY;IAE1C;;OAEG;IACsD,aAAa,EAAE,OAAO,CAAQ;IAEvF;;OAEG;IACgD,SAAS,EAAE,OAAO,CAAS;IAE9E;;OAEG;IAC+B,QAAQ,EAAE,MAAM,CAAa;IAE/D;;OAEG;IACgC,SAAS,EAAE,MAAM,CAAc;IAElE;;OAEG;IACS,cAAc,EAAE,MAAM,IAAI,CAAC;IAEvC;;OAEG;IACS,eAAe,EAAE,MAAM,IAAI,CAAC;IAGxC,OAAO,CAAC,UAAU,CAAkB;IACpC,OAAO,CAAC,mBAAmB,CAAgB;IAC3C,OAAO,CAAC,MAAM,CAAa;IAC3B,OAAO,CAAC,MAAM,CAAa;IAC3B,OAAO,CAAC,UAAU,CAAa;IAC/B,OAAO,CAAC,WAAW,CAAa;IAChC,OAAO,CAAC,SAAS,CAAa;IAC9B,OAAO,CAAC,QAAQ,CAAa;IAC7B,OAAO,CAAC,aAAa,CAAa;IAClC,OAAO,CAAC,aAAa,CAAa;IAElC,iBAAiB;IAoBjB,oBAAoB;IAKpB,OAAO,CAAC,mBAAmB;IAa3B,OAAO,CAAC,oBAAoB;IAK5B,OAAO,CAAC,iBAAiB;IAqEzB,OAAO,CAAC,gBAAgB;IA4FxB,OAAO,CAAC,eAAe;IAuBvB;;OAEG;IACH,IACI,IAAI,IAAI,OAAO,CAElB;IAED;;OAEG;IACH,QAAQ,CAAC,IAAI,IAAI,IAAI;IAErB;;OAEG;IACH,KAAK,IAAI,IAAI;IAIb;;OAEG;IACI,OAAO;IAOd;;OAEG;IACI,WAAW,IAAI,IAAI;CAQ3B;AAED;;GAEG;AACH,qBAAa,MAAO,SAAQ,aAAa;IACvC,IAAI,IAAI,IAAI;CAIb;AAED;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;iBAM3B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.styles.d.ts","sourceRoot":"","sources":["../../../src/dialog/dialog.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAE7D,eAAO,MAAM,sBAAsB,EAAE,
|
|
1
|
+
{"version":3,"file":"dialog.styles.d.ts","sourceRoot":"","sources":["../../../src/dialog/dialog.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAE7D,eAAO,MAAM,sBAAsB,EAAE,aAyNpC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.template.d.ts","sourceRoot":"","sources":["../../../src/dialog/dialog.template.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAEvC,eAAO,MAAM,iBAAiB,GAAI,QAAQ,MAAM,
|
|
1
|
+
{"version":3,"file":"dialog.template.d.ts","sourceRoot":"","sources":["../../../src/dialog/dialog.template.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAEvC,eAAO,MAAM,iBAAiB,GAAI,QAAQ,MAAM,gEAqE/C,CAAC;AAEF,eAAO,MAAM,wBAAwB,6DAEpC,CAAC"}
|
package/dist/dts/index.d.ts
CHANGED
|
@@ -69,6 +69,7 @@ export * from './scheduler';
|
|
|
69
69
|
export * from './scheduler-cron-builder';
|
|
70
70
|
export * from './scheduler-timezone';
|
|
71
71
|
export * from './search-bar';
|
|
72
|
+
export * from './section-navigator';
|
|
72
73
|
export * from './segmented-control';
|
|
73
74
|
export * from './segmented-item';
|
|
74
75
|
export * from './select';
|
package/dist/dts/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,uBAAuB,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAEvF,OAAO,EAAE,cAAc,EAAE,uBAAuB,EAAE,mBAAmB,EAAE,CAAC;AAExE,eAAO,MAAM,8BAA8B,yDAAuD,CAAC;AAEnG,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,2BAA2B,CAAC;AAC1C,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,wBAAwB,CAAC;AACvC,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,0BAA0B,CAAC;AACzC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,yBAAyB,CAAC;AACxC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,yBAAyB,CAAC;AACxC,OAAO,EAAE,SAAS,IAAI,qBAAqB,EAAE,MAAM,aAAa,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/section-navigator/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,8BAA8B,CAAC"}
|
|
@@ -0,0 +1,152 @@
|
|
|
1
|
+
import { FoundationElement } from '@microsoft/fast-foundation';
|
|
2
|
+
export declare const SECTION_NAVIGATOR_EVENTS: {
|
|
3
|
+
readonly setState: "section-navigator-set-state";
|
|
4
|
+
readonly setStates: "section-navigator-set-states";
|
|
5
|
+
readonly clearState: "section-navigator-clear-state";
|
|
6
|
+
readonly clearAllStates: "section-navigator-clear-all-states";
|
|
7
|
+
};
|
|
8
|
+
export type SectionItemStateName = 'active' | 'inactive' | 'pending' | 'disabled' | 'error' | 'completed';
|
|
9
|
+
export type SectionItemStateIcon = {
|
|
10
|
+
name: string;
|
|
11
|
+
variant: 'solid' | 'regular' | 'light' | 'thin';
|
|
12
|
+
};
|
|
13
|
+
export type SectionItemState = {
|
|
14
|
+
name: SectionItemStateName;
|
|
15
|
+
tooltip?: string;
|
|
16
|
+
};
|
|
17
|
+
export interface SectionItem {
|
|
18
|
+
name: string;
|
|
19
|
+
label: string;
|
|
20
|
+
states?: SectionItemStateName[];
|
|
21
|
+
}
|
|
22
|
+
export interface SetStateEventDetail {
|
|
23
|
+
sectionName: string;
|
|
24
|
+
stateName: SectionItemStateName;
|
|
25
|
+
}
|
|
26
|
+
export interface SetStatesEventDetail {
|
|
27
|
+
sectionName: string;
|
|
28
|
+
stateNames: SectionItemStateName[];
|
|
29
|
+
}
|
|
30
|
+
export interface ClearStateEventDetail {
|
|
31
|
+
sectionName: string;
|
|
32
|
+
stateName: SectionItemStateName;
|
|
33
|
+
}
|
|
34
|
+
export interface ClearAllStatesEventDetail {
|
|
35
|
+
sectionName?: string;
|
|
36
|
+
}
|
|
37
|
+
/**
|
|
38
|
+
* Section Navigator Component
|
|
39
|
+
*
|
|
40
|
+
* A component that provides navigation between different sections with support for state management.
|
|
41
|
+
* Each section can have multiple states that are displayed as icons next to the section label.
|
|
42
|
+
*
|
|
43
|
+
* @tagname %%prefix%%-section-navigator
|
|
44
|
+
*
|
|
45
|
+
* @attr sections - Array of section items to display
|
|
46
|
+
* @attr scroll-behavior - Scroll behavior: 'view' or 'top' (default: 'top')
|
|
47
|
+
* @attr state-tooltips - Custom tooltips for state icons
|
|
48
|
+
* @attr state-icons - Custom icons for state types
|
|
49
|
+
* @attr disable-auto-scroll-detection - Disable automatic active section detection during scrolling (default: false)
|
|
50
|
+
* When enabled, automatically updates active section based on scroll position.
|
|
51
|
+
* User clicks are prioritized - clicked section remains active until scroll ends.
|
|
52
|
+
*
|
|
53
|
+
* @listens set-state - Adds a single state to a section
|
|
54
|
+
* Detail: { sectionName: string, stateName: SectionItemStateName }
|
|
55
|
+
*
|
|
56
|
+
* @listens set-states - Adds multiple states to a section
|
|
57
|
+
* Detail: { sectionName: string, stateNames: SectionItemStateName[] }
|
|
58
|
+
*
|
|
59
|
+
* @listens clear-state - Removes a specific state from a section
|
|
60
|
+
* Detail: { sectionName: string, stateName: SectionItemStateName }
|
|
61
|
+
*
|
|
62
|
+
* @listens clear-all-states - Clears all states from a section or all sections
|
|
63
|
+
* Detail: { sectionName?: string } - If sectionName not provided, clears all sections
|
|
64
|
+
*
|
|
65
|
+
* @slot {sectionName} - Content for each section (slot name matches section name)
|
|
66
|
+
*
|
|
67
|
+
* @example
|
|
68
|
+
* ```html
|
|
69
|
+
* <!-- Default behavior with auto-scroll detection enabled -->
|
|
70
|
+
* <foundation-section-navigator .sections=${sections}>
|
|
71
|
+
* <div slot="section1">Section 1 content</div>
|
|
72
|
+
* <div slot="section2">Section 2 content</div>
|
|
73
|
+
* </foundation-section-navigator>
|
|
74
|
+
*
|
|
75
|
+
* <!-- Disable auto-scroll detection -->
|
|
76
|
+
* <foundation-section-navigator .sections=${sections} disable-auto-scroll-detection>
|
|
77
|
+
* <div slot="section1">Section 1 content</div>
|
|
78
|
+
* <div slot="section2">Section 2 content</div>
|
|
79
|
+
* </foundation-section-navigator>
|
|
80
|
+
* ```
|
|
81
|
+
*/
|
|
82
|
+
export declare class SectionNavigator extends FoundationElement {
|
|
83
|
+
sections: SectionItem[];
|
|
84
|
+
scrollBehavior: 'view' | 'top';
|
|
85
|
+
stateTooltips: Record<SectionItemStateName, string>;
|
|
86
|
+
stateIcons: Record<SectionItemStateName, SectionItemStateIcon>;
|
|
87
|
+
disableAutoScrollDetection: boolean;
|
|
88
|
+
private handleSetStateRef?;
|
|
89
|
+
private handleSetStatesRef?;
|
|
90
|
+
private handleClearStateRef?;
|
|
91
|
+
private handleClearAllStatesRef?;
|
|
92
|
+
private handleGenericStateEventRef?;
|
|
93
|
+
private userClickedSection;
|
|
94
|
+
private scrollEndHandler?;
|
|
95
|
+
private isUserScrolling;
|
|
96
|
+
private scrollCheckHandler?;
|
|
97
|
+
private scrollDebounceTimeout?;
|
|
98
|
+
private static readonly SCROLL_END_TIMEOUT;
|
|
99
|
+
private static readonly SCROLL_DEBOUNCE_TIMEOUT;
|
|
100
|
+
sectionsChanged(): void;
|
|
101
|
+
disableAutoScrollDetectionChanged(): void;
|
|
102
|
+
scrollBehaviorChanged(): void;
|
|
103
|
+
sectionItems: SectionItem[];
|
|
104
|
+
activeSection: string;
|
|
105
|
+
sectionNavigatorContainer: HTMLElement;
|
|
106
|
+
sectionContent: HTMLElement;
|
|
107
|
+
private spacerElement?;
|
|
108
|
+
connectedCallback(): void;
|
|
109
|
+
private setSectionItems;
|
|
110
|
+
private setActiveSection;
|
|
111
|
+
handleSectionClick(sectionName: string): void;
|
|
112
|
+
private updateSpacer;
|
|
113
|
+
private scrollToSection;
|
|
114
|
+
private updateScrollDetection;
|
|
115
|
+
private setupScrollDetection;
|
|
116
|
+
private updateActiveSectionBasedOnScrollPosition;
|
|
117
|
+
private setupScrollEndDetection;
|
|
118
|
+
private cleanupScrollEndDetection;
|
|
119
|
+
private cleanupScrollDetection;
|
|
120
|
+
private setupStateEventListeners;
|
|
121
|
+
private updateSectionStates;
|
|
122
|
+
private addState;
|
|
123
|
+
private addStates;
|
|
124
|
+
private clearState;
|
|
125
|
+
private clearAllStates;
|
|
126
|
+
private clearAllStatesInAllSections;
|
|
127
|
+
getStateTooltip(stateName: SectionItemStateName): string;
|
|
128
|
+
getSectionStateClass(section: SectionItem): string;
|
|
129
|
+
getStateIcon(stateName: SectionItemStateName): SectionItemStateIcon;
|
|
130
|
+
disconnectedCallback(): void;
|
|
131
|
+
}
|
|
132
|
+
export declare const foundationSectionNavigatorShadowOptions: ShadowRootInit;
|
|
133
|
+
export declare const defaultSectionNavigatorConfig: {};
|
|
134
|
+
/**
|
|
135
|
+
* The Foundation SectionNavigator
|
|
136
|
+
*
|
|
137
|
+
* @public
|
|
138
|
+
* @remarks
|
|
139
|
+
* HTML Element: \<foundation-section-navigator\>
|
|
140
|
+
*/
|
|
141
|
+
export declare const foundationSectionNavigator: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
|
|
142
|
+
baseName: string;
|
|
143
|
+
template: import("@microsoft/fast-element").ViewTemplate<SectionNavigator, any>;
|
|
144
|
+
styles: import("@microsoft/fast-element").ElementStyles;
|
|
145
|
+
shadowOptions: ShadowRootInit;
|
|
146
|
+
}>) => import("@microsoft/fast-foundation").FoundationElementRegistry<{
|
|
147
|
+
baseName: string;
|
|
148
|
+
template: import("@microsoft/fast-element").ViewTemplate<SectionNavigator, any>;
|
|
149
|
+
styles: import("@microsoft/fast-element").ElementStyles;
|
|
150
|
+
shadowOptions: ShadowRootInit;
|
|
151
|
+
}, typeof SectionNavigator>;
|
|
152
|
+
//# sourceMappingURL=section-navigator.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"section-navigator.d.ts","sourceRoot":"","sources":["../../../src/section-navigator/section-navigator.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"section-navigator.styles.d.ts","sourceRoot":"","sources":["../../../src/section-navigator/section-navigator.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAE7D,eAAO,MAAM,gCAAgC,EAAE,aAiM9C,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"section-navigator.template.d.ts","sourceRoot":"","sources":["../../../src/section-navigator/section-navigator.template.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAG5D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AA6D5D,eAAO,MAAM,kCAAkC,EAAE,YAAY,CAAC,gBAAgB,CAE7E,CAAC"}
|
|
@@ -57,6 +57,7 @@ import { foundationScheduler } from './scheduler';
|
|
|
57
57
|
import { foundationSchedulerCronBuilder } from './scheduler-cron-builder';
|
|
58
58
|
import { foundationSchedulerTimezone } from './scheduler-timezone';
|
|
59
59
|
import { foundationSearchBar, foundationSearchBarCombobox } from './search-bar';
|
|
60
|
+
import { foundationSectionNavigator } from './section-navigator';
|
|
60
61
|
import { foundationSegmentedControl } from './segmented-control';
|
|
61
62
|
import { foundationSegmentedItem } from './segmented-item';
|
|
62
63
|
import { foundationSelect } from './select';
|
|
@@ -163,6 +164,7 @@ export const baseComponents = {
|
|
|
163
164
|
foundationTreeItem,
|
|
164
165
|
foundationTreeView,
|
|
165
166
|
foundationUrlInput,
|
|
167
|
+
foundationSectionNavigator,
|
|
166
168
|
register(container, ...rest) {
|
|
167
169
|
if (!container) {
|
|
168
170
|
// preserve backward compatibility with code that loops through
|
|
@@ -8,6 +8,8 @@ import { foundationDialogTemplate as template } from './dialog.template';
|
|
|
8
8
|
/**
|
|
9
9
|
* Focus trapping will be addressed as part of https://genesisglobal.atlassian.net/browse/FUI-2083
|
|
10
10
|
*/
|
|
11
|
+
const MIN_WIDTH = 300;
|
|
12
|
+
const MIN_HEIGHT = 200;
|
|
11
13
|
// explicitly declaring for extensibility
|
|
12
14
|
export const foundationDialogShadowOptions = {
|
|
13
15
|
mode: 'open',
|
|
@@ -23,6 +25,29 @@ export class DialogElement extends FoundationElement {
|
|
|
23
25
|
* Whether or not to show the close icon
|
|
24
26
|
*/
|
|
25
27
|
this.showCloseIcon = true;
|
|
28
|
+
/**
|
|
29
|
+
* Whether or not the dialog is resizable
|
|
30
|
+
*/
|
|
31
|
+
this.resizable = false;
|
|
32
|
+
/**
|
|
33
|
+
* Minimum width for the dialog
|
|
34
|
+
*/
|
|
35
|
+
this.minWidth = MIN_WIDTH;
|
|
36
|
+
/**
|
|
37
|
+
* Minimum height for the dialog
|
|
38
|
+
*/
|
|
39
|
+
this.minHeight = MIN_HEIGHT;
|
|
40
|
+
// Resize state
|
|
41
|
+
this.isResizing = false;
|
|
42
|
+
this.currentResizeHandle = null;
|
|
43
|
+
this.startX = 0;
|
|
44
|
+
this.startY = 0;
|
|
45
|
+
this.startWidth = 0;
|
|
46
|
+
this.startHeight = 0;
|
|
47
|
+
this.startLeft = 0;
|
|
48
|
+
this.startTop = 0;
|
|
49
|
+
this.resizeOffsetX = 0;
|
|
50
|
+
this.resizeOffsetY = 0;
|
|
26
51
|
}
|
|
27
52
|
notificationChanged() {
|
|
28
53
|
if (this.notification)
|
|
@@ -41,6 +66,189 @@ export class DialogElement extends FoundationElement {
|
|
|
41
66
|
if (this.hasAttribute('open')) {
|
|
42
67
|
this.shadowRoot.querySelector('dialog').setAttribute('open', '');
|
|
43
68
|
}
|
|
69
|
+
// Set up resize handlers
|
|
70
|
+
this.setupResizeHandlers();
|
|
71
|
+
}
|
|
72
|
+
disconnectedCallback() {
|
|
73
|
+
super.disconnectedCallback();
|
|
74
|
+
this.removeResizeHandlers();
|
|
75
|
+
}
|
|
76
|
+
setupResizeHandlers() {
|
|
77
|
+
if (!this.resizable)
|
|
78
|
+
return;
|
|
79
|
+
this.mainElement.style.minHeight = `${this.minHeight}px`;
|
|
80
|
+
this.mainElement.style.minWidth = `${this.minWidth}px`;
|
|
81
|
+
// Add event listeners for resize handles
|
|
82
|
+
const handles = this.shadowRoot.querySelectorAll('.resize-handle');
|
|
83
|
+
handles.forEach((handle) => {
|
|
84
|
+
handle.addEventListener('mousedown', this.handleResizeStart.bind(this));
|
|
85
|
+
});
|
|
86
|
+
}
|
|
87
|
+
removeResizeHandlers() {
|
|
88
|
+
document.removeEventListener('mousemove', this.handleResizeMove.bind(this));
|
|
89
|
+
document.removeEventListener('mouseup', this.handleResizeEnd.bind(this));
|
|
90
|
+
}
|
|
91
|
+
handleResizeStart(e) {
|
|
92
|
+
if (!this.resizable)
|
|
93
|
+
return;
|
|
94
|
+
e.preventDefault();
|
|
95
|
+
e.stopPropagation();
|
|
96
|
+
this.isResizing = true;
|
|
97
|
+
const target = e.target;
|
|
98
|
+
this.currentResizeHandle = target.dataset.direction;
|
|
99
|
+
this.startX = e.clientX;
|
|
100
|
+
this.startY = e.clientY;
|
|
101
|
+
const rect = this.mainElement.getBoundingClientRect();
|
|
102
|
+
this.startWidth = rect.width;
|
|
103
|
+
this.startHeight = rect.height;
|
|
104
|
+
this.startLeft = rect.left;
|
|
105
|
+
this.startTop = rect.top;
|
|
106
|
+
// Calculate offset from click position to actual edge
|
|
107
|
+
// This prevents the initial "jump" when starting to drag
|
|
108
|
+
this.resizeOffsetX = 0;
|
|
109
|
+
this.resizeOffsetY = 0;
|
|
110
|
+
switch (this.currentResizeHandle) {
|
|
111
|
+
case 'n':
|
|
112
|
+
this.resizeOffsetY = e.clientY - rect.top;
|
|
113
|
+
break;
|
|
114
|
+
case 's':
|
|
115
|
+
this.resizeOffsetY = e.clientY - rect.bottom;
|
|
116
|
+
break;
|
|
117
|
+
case 'e':
|
|
118
|
+
this.resizeOffsetX = e.clientX - rect.right;
|
|
119
|
+
break;
|
|
120
|
+
case 'w':
|
|
121
|
+
this.resizeOffsetX = e.clientX - rect.left;
|
|
122
|
+
break;
|
|
123
|
+
case 'ne':
|
|
124
|
+
this.resizeOffsetX = e.clientX - rect.right;
|
|
125
|
+
this.resizeOffsetY = e.clientY - rect.top;
|
|
126
|
+
break;
|
|
127
|
+
case 'nw':
|
|
128
|
+
this.resizeOffsetX = e.clientX - rect.left;
|
|
129
|
+
this.resizeOffsetY = e.clientY - rect.top;
|
|
130
|
+
break;
|
|
131
|
+
case 'se':
|
|
132
|
+
this.resizeOffsetX = e.clientX - rect.right;
|
|
133
|
+
this.resizeOffsetY = e.clientY - rect.bottom;
|
|
134
|
+
break;
|
|
135
|
+
case 'sw':
|
|
136
|
+
this.resizeOffsetX = e.clientX - rect.left;
|
|
137
|
+
this.resizeOffsetY = e.clientY - rect.bottom;
|
|
138
|
+
break;
|
|
139
|
+
}
|
|
140
|
+
// Convert to fixed positioning to allow precise position control
|
|
141
|
+
this.mainElement.style.position = 'fixed';
|
|
142
|
+
this.mainElement.style.left = `${rect.left}px`;
|
|
143
|
+
this.mainElement.style.top = `${rect.top}px`;
|
|
144
|
+
this.mainElement.style.margin = '0';
|
|
145
|
+
// Add document-level listeners for smooth resizing
|
|
146
|
+
document.addEventListener('mousemove', this.handleResizeMove.bind(this));
|
|
147
|
+
document.addEventListener('mouseup', this.handleResizeEnd.bind(this));
|
|
148
|
+
// Add resizing class for styling
|
|
149
|
+
this.mainElement.classList.add('resizing');
|
|
150
|
+
}
|
|
151
|
+
handleResizeMove(e) {
|
|
152
|
+
if (!this.isResizing || !this.currentResizeHandle)
|
|
153
|
+
return;
|
|
154
|
+
e.preventDefault();
|
|
155
|
+
// Apply the offset to eliminate initial jump
|
|
156
|
+
const deltaX = e.clientX - this.startX - this.resizeOffsetX;
|
|
157
|
+
const deltaY = e.clientY - this.startY - this.resizeOffsetY;
|
|
158
|
+
let newWidth = this.startWidth;
|
|
159
|
+
let newHeight = this.startHeight;
|
|
160
|
+
let newLeft = this.startLeft;
|
|
161
|
+
let newTop = this.startTop;
|
|
162
|
+
let shouldUpdatePosition = false;
|
|
163
|
+
// Calculate new dimensions and positions based on resize handle direction
|
|
164
|
+
switch (this.currentResizeHandle) {
|
|
165
|
+
case 'se': // bottom-right
|
|
166
|
+
newWidth = this.startWidth + deltaX;
|
|
167
|
+
newHeight = this.startHeight + deltaY;
|
|
168
|
+
break;
|
|
169
|
+
case 'sw': // bottom-left
|
|
170
|
+
newWidth = this.startWidth - deltaX;
|
|
171
|
+
newHeight = this.startHeight + deltaY;
|
|
172
|
+
newLeft = this.startLeft + deltaX;
|
|
173
|
+
shouldUpdatePosition = true;
|
|
174
|
+
break;
|
|
175
|
+
case 'ne': // top-right
|
|
176
|
+
newWidth = this.startWidth + deltaX;
|
|
177
|
+
newHeight = this.startHeight - deltaY;
|
|
178
|
+
newTop = this.startTop + deltaY;
|
|
179
|
+
shouldUpdatePosition = true;
|
|
180
|
+
break;
|
|
181
|
+
case 'nw': // top-left
|
|
182
|
+
newWidth = this.startWidth - deltaX;
|
|
183
|
+
newHeight = this.startHeight - deltaY;
|
|
184
|
+
newLeft = this.startLeft + deltaX;
|
|
185
|
+
newTop = this.startTop + deltaY;
|
|
186
|
+
shouldUpdatePosition = true;
|
|
187
|
+
break;
|
|
188
|
+
case 'e': // right
|
|
189
|
+
newWidth = this.startWidth + deltaX;
|
|
190
|
+
break;
|
|
191
|
+
case 'w': // left
|
|
192
|
+
newWidth = this.startWidth - deltaX;
|
|
193
|
+
newLeft = this.startLeft + deltaX;
|
|
194
|
+
shouldUpdatePosition = true;
|
|
195
|
+
break;
|
|
196
|
+
case 's': // bottom
|
|
197
|
+
newHeight = this.startHeight + deltaY;
|
|
198
|
+
break;
|
|
199
|
+
case 'n': // top
|
|
200
|
+
newHeight = this.startHeight - deltaY;
|
|
201
|
+
newTop = this.startTop + deltaY;
|
|
202
|
+
shouldUpdatePosition = true;
|
|
203
|
+
break;
|
|
204
|
+
}
|
|
205
|
+
// Apply minimum constraints only when resizable
|
|
206
|
+
if (this.resizable) {
|
|
207
|
+
// Apply minimum width constraint and adjust position if needed
|
|
208
|
+
if (newWidth < this.minWidth) {
|
|
209
|
+
const widthDiff = this.minWidth - newWidth;
|
|
210
|
+
newWidth = this.minWidth;
|
|
211
|
+
// If resizing from left edge, maintain the right edge position
|
|
212
|
+
if (this.currentResizeHandle.includes('w')) {
|
|
213
|
+
newLeft = newLeft - widthDiff;
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
// Apply minimum height constraint and adjust position if needed
|
|
217
|
+
if (newHeight < this.minHeight) {
|
|
218
|
+
const heightDiff = this.minHeight - newHeight;
|
|
219
|
+
newHeight = this.minHeight;
|
|
220
|
+
// If resizing from top edge, maintain the bottom edge position
|
|
221
|
+
if (this.currentResizeHandle.includes('n')) {
|
|
222
|
+
newTop = newTop - heightDiff;
|
|
223
|
+
}
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
// Apply new dimensions
|
|
227
|
+
this.mainElement.style.width = `${newWidth}px`;
|
|
228
|
+
this.mainElement.style.height = `${newHeight}px`;
|
|
229
|
+
// Always update position when using handles that move edges
|
|
230
|
+
if (shouldUpdatePosition) {
|
|
231
|
+
this.mainElement.style.left = `${newLeft}px`;
|
|
232
|
+
this.mainElement.style.top = `${newTop}px`;
|
|
233
|
+
}
|
|
234
|
+
}
|
|
235
|
+
handleResizeEnd(e) {
|
|
236
|
+
if (!this.isResizing)
|
|
237
|
+
return;
|
|
238
|
+
e.preventDefault();
|
|
239
|
+
this.isResizing = false;
|
|
240
|
+
this.currentResizeHandle = null;
|
|
241
|
+
this.resizeOffsetX = 0;
|
|
242
|
+
this.resizeOffsetY = 0;
|
|
243
|
+
// Remove document-level listeners
|
|
244
|
+
document.removeEventListener('mousemove', this.handleResizeMove.bind(this));
|
|
245
|
+
document.removeEventListener('mouseup', this.handleResizeEnd.bind(this));
|
|
246
|
+
// Remove resizing class
|
|
247
|
+
this.mainElement.classList.remove('resizing');
|
|
248
|
+
this.$emit('resize', {
|
|
249
|
+
width: this.mainElement.offsetWidth,
|
|
250
|
+
height: this.mainElement.offsetHeight,
|
|
251
|
+
});
|
|
44
252
|
}
|
|
45
253
|
/**
|
|
46
254
|
* Determine if the dialog is showing or closed.
|
|
@@ -89,6 +297,15 @@ __decorate([
|
|
|
89
297
|
__decorate([
|
|
90
298
|
attr({ mode: 'boolean', attribute: 'show-close-icon' })
|
|
91
299
|
], DialogElement.prototype, "showCloseIcon", void 0);
|
|
300
|
+
__decorate([
|
|
301
|
+
attr({ mode: 'boolean', attribute: 'resizable' })
|
|
302
|
+
], DialogElement.prototype, "resizable", void 0);
|
|
303
|
+
__decorate([
|
|
304
|
+
attr({ attribute: 'min-width' })
|
|
305
|
+
], DialogElement.prototype, "minWidth", void 0);
|
|
306
|
+
__decorate([
|
|
307
|
+
attr({ attribute: 'min-height' })
|
|
308
|
+
], DialogElement.prototype, "minHeight", void 0);
|
|
92
309
|
__decorate([
|
|
93
310
|
observable
|
|
94
311
|
], DialogElement.prototype, "onShowCallback", void 0);
|