@genesislcap/foundation-utils 15.71.0 → 15.72.0-FUI-2629.7
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 +145 -142
- package/dist/dts/design-system/editable-elements.d.ts +12 -0
- package/dist/dts/design-system/editable-elements.d.ts.map +1 -1
- package/dist/dts/shortcut-manager/index.d.ts +1 -0
- package/dist/dts/shortcut-manager/index.d.ts.map +1 -1
- package/dist/dts/shortcut-manager/shortcut-keyboard.d.ts +7 -0
- package/dist/dts/shortcut-manager/shortcut-keyboard.d.ts.map +1 -0
- package/dist/dts/shortcut-manager/shortcut-listener.d.ts +0 -4
- package/dist/dts/shortcut-manager/shortcut-listener.d.ts.map +1 -1
- package/dist/esm/design-system/editable-elements.js +43 -0
- package/dist/esm/shortcut-manager/index.js +1 -0
- package/dist/esm/shortcut-manager/shortcut-keyboard.js +49 -0
- package/dist/esm/shortcut-manager/shortcut-listener.js +4 -69
- package/dist/foundation-utils.api.json +107 -0
- package/dist/foundation-utils.d.ts +20 -4
- package/package.json +9 -9
|
@@ -217,6 +217,47 @@
|
|
|
217
217
|
}
|
|
218
218
|
]
|
|
219
219
|
},
|
|
220
|
+
{
|
|
221
|
+
"kind": "javascript-module",
|
|
222
|
+
"path": "src/converters/index.ts",
|
|
223
|
+
"declarations": [],
|
|
224
|
+
"exports": [
|
|
225
|
+
{
|
|
226
|
+
"kind": "js",
|
|
227
|
+
"name": "*",
|
|
228
|
+
"declaration": {
|
|
229
|
+
"name": "*",
|
|
230
|
+
"package": "./string-array-converter"
|
|
231
|
+
}
|
|
232
|
+
}
|
|
233
|
+
]
|
|
234
|
+
},
|
|
235
|
+
{
|
|
236
|
+
"kind": "javascript-module",
|
|
237
|
+
"path": "src/converters/string-array-converter.ts",
|
|
238
|
+
"declarations": [
|
|
239
|
+
{
|
|
240
|
+
"kind": "variable",
|
|
241
|
+
"name": "stringArrayConverter",
|
|
242
|
+
"type": {
|
|
243
|
+
"text": "ValueConverter"
|
|
244
|
+
},
|
|
245
|
+
"default": "{\n fromView(v: string): string | string[] | undefined {\n if (!v?.trim()) return undefined;\n return v.includes(',') ? v.split(',').map((s) => s.trim()) : v.trim();\n },\n toView(v: string | string[] | undefined): string {\n if (typeof v === 'string') return v;\n if (Array.isArray(v)) return v.join(',');\n return '';\n },\n}",
|
|
246
|
+
"description": "A @microsoft/fast-element#ValueConverter that converts between comma-separated string attributes\nand `string | string[]` properties.",
|
|
247
|
+
"privacy": "public"
|
|
248
|
+
}
|
|
249
|
+
],
|
|
250
|
+
"exports": [
|
|
251
|
+
{
|
|
252
|
+
"kind": "js",
|
|
253
|
+
"name": "stringArrayConverter",
|
|
254
|
+
"declaration": {
|
|
255
|
+
"name": "stringArrayConverter",
|
|
256
|
+
"module": "src/converters/string-array-converter.ts"
|
|
257
|
+
}
|
|
258
|
+
}
|
|
259
|
+
]
|
|
260
|
+
},
|
|
220
261
|
{
|
|
221
262
|
"kind": "javascript-module",
|
|
222
263
|
"path": "src/data/inMemoryDatabase.ts",
|
|
@@ -415,70 +456,6 @@
|
|
|
415
456
|
}
|
|
416
457
|
]
|
|
417
458
|
},
|
|
418
|
-
{
|
|
419
|
-
"kind": "javascript-module",
|
|
420
|
-
"path": "src/converters/index.ts",
|
|
421
|
-
"declarations": [],
|
|
422
|
-
"exports": [
|
|
423
|
-
{
|
|
424
|
-
"kind": "js",
|
|
425
|
-
"name": "*",
|
|
426
|
-
"declaration": {
|
|
427
|
-
"name": "*",
|
|
428
|
-
"package": "./string-array-converter"
|
|
429
|
-
}
|
|
430
|
-
}
|
|
431
|
-
]
|
|
432
|
-
},
|
|
433
|
-
{
|
|
434
|
-
"kind": "javascript-module",
|
|
435
|
-
"path": "src/converters/string-array-converter.ts",
|
|
436
|
-
"declarations": [
|
|
437
|
-
{
|
|
438
|
-
"kind": "variable",
|
|
439
|
-
"name": "stringArrayConverter",
|
|
440
|
-
"type": {
|
|
441
|
-
"text": "ValueConverter"
|
|
442
|
-
},
|
|
443
|
-
"default": "{\n fromView(v: string): string | string[] | undefined {\n if (!v?.trim()) return undefined;\n return v.includes(',') ? v.split(',').map((s) => s.trim()) : v.trim();\n },\n toView(v: string | string[] | undefined): string {\n if (typeof v === 'string') return v;\n if (Array.isArray(v)) return v.join(',');\n return '';\n },\n}",
|
|
444
|
-
"description": "A @microsoft/fast-element#ValueConverter that converts between comma-separated string attributes\nand `string | string[]` properties.",
|
|
445
|
-
"privacy": "public"
|
|
446
|
-
}
|
|
447
|
-
],
|
|
448
|
-
"exports": [
|
|
449
|
-
{
|
|
450
|
-
"kind": "js",
|
|
451
|
-
"name": "stringArrayConverter",
|
|
452
|
-
"declaration": {
|
|
453
|
-
"name": "stringArrayConverter",
|
|
454
|
-
"module": "src/converters/string-array-converter.ts"
|
|
455
|
-
}
|
|
456
|
-
}
|
|
457
|
-
]
|
|
458
|
-
},
|
|
459
|
-
{
|
|
460
|
-
"kind": "javascript-module",
|
|
461
|
-
"path": "src/directives/index.ts",
|
|
462
|
-
"declarations": [],
|
|
463
|
-
"exports": [
|
|
464
|
-
{
|
|
465
|
-
"kind": "js",
|
|
466
|
-
"name": "*",
|
|
467
|
-
"declaration": {
|
|
468
|
-
"name": "*",
|
|
469
|
-
"package": "./sync"
|
|
470
|
-
}
|
|
471
|
-
},
|
|
472
|
-
{
|
|
473
|
-
"kind": "js",
|
|
474
|
-
"name": "*",
|
|
475
|
-
"declaration": {
|
|
476
|
-
"name": "*",
|
|
477
|
-
"package": "./when-else"
|
|
478
|
-
}
|
|
479
|
-
}
|
|
480
|
-
]
|
|
481
|
-
},
|
|
482
459
|
{
|
|
483
460
|
"kind": "javascript-module",
|
|
484
461
|
"path": "src/design-system/design-system.ts",
|
|
@@ -629,6 +606,34 @@
|
|
|
629
606
|
}
|
|
630
607
|
}
|
|
631
608
|
]
|
|
609
|
+
},
|
|
610
|
+
{
|
|
611
|
+
"kind": "function",
|
|
612
|
+
"name": "isEditableKeyboardEvent",
|
|
613
|
+
"return": {
|
|
614
|
+
"type": {
|
|
615
|
+
"text": "boolean"
|
|
616
|
+
}
|
|
617
|
+
},
|
|
618
|
+
"parameters": [
|
|
619
|
+
{
|
|
620
|
+
"name": "event",
|
|
621
|
+
"type": {
|
|
622
|
+
"text": "KeyboardEvent"
|
|
623
|
+
},
|
|
624
|
+
"description": "The keyboard event."
|
|
625
|
+
},
|
|
626
|
+
{
|
|
627
|
+
"name": "editableSelector",
|
|
628
|
+
"default": "DEFAULT_EDITABLE_ELEMENT_SELECTOR",
|
|
629
|
+
"type": {
|
|
630
|
+
"text": "string"
|
|
631
|
+
},
|
|
632
|
+
"description": "CSS selector for editable elements. Defaults to the base selectors plus\nrapid editable hosts."
|
|
633
|
+
}
|
|
634
|
+
],
|
|
635
|
+
"description": "Whether a keyboard event comes from an editable element, i.e. the user is typing.",
|
|
636
|
+
"privacy": "public"
|
|
632
637
|
}
|
|
633
638
|
],
|
|
634
639
|
"exports": [
|
|
@@ -655,6 +660,14 @@
|
|
|
655
660
|
"name": "buildEditableElementSelector",
|
|
656
661
|
"module": "src/design-system/editable-elements.ts"
|
|
657
662
|
}
|
|
663
|
+
},
|
|
664
|
+
{
|
|
665
|
+
"kind": "js",
|
|
666
|
+
"name": "isEditableKeyboardEvent",
|
|
667
|
+
"declaration": {
|
|
668
|
+
"name": "isEditableKeyboardEvent",
|
|
669
|
+
"module": "src/design-system/editable-elements.ts"
|
|
670
|
+
}
|
|
658
671
|
}
|
|
659
672
|
]
|
|
660
673
|
},
|
|
@@ -683,7 +696,7 @@
|
|
|
683
696
|
},
|
|
684
697
|
{
|
|
685
698
|
"kind": "javascript-module",
|
|
686
|
-
"path": "src/
|
|
699
|
+
"path": "src/directives/index.ts",
|
|
687
700
|
"declarations": [],
|
|
688
701
|
"exports": [
|
|
689
702
|
{
|
|
@@ -691,7 +704,15 @@
|
|
|
691
704
|
"name": "*",
|
|
692
705
|
"declaration": {
|
|
693
706
|
"name": "*",
|
|
694
|
-
"package": "./
|
|
707
|
+
"package": "./sync"
|
|
708
|
+
}
|
|
709
|
+
},
|
|
710
|
+
{
|
|
711
|
+
"kind": "js",
|
|
712
|
+
"name": "*",
|
|
713
|
+
"declaration": {
|
|
714
|
+
"name": "*",
|
|
715
|
+
"package": "./when-else"
|
|
695
716
|
}
|
|
696
717
|
}
|
|
697
718
|
]
|
|
@@ -749,6 +770,21 @@
|
|
|
749
770
|
}
|
|
750
771
|
]
|
|
751
772
|
},
|
|
773
|
+
{
|
|
774
|
+
"kind": "javascript-module",
|
|
775
|
+
"path": "src/encoding/index.ts",
|
|
776
|
+
"declarations": [],
|
|
777
|
+
"exports": [
|
|
778
|
+
{
|
|
779
|
+
"kind": "js",
|
|
780
|
+
"name": "*",
|
|
781
|
+
"declaration": {
|
|
782
|
+
"name": "*",
|
|
783
|
+
"package": "./base64"
|
|
784
|
+
}
|
|
785
|
+
}
|
|
786
|
+
]
|
|
787
|
+
},
|
|
752
788
|
{
|
|
753
789
|
"kind": "javascript-module",
|
|
754
790
|
"path": "src/env/index.ts",
|
|
@@ -3063,6 +3099,14 @@
|
|
|
3063
3099
|
"name": "*",
|
|
3064
3100
|
"package": "./shortcut-events"
|
|
3065
3101
|
}
|
|
3102
|
+
},
|
|
3103
|
+
{
|
|
3104
|
+
"kind": "js",
|
|
3105
|
+
"name": "extractKeyFromCode",
|
|
3106
|
+
"declaration": {
|
|
3107
|
+
"name": "extractKeyFromCode",
|
|
3108
|
+
"module": "./shortcut-keyboard"
|
|
3109
|
+
}
|
|
3066
3110
|
}
|
|
3067
3111
|
]
|
|
3068
3112
|
},
|
|
@@ -3202,6 +3246,41 @@
|
|
|
3202
3246
|
}
|
|
3203
3247
|
]
|
|
3204
3248
|
},
|
|
3249
|
+
{
|
|
3250
|
+
"kind": "javascript-module",
|
|
3251
|
+
"path": "src/shortcut-manager/shortcut-keyboard.ts",
|
|
3252
|
+
"declarations": [
|
|
3253
|
+
{
|
|
3254
|
+
"kind": "function",
|
|
3255
|
+
"name": "extractKeyFromCode",
|
|
3256
|
+
"return": {
|
|
3257
|
+
"type": {
|
|
3258
|
+
"text": "string"
|
|
3259
|
+
}
|
|
3260
|
+
},
|
|
3261
|
+
"parameters": [
|
|
3262
|
+
{
|
|
3263
|
+
"name": "code",
|
|
3264
|
+
"type": {
|
|
3265
|
+
"text": "string"
|
|
3266
|
+
}
|
|
3267
|
+
}
|
|
3268
|
+
],
|
|
3269
|
+
"description": "Maps `KeyboardEvent.code` to the shortcut key string used by ShortcutManager.",
|
|
3270
|
+
"privacy": "public"
|
|
3271
|
+
}
|
|
3272
|
+
],
|
|
3273
|
+
"exports": [
|
|
3274
|
+
{
|
|
3275
|
+
"kind": "js",
|
|
3276
|
+
"name": "extractKeyFromCode",
|
|
3277
|
+
"declaration": {
|
|
3278
|
+
"name": "extractKeyFromCode",
|
|
3279
|
+
"module": "src/shortcut-manager/shortcut-keyboard.ts"
|
|
3280
|
+
}
|
|
3281
|
+
}
|
|
3282
|
+
]
|
|
3283
|
+
},
|
|
3205
3284
|
{
|
|
3206
3285
|
"kind": "javascript-module",
|
|
3207
3286
|
"path": "src/shortcut-manager/shortcut-listener.ts",
|
|
@@ -3259,34 +3338,6 @@
|
|
|
3259
3338
|
}
|
|
3260
3339
|
]
|
|
3261
3340
|
},
|
|
3262
|
-
{
|
|
3263
|
-
"kind": "method",
|
|
3264
|
-
"name": "extractKeyFromCode",
|
|
3265
|
-
"privacy": "private",
|
|
3266
|
-
"return": {
|
|
3267
|
-
"type": {
|
|
3268
|
-
"text": "string"
|
|
3269
|
-
}
|
|
3270
|
-
},
|
|
3271
|
-
"parameters": [
|
|
3272
|
-
{
|
|
3273
|
-
"name": "code",
|
|
3274
|
-
"type": {
|
|
3275
|
-
"text": "string"
|
|
3276
|
-
}
|
|
3277
|
-
}
|
|
3278
|
-
]
|
|
3279
|
-
},
|
|
3280
|
-
{
|
|
3281
|
-
"kind": "method",
|
|
3282
|
-
"name": "getDeepActiveElement",
|
|
3283
|
-
"privacy": "private",
|
|
3284
|
-
"return": {
|
|
3285
|
-
"type": {
|
|
3286
|
-
"text": "Element | null"
|
|
3287
|
-
}
|
|
3288
|
-
}
|
|
3289
|
-
},
|
|
3290
3341
|
{
|
|
3291
3342
|
"kind": "method",
|
|
3292
3343
|
"name": "getEventElement",
|
|
@@ -3304,54 +3355,6 @@
|
|
|
3304
3355
|
}
|
|
3305
3356
|
}
|
|
3306
3357
|
]
|
|
3307
|
-
},
|
|
3308
|
-
{
|
|
3309
|
-
"kind": "method",
|
|
3310
|
-
"name": "isEditableContext",
|
|
3311
|
-
"privacy": "private",
|
|
3312
|
-
"return": {
|
|
3313
|
-
"type": {
|
|
3314
|
-
"text": "boolean"
|
|
3315
|
-
}
|
|
3316
|
-
},
|
|
3317
|
-
"parameters": [
|
|
3318
|
-
{
|
|
3319
|
-
"name": "event",
|
|
3320
|
-
"type": {
|
|
3321
|
-
"text": "KeyboardEvent"
|
|
3322
|
-
}
|
|
3323
|
-
},
|
|
3324
|
-
{
|
|
3325
|
-
"name": "editableSelector",
|
|
3326
|
-
"type": {
|
|
3327
|
-
"text": "string"
|
|
3328
|
-
}
|
|
3329
|
-
}
|
|
3330
|
-
]
|
|
3331
|
-
},
|
|
3332
|
-
{
|
|
3333
|
-
"kind": "method",
|
|
3334
|
-
"name": "isInputElement",
|
|
3335
|
-
"privacy": "private",
|
|
3336
|
-
"return": {
|
|
3337
|
-
"type": {
|
|
3338
|
-
"text": "boolean"
|
|
3339
|
-
}
|
|
3340
|
-
},
|
|
3341
|
-
"parameters": [
|
|
3342
|
-
{
|
|
3343
|
-
"name": "element",
|
|
3344
|
-
"type": {
|
|
3345
|
-
"text": "HTMLElement | null"
|
|
3346
|
-
}
|
|
3347
|
-
},
|
|
3348
|
-
{
|
|
3349
|
-
"name": "editableSelector",
|
|
3350
|
-
"type": {
|
|
3351
|
-
"text": "string"
|
|
3352
|
-
}
|
|
3353
|
-
}
|
|
3354
|
-
]
|
|
3355
3358
|
}
|
|
3356
3359
|
],
|
|
3357
3360
|
"superclass": {
|
|
@@ -9,4 +9,16 @@ export declare const BASE_EDITABLE_ELEMENT_SELECTORS: readonly ["input", "textar
|
|
|
9
9
|
*/
|
|
10
10
|
export declare const DESIGN_SYSTEM_EDITABLE_ELEMENT_SELECTORS: Record<EditableDesignSystemPrefix, readonly string[]>;
|
|
11
11
|
export declare function buildEditableElementSelector(designSystems: readonly EditableDesignSystemPrefix[], customEditableSelectors?: readonly string[]): string;
|
|
12
|
+
/**
|
|
13
|
+
* Whether a keyboard event comes from an editable element, i.e. the user is typing.
|
|
14
|
+
* @remarks Checks the innermost event target (through shadow roots), then the deep active element.
|
|
15
|
+
* An element counts as editable when it is `contenteditable` or matches / is nested in an element
|
|
16
|
+
* matching `editableSelector`. Pass `shortcutManager.getEditableSelector()` to use the selector
|
|
17
|
+
* configured via `configureEditableContext`.
|
|
18
|
+
* @param event - The keyboard event.
|
|
19
|
+
* @param editableSelector - CSS selector for editable elements. Defaults to the base selectors plus
|
|
20
|
+
* rapid editable hosts.
|
|
21
|
+
* @public
|
|
22
|
+
*/
|
|
23
|
+
export declare function isEditableKeyboardEvent(event: KeyboardEvent, editableSelector?: string): boolean;
|
|
12
24
|
//# sourceMappingURL=editable-elements.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"editable-elements.d.ts","sourceRoot":"","sources":["../../../src/design-system/editable-elements.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,0BAA0B,GAAG,OAAO,GAAG,MAAM,CAAC;AAW1D;;;GAGG;AACH,eAAO,MAAM,+BAA+B,uKAIlC,CAAC;AAMX;;GAEG;AACH,eAAO,MAAM,wCAAwC,EAAE,MAAM,CAC3D,0BAA0B,EAC1B,SAAS,MAAM,EAAE,CAIlB,CAAC;AAEF,wBAAgB,4BAA4B,CAC1C,aAAa,EAAE,SAAS,0BAA0B,EAAE,EACpD,uBAAuB,GAAE,SAAS,MAAM,EAAO,GAC9C,MAAM,CASR"}
|
|
1
|
+
{"version":3,"file":"editable-elements.d.ts","sourceRoot":"","sources":["../../../src/design-system/editable-elements.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,0BAA0B,GAAG,OAAO,GAAG,MAAM,CAAC;AAW1D;;;GAGG;AACH,eAAO,MAAM,+BAA+B,uKAIlC,CAAC;AAMX;;GAEG;AACH,eAAO,MAAM,wCAAwC,EAAE,MAAM,CAC3D,0BAA0B,EAC1B,SAAS,MAAM,EAAE,CAIlB,CAAC;AAEF,wBAAgB,4BAA4B,CAC1C,aAAa,EAAE,SAAS,0BAA0B,EAAE,EACpD,uBAAuB,GAAE,SAAS,MAAM,EAAO,GAC9C,MAAM,CASR;AAsCD;;;;;;;;;;GAUG;AACH,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,aAAa,EACpB,gBAAgB,GAAE,MAA0C,GAC3D,OAAO,CAKT"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/shortcut-manager/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/shortcut-manager/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Maps `KeyboardEvent.code` to the shortcut key string used by ShortcutManager.
|
|
3
|
+
* @remarks Use with `ShortcutManager.findShortcutByKeyCombination(extractKeyFromCode(event.code), ...)`.
|
|
4
|
+
* @public
|
|
5
|
+
*/
|
|
6
|
+
export declare function extractKeyFromCode(code: string): string;
|
|
7
|
+
//# sourceMappingURL=shortcut-keyboard.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"shortcut-keyboard.d.ts","sourceRoot":"","sources":["../../../src/shortcut-manager/shortcut-keyboard.ts"],"names":[],"mappings":"AA8BA;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAiBvD"}
|
|
@@ -14,10 +14,6 @@ export declare class FoundationShortcutListener extends FASTElement {
|
|
|
14
14
|
private addKeyListener;
|
|
15
15
|
private removeKeyListener;
|
|
16
16
|
private handleKeyDown;
|
|
17
|
-
private extractKeyFromCode;
|
|
18
|
-
private getDeepActiveElement;
|
|
19
17
|
private getEventElement;
|
|
20
|
-
private isEditableContext;
|
|
21
|
-
private isInputElement;
|
|
22
18
|
}
|
|
23
19
|
//# sourceMappingURL=shortcut-listener.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shortcut-listener.d.ts","sourceRoot":"","sources":["../../../src/shortcut-manager/shortcut-listener.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,WAAW,EAAE,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"shortcut-listener.d.ts","sourceRoot":"","sources":["../../../src/shortcut-manager/shortcut-listener.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAKrE,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAErD;;;;GAIG;AACH,qBAGa,0BAA2B,SAAQ,WAAW;IAChC,eAAe,EAAE,eAAe,CAAC;IAE1D,OAAO,CAAC,WAAW,CAAiD;IACpE,OAAO,CAAC,WAAW,CAAS;IAE5B,iBAAiB;IAKjB,oBAAoB;IAKpB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,aAAa;IA6CrB,OAAO,CAAC,eAAe;CAKxB"}
|
|
@@ -28,3 +28,46 @@ export function buildEditableElementSelector(designSystems, customEditableSelect
|
|
|
28
28
|
const customSelectors = customEditableSelectors.filter(Boolean);
|
|
29
29
|
return Array.from(new Set([...BASE_EDITABLE_ELEMENT_SELECTORS, ...designSystemSelectors, ...customSelectors])).join(',');
|
|
30
30
|
}
|
|
31
|
+
const DEFAULT_EDITABLE_ELEMENT_SELECTOR = buildEditableElementSelector(['rapid']);
|
|
32
|
+
const ELEMENT_NODE = 1;
|
|
33
|
+
const isElement = (value) => (value === null || value === void 0 ? void 0 : value.nodeType) === ELEMENT_NODE;
|
|
34
|
+
function getEventElement(event) {
|
|
35
|
+
var _a, _b, _c;
|
|
36
|
+
const path = (_b = (_a = event.composedPath) === null || _a === void 0 ? void 0 : _a.call(event)) !== null && _b !== void 0 ? _b : [];
|
|
37
|
+
return (_c = path.find(isElement)) !== null && _c !== void 0 ? _c : (isElement(event.target) ? event.target : null);
|
|
38
|
+
}
|
|
39
|
+
function getDeepActiveElement() {
|
|
40
|
+
var _a, _b;
|
|
41
|
+
let active = (_a = document.activeElement) !== null && _a !== void 0 ? _a : null;
|
|
42
|
+
while ((_b = active === null || active === void 0 ? void 0 : active.shadowRoot) === null || _b === void 0 ? void 0 : _b.activeElement) {
|
|
43
|
+
active = active.shadowRoot.activeElement;
|
|
44
|
+
}
|
|
45
|
+
return active;
|
|
46
|
+
}
|
|
47
|
+
const isEditableAttributeValue = (value) => value !== null && value.toLowerCase() !== 'false';
|
|
48
|
+
function isEditableElement(element, editableSelector) {
|
|
49
|
+
if (!element)
|
|
50
|
+
return false;
|
|
51
|
+
if (isEditableAttributeValue(element.getAttribute('contenteditable')) ||
|
|
52
|
+
element.isContentEditable) {
|
|
53
|
+
return true;
|
|
54
|
+
}
|
|
55
|
+
if (!editableSelector)
|
|
56
|
+
return false;
|
|
57
|
+
return element.matches(editableSelector) || !!element.closest(editableSelector);
|
|
58
|
+
}
|
|
59
|
+
/**
|
|
60
|
+
* Whether a keyboard event comes from an editable element, i.e. the user is typing.
|
|
61
|
+
* @remarks Checks the innermost event target (through shadow roots), then the deep active element.
|
|
62
|
+
* An element counts as editable when it is `contenteditable` or matches / is nested in an element
|
|
63
|
+
* matching `editableSelector`. Pass `shortcutManager.getEditableSelector()` to use the selector
|
|
64
|
+
* configured via `configureEditableContext`.
|
|
65
|
+
* @param event - The keyboard event.
|
|
66
|
+
* @param editableSelector - CSS selector for editable elements. Defaults to the base selectors plus
|
|
67
|
+
* rapid editable hosts.
|
|
68
|
+
* @public
|
|
69
|
+
*/
|
|
70
|
+
export function isEditableKeyboardEvent(event, editableSelector = DEFAULT_EDITABLE_ELEMENT_SELECTOR) {
|
|
71
|
+
return (isEditableElement(getEventElement(event), editableSelector) ||
|
|
72
|
+
isEditableElement(getDeepActiveElement(), editableSelector));
|
|
73
|
+
}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
const specialKeyMap = {
|
|
2
|
+
Space: 'space',
|
|
3
|
+
Enter: 'enter',
|
|
4
|
+
Escape: 'escape',
|
|
5
|
+
Tab: 'tab',
|
|
6
|
+
Backspace: 'backspace',
|
|
7
|
+
Delete: 'delete',
|
|
8
|
+
Insert: 'insert',
|
|
9
|
+
Home: 'home',
|
|
10
|
+
End: 'end',
|
|
11
|
+
PageUp: 'pageup',
|
|
12
|
+
PageDown: 'pagedown',
|
|
13
|
+
ArrowUp: 'arrowup',
|
|
14
|
+
ArrowDown: 'arrowdown',
|
|
15
|
+
ArrowLeft: 'arrowleft',
|
|
16
|
+
ArrowRight: 'arrowright',
|
|
17
|
+
F1: 'f1',
|
|
18
|
+
F2: 'f2',
|
|
19
|
+
F3: 'f3',
|
|
20
|
+
F4: 'f4',
|
|
21
|
+
F5: 'f5',
|
|
22
|
+
F6: 'f6',
|
|
23
|
+
F7: 'f7',
|
|
24
|
+
F8: 'f8',
|
|
25
|
+
F9: 'f9',
|
|
26
|
+
F10: 'f10',
|
|
27
|
+
F11: 'f11',
|
|
28
|
+
F12: 'f12',
|
|
29
|
+
};
|
|
30
|
+
/**
|
|
31
|
+
* Maps `KeyboardEvent.code` to the shortcut key string used by ShortcutManager.
|
|
32
|
+
* @remarks Use with `ShortcutManager.findShortcutByKeyCombination(extractKeyFromCode(event.code), ...)`.
|
|
33
|
+
* @public
|
|
34
|
+
*/
|
|
35
|
+
export function extractKeyFromCode(code) {
|
|
36
|
+
if (!code) {
|
|
37
|
+
return '';
|
|
38
|
+
}
|
|
39
|
+
// Handle regular letter keys (KeyA, KeyB, etc.)
|
|
40
|
+
if (code.startsWith('Key')) {
|
|
41
|
+
return code.replace('Key', '').toLowerCase();
|
|
42
|
+
}
|
|
43
|
+
// Handle digit keys (Digit0, Digit1, etc.)
|
|
44
|
+
if (code.startsWith('Digit')) {
|
|
45
|
+
return code.replace('Digit', '');
|
|
46
|
+
}
|
|
47
|
+
// Handle special keys with direct mapping
|
|
48
|
+
return specialKeyMap[code] || code.toLowerCase();
|
|
49
|
+
}
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import { customElement, FASTElement } from '@microsoft/fast-element';
|
|
3
3
|
import { inject } from '@microsoft/fast-foundation';
|
|
4
|
+
import { isEditableKeyboardEvent } from '../design-system/editable-elements';
|
|
4
5
|
import { emitShortcutBlockedEvent } from './shortcut-events';
|
|
6
|
+
import { extractKeyFromCode } from './shortcut-keyboard';
|
|
5
7
|
import { ShortcutManager } from './shortcut-manager';
|
|
6
8
|
/**
|
|
7
9
|
* A custom element that listens for keyboard shortcuts.
|
|
@@ -44,13 +46,13 @@ let FoundationShortcutListener = class FoundationShortcutListener extends FASTEl
|
|
|
44
46
|
const eventTarget = (_a = this.getEventElement(event)) !== null && _a !== void 0 ? _a : this;
|
|
45
47
|
const hasModifier = event.ctrlKey || event.altKey || event.shiftKey || event.metaKey;
|
|
46
48
|
// Extract key from event.code with proper mapping for all key types
|
|
47
|
-
const key =
|
|
49
|
+
const key = extractKeyFromCode(event.code);
|
|
48
50
|
const shortcut = manager.findShortcutByKeyCombination(key, event.ctrlKey, event.altKey, event.shiftKey, event.metaKey);
|
|
49
51
|
if (!shortcut) {
|
|
50
52
|
return;
|
|
51
53
|
}
|
|
52
54
|
// Don't handle shortcuts while user is typing in editable fields.
|
|
53
|
-
if (
|
|
55
|
+
if (isEditableKeyboardEvent(event, editableSelector)) {
|
|
54
56
|
if (hasModifier && shortcut.emitBlockedEvent !== false) {
|
|
55
57
|
emitShortcutBlockedEvent({
|
|
56
58
|
shortcutId: shortcut.id,
|
|
@@ -67,79 +69,12 @@ let FoundationShortcutListener = class FoundationShortcutListener extends FASTEl
|
|
|
67
69
|
manager.executeShortcut(shortcut.id, eventTarget);
|
|
68
70
|
}
|
|
69
71
|
}
|
|
70
|
-
extractKeyFromCode(code) {
|
|
71
|
-
// Handle regular letter keys (KeyA, KeyB, etc.)
|
|
72
|
-
if (code.startsWith('Key')) {
|
|
73
|
-
return code.replace('Key', '').toLowerCase();
|
|
74
|
-
}
|
|
75
|
-
// Handle digit keys (Digit0, Digit1, etc.)
|
|
76
|
-
if (code.startsWith('Digit')) {
|
|
77
|
-
return code.replace('Digit', '');
|
|
78
|
-
}
|
|
79
|
-
// Handle special keys with direct mapping
|
|
80
|
-
const specialKeyMap = {
|
|
81
|
-
Space: 'space',
|
|
82
|
-
Enter: 'enter',
|
|
83
|
-
Escape: 'escape',
|
|
84
|
-
Tab: 'tab',
|
|
85
|
-
Backspace: 'backspace',
|
|
86
|
-
Delete: 'delete',
|
|
87
|
-
Insert: 'insert',
|
|
88
|
-
Home: 'home',
|
|
89
|
-
End: 'end',
|
|
90
|
-
PageUp: 'pageup',
|
|
91
|
-
PageDown: 'pagedown',
|
|
92
|
-
ArrowUp: 'arrowup',
|
|
93
|
-
ArrowDown: 'arrowdown',
|
|
94
|
-
ArrowLeft: 'arrowleft',
|
|
95
|
-
ArrowRight: 'arrowright',
|
|
96
|
-
F1: 'f1',
|
|
97
|
-
F2: 'f2',
|
|
98
|
-
F3: 'f3',
|
|
99
|
-
F4: 'f4',
|
|
100
|
-
F5: 'f5',
|
|
101
|
-
F6: 'f6',
|
|
102
|
-
F7: 'f7',
|
|
103
|
-
F8: 'f8',
|
|
104
|
-
F9: 'f9',
|
|
105
|
-
F10: 'f10',
|
|
106
|
-
F11: 'f11',
|
|
107
|
-
F12: 'f12',
|
|
108
|
-
};
|
|
109
|
-
return specialKeyMap[code] || code.toLowerCase();
|
|
110
|
-
}
|
|
111
|
-
getDeepActiveElement() {
|
|
112
|
-
var _a, _b;
|
|
113
|
-
let active = (_a = document.activeElement) !== null && _a !== void 0 ? _a : null;
|
|
114
|
-
while ((_b = active === null || active === void 0 ? void 0 : active.shadowRoot) === null || _b === void 0 ? void 0 : _b.activeElement) {
|
|
115
|
-
active = active.shadowRoot.activeElement;
|
|
116
|
-
}
|
|
117
|
-
return active;
|
|
118
|
-
}
|
|
119
72
|
getEventElement(event) {
|
|
120
73
|
var _a, _b, _c;
|
|
121
74
|
const path = (_b = (_a = event.composedPath) === null || _a === void 0 ? void 0 : _a.call(event)) !== null && _b !== void 0 ? _b : [];
|
|
122
75
|
const fromPath = path.find((entry) => entry instanceof Element);
|
|
123
76
|
return (_c = fromPath !== null && fromPath !== void 0 ? fromPath : event.target) !== null && _c !== void 0 ? _c : null;
|
|
124
77
|
}
|
|
125
|
-
isEditableContext(event, editableSelector) {
|
|
126
|
-
const eventElement = this.getEventElement(event);
|
|
127
|
-
if (eventElement && this.isInputElement(eventElement, editableSelector)) {
|
|
128
|
-
return true;
|
|
129
|
-
}
|
|
130
|
-
return this.isInputElement(this.getDeepActiveElement(), editableSelector);
|
|
131
|
-
}
|
|
132
|
-
isInputElement(element, editableSelector) {
|
|
133
|
-
if (!element)
|
|
134
|
-
return false;
|
|
135
|
-
const isEditableContent = (value) => value !== null && value !== undefined && value.toLowerCase() !== 'false';
|
|
136
|
-
if (isEditableContent(element.getAttribute('contenteditable')) || element.isContentEditable) {
|
|
137
|
-
return true;
|
|
138
|
-
}
|
|
139
|
-
if (!editableSelector)
|
|
140
|
-
return false;
|
|
141
|
-
return element.matches(editableSelector) || !!element.closest(editableSelector);
|
|
142
|
-
}
|
|
143
78
|
};
|
|
144
79
|
__decorate([
|
|
145
80
|
inject(ShortcutManager)
|
|
@@ -6930,6 +6930,51 @@
|
|
|
6930
6930
|
"endIndex": 2
|
|
6931
6931
|
}
|
|
6932
6932
|
},
|
|
6933
|
+
{
|
|
6934
|
+
"kind": "Function",
|
|
6935
|
+
"canonicalReference": "@genesislcap/foundation-utils!extractKeyFromCode:function(1)",
|
|
6936
|
+
"docComment": "/**\n * Maps `KeyboardEvent.code` to the shortcut key string used by ShortcutManager.\n *\n * @remarks\n *\n * Use with `ShortcutManager.findShortcutByKeyCombination(extractKeyFromCode(event.code), ...)`.\n *\n * @public\n */\n",
|
|
6937
|
+
"excerptTokens": [
|
|
6938
|
+
{
|
|
6939
|
+
"kind": "Content",
|
|
6940
|
+
"text": "export declare function extractKeyFromCode(code: "
|
|
6941
|
+
},
|
|
6942
|
+
{
|
|
6943
|
+
"kind": "Content",
|
|
6944
|
+
"text": "string"
|
|
6945
|
+
},
|
|
6946
|
+
{
|
|
6947
|
+
"kind": "Content",
|
|
6948
|
+
"text": "): "
|
|
6949
|
+
},
|
|
6950
|
+
{
|
|
6951
|
+
"kind": "Content",
|
|
6952
|
+
"text": "string"
|
|
6953
|
+
},
|
|
6954
|
+
{
|
|
6955
|
+
"kind": "Content",
|
|
6956
|
+
"text": ";"
|
|
6957
|
+
}
|
|
6958
|
+
],
|
|
6959
|
+
"fileUrlPath": "src/shortcut-manager/shortcut-keyboard.ts",
|
|
6960
|
+
"returnTypeTokenRange": {
|
|
6961
|
+
"startIndex": 3,
|
|
6962
|
+
"endIndex": 4
|
|
6963
|
+
},
|
|
6964
|
+
"releaseTag": "Public",
|
|
6965
|
+
"overloadIndex": 1,
|
|
6966
|
+
"parameters": [
|
|
6967
|
+
{
|
|
6968
|
+
"parameterName": "code",
|
|
6969
|
+
"parameterTypeTokenRange": {
|
|
6970
|
+
"startIndex": 1,
|
|
6971
|
+
"endIndex": 2
|
|
6972
|
+
},
|
|
6973
|
+
"isOptional": false
|
|
6974
|
+
}
|
|
6975
|
+
],
|
|
6976
|
+
"name": "extractKeyFromCode"
|
|
6977
|
+
},
|
|
6933
6978
|
{
|
|
6934
6979
|
"kind": "Enum",
|
|
6935
6980
|
"canonicalReference": "@genesislcap/foundation-utils!FontStyle:enum",
|
|
@@ -10134,6 +10179,68 @@
|
|
|
10134
10179
|
"parameters": [],
|
|
10135
10180
|
"name": "isDev"
|
|
10136
10181
|
},
|
|
10182
|
+
{
|
|
10183
|
+
"kind": "Function",
|
|
10184
|
+
"canonicalReference": "@genesislcap/foundation-utils!isEditableKeyboardEvent:function(1)",
|
|
10185
|
+
"docComment": "/**\n * Whether a keyboard event comes from an editable element, i.e. the user is typing.\n *\n * @remarks\n *\n * Checks the innermost event target (through shadow roots), then the deep active element. An element counts as editable when it is `contenteditable` or matches / is nested in an element matching `editableSelector`. Pass `shortcutManager.getEditableSelector()` to use the selector configured via `configureEditableContext`.\n *\n * @param event - The keyboard event.\n *\n * @param editableSelector - CSS selector for editable elements. Defaults to the base selectors plus rapid editable hosts.\n *\n * @public\n */\n",
|
|
10186
|
+
"excerptTokens": [
|
|
10187
|
+
{
|
|
10188
|
+
"kind": "Content",
|
|
10189
|
+
"text": "export declare function isEditableKeyboardEvent(event: "
|
|
10190
|
+
},
|
|
10191
|
+
{
|
|
10192
|
+
"kind": "Reference",
|
|
10193
|
+
"text": "KeyboardEvent",
|
|
10194
|
+
"canonicalReference": "!KeyboardEvent:interface"
|
|
10195
|
+
},
|
|
10196
|
+
{
|
|
10197
|
+
"kind": "Content",
|
|
10198
|
+
"text": ", editableSelector?: "
|
|
10199
|
+
},
|
|
10200
|
+
{
|
|
10201
|
+
"kind": "Content",
|
|
10202
|
+
"text": "string"
|
|
10203
|
+
},
|
|
10204
|
+
{
|
|
10205
|
+
"kind": "Content",
|
|
10206
|
+
"text": "): "
|
|
10207
|
+
},
|
|
10208
|
+
{
|
|
10209
|
+
"kind": "Content",
|
|
10210
|
+
"text": "boolean"
|
|
10211
|
+
},
|
|
10212
|
+
{
|
|
10213
|
+
"kind": "Content",
|
|
10214
|
+
"text": ";"
|
|
10215
|
+
}
|
|
10216
|
+
],
|
|
10217
|
+
"fileUrlPath": "src/design-system/editable-elements.ts",
|
|
10218
|
+
"returnTypeTokenRange": {
|
|
10219
|
+
"startIndex": 5,
|
|
10220
|
+
"endIndex": 6
|
|
10221
|
+
},
|
|
10222
|
+
"releaseTag": "Public",
|
|
10223
|
+
"overloadIndex": 1,
|
|
10224
|
+
"parameters": [
|
|
10225
|
+
{
|
|
10226
|
+
"parameterName": "event",
|
|
10227
|
+
"parameterTypeTokenRange": {
|
|
10228
|
+
"startIndex": 1,
|
|
10229
|
+
"endIndex": 2
|
|
10230
|
+
},
|
|
10231
|
+
"isOptional": false
|
|
10232
|
+
},
|
|
10233
|
+
{
|
|
10234
|
+
"parameterName": "editableSelector",
|
|
10235
|
+
"parameterTypeTokenRange": {
|
|
10236
|
+
"startIndex": 3,
|
|
10237
|
+
"endIndex": 4
|
|
10238
|
+
},
|
|
10239
|
+
"isOptional": true
|
|
10240
|
+
}
|
|
10241
|
+
],
|
|
10242
|
+
"name": "isEditableKeyboardEvent"
|
|
10243
|
+
},
|
|
10137
10244
|
{
|
|
10138
10245
|
"kind": "Function",
|
|
10139
10246
|
"canonicalReference": "@genesislcap/foundation-utils!isFeatureActivated:function(1)",
|
|
@@ -761,6 +761,13 @@ declare type EventListener_2<T = any> = (data: T) => void;
|
|
|
761
761
|
*/
|
|
762
762
|
export declare type EventName = 'input' | 'change' | 'default';
|
|
763
763
|
|
|
764
|
+
/**
|
|
765
|
+
* Maps `KeyboardEvent.code` to the shortcut key string used by ShortcutManager.
|
|
766
|
+
* @remarks Use with `ShortcutManager.findShortcutByKeyCombination(extractKeyFromCode(event.code), ...)`.
|
|
767
|
+
* @public
|
|
768
|
+
*/
|
|
769
|
+
export declare function extractKeyFromCode(code: string): string;
|
|
770
|
+
|
|
764
771
|
/**
|
|
765
772
|
* An enum of possible font styles.
|
|
766
773
|
* @public
|
|
@@ -856,11 +863,7 @@ export declare class FoundationShortcutListener extends FASTElement {
|
|
|
856
863
|
private addKeyListener;
|
|
857
864
|
private removeKeyListener;
|
|
858
865
|
private handleKeyDown;
|
|
859
|
-
private extractKeyFromCode;
|
|
860
|
-
private getDeepActiveElement;
|
|
861
866
|
private getEventElement;
|
|
862
|
-
private isEditableContext;
|
|
863
|
-
private isInputElement;
|
|
864
867
|
}
|
|
865
868
|
|
|
866
869
|
/** @public */
|
|
@@ -1112,6 +1115,19 @@ export declare const inSymphonyDesktop: () => boolean;
|
|
|
1112
1115
|
*/
|
|
1113
1116
|
export declare const isDev: () => boolean;
|
|
1114
1117
|
|
|
1118
|
+
/**
|
|
1119
|
+
* Whether a keyboard event comes from an editable element, i.e. the user is typing.
|
|
1120
|
+
* @remarks Checks the innermost event target (through shadow roots), then the deep active element.
|
|
1121
|
+
* An element counts as editable when it is `contenteditable` or matches / is nested in an element
|
|
1122
|
+
* matching `editableSelector`. Pass `shortcutManager.getEditableSelector()` to use the selector
|
|
1123
|
+
* configured via `configureEditableContext`.
|
|
1124
|
+
* @param event - The keyboard event.
|
|
1125
|
+
* @param editableSelector - CSS selector for editable elements. Defaults to the base selectors plus
|
|
1126
|
+
* rapid editable hosts.
|
|
1127
|
+
* @public
|
|
1128
|
+
*/
|
|
1129
|
+
export declare function isEditableKeyboardEvent(event: KeyboardEvent, editableSelector?: string): boolean;
|
|
1130
|
+
|
|
1115
1131
|
/**
|
|
1116
1132
|
* Returns true when `feature.<name>` is present in the current URL query string.
|
|
1117
1133
|
* @public
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@genesislcap/foundation-utils",
|
|
3
3
|
"description": "Genesis Foundation Utils",
|
|
4
|
-
"version": "15.
|
|
4
|
+
"version": "15.72.0-FUI-2629.7",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"license": "SEE LICENSE IN license.txt",
|
|
7
7
|
"main": "dist/esm/index.js",
|
|
@@ -29,17 +29,17 @@
|
|
|
29
29
|
}
|
|
30
30
|
},
|
|
31
31
|
"devDependencies": {
|
|
32
|
-
"@genesislcap/foundation-testing": "15.
|
|
33
|
-
"@genesislcap/genx": "15.
|
|
34
|
-
"@genesislcap/ts-builder": "15.
|
|
35
|
-
"@genesislcap/uvu-playwright-builder": "15.
|
|
36
|
-
"@genesislcap/vite-builder": "15.
|
|
37
|
-
"@genesislcap/webpack-builder": "15.
|
|
32
|
+
"@genesislcap/foundation-testing": "15.72.0-FUI-2629.7",
|
|
33
|
+
"@genesislcap/genx": "15.72.0-FUI-2629.7",
|
|
34
|
+
"@genesislcap/ts-builder": "15.72.0-FUI-2629.7",
|
|
35
|
+
"@genesislcap/uvu-playwright-builder": "15.72.0-FUI-2629.7",
|
|
36
|
+
"@genesislcap/vite-builder": "15.72.0-FUI-2629.7",
|
|
37
|
+
"@genesislcap/webpack-builder": "15.72.0-FUI-2629.7",
|
|
38
38
|
"@types/json-schema": "^7.0.11"
|
|
39
39
|
},
|
|
40
40
|
"dependencies": {
|
|
41
|
-
"@genesislcap/expression-builder": "15.
|
|
42
|
-
"@genesislcap/foundation-logger": "15.
|
|
41
|
+
"@genesislcap/expression-builder": "15.72.0-FUI-2629.7",
|
|
42
|
+
"@genesislcap/foundation-logger": "15.72.0-FUI-2629.7",
|
|
43
43
|
"@microsoft/fast-components": "2.30.6",
|
|
44
44
|
"@microsoft/fast-element": "1.14.0",
|
|
45
45
|
"@microsoft/fast-foundation": "2.50.0",
|