@genesislcap/foundation-utils 14.274.0 → 14.275.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 +145 -110
- package/dist/dts/design-system/design-system.d.ts +15 -0
- package/dist/dts/design-system/design-system.d.ts.map +1 -1
- package/dist/esm/design-system/design-system.js +179 -0
- package/dist/foundation-utils.api.json +62 -0
- package/dist/foundation-utils.d.ts +16 -0
- package/docs/api/foundation-utils.getcurrentdesignsystemprefix.md +35 -0
- package/docs/api/foundation-utils.md +1 -0
- package/docs/api-report.md +3 -0
- package/package.json +10 -10
|
@@ -367,6 +367,91 @@
|
|
|
367
367
|
}
|
|
368
368
|
]
|
|
369
369
|
},
|
|
370
|
+
{
|
|
371
|
+
"kind": "javascript-module",
|
|
372
|
+
"path": "src/design-system/design-system.ts",
|
|
373
|
+
"declarations": [
|
|
374
|
+
{
|
|
375
|
+
"kind": "function",
|
|
376
|
+
"name": "assureDesignSystem",
|
|
377
|
+
"return": {
|
|
378
|
+
"type": {
|
|
379
|
+
"text": "DesignSystemModule"
|
|
380
|
+
}
|
|
381
|
+
},
|
|
382
|
+
"parameters": [
|
|
383
|
+
{
|
|
384
|
+
"name": "module",
|
|
385
|
+
"type": {
|
|
386
|
+
"text": "DesignSystemModule"
|
|
387
|
+
}
|
|
388
|
+
}
|
|
389
|
+
],
|
|
390
|
+
"description": "assureDesignSystem.",
|
|
391
|
+
"privacy": "public"
|
|
392
|
+
},
|
|
393
|
+
{
|
|
394
|
+
"kind": "function",
|
|
395
|
+
"name": "getCurrentDesignSystemPrefix",
|
|
396
|
+
"return": {
|
|
397
|
+
"type": {
|
|
398
|
+
"text": ""
|
|
399
|
+
}
|
|
400
|
+
},
|
|
401
|
+
"parameters": [
|
|
402
|
+
{
|
|
403
|
+
"name": "element",
|
|
404
|
+
"type": {
|
|
405
|
+
"text": "HTMLElement"
|
|
406
|
+
},
|
|
407
|
+
"description": "The starting HTML element"
|
|
408
|
+
},
|
|
409
|
+
{
|
|
410
|
+
"name": "fallbackPrefix",
|
|
411
|
+
"type": {
|
|
412
|
+
"text": "string"
|
|
413
|
+
},
|
|
414
|
+
"description": "The prefix to fallback to if the provider is not available"
|
|
415
|
+
}
|
|
416
|
+
],
|
|
417
|
+
"description": "Get the current design system prefix by checking available providers.\nIf no provider is found, falls back to the provided prefix.",
|
|
418
|
+
"privacy": "public"
|
|
419
|
+
}
|
|
420
|
+
],
|
|
421
|
+
"exports": [
|
|
422
|
+
{
|
|
423
|
+
"kind": "js",
|
|
424
|
+
"name": "assureDesignSystem",
|
|
425
|
+
"declaration": {
|
|
426
|
+
"name": "assureDesignSystem",
|
|
427
|
+
"module": "src/design-system/design-system.ts"
|
|
428
|
+
}
|
|
429
|
+
},
|
|
430
|
+
{
|
|
431
|
+
"kind": "js",
|
|
432
|
+
"name": "getCurrentDesignSystemPrefix",
|
|
433
|
+
"declaration": {
|
|
434
|
+
"name": "getCurrentDesignSystemPrefix",
|
|
435
|
+
"module": "src/design-system/design-system.ts"
|
|
436
|
+
}
|
|
437
|
+
}
|
|
438
|
+
]
|
|
439
|
+
},
|
|
440
|
+
{
|
|
441
|
+
"kind": "javascript-module",
|
|
442
|
+
"path": "src/design-system/index.ts",
|
|
443
|
+
"declarations": [],
|
|
444
|
+
"exports": [
|
|
445
|
+
{
|
|
446
|
+
"kind": "js",
|
|
447
|
+
"name": "*",
|
|
448
|
+
"declaration": {
|
|
449
|
+
"name": "*",
|
|
450
|
+
"package": "./design-system"
|
|
451
|
+
}
|
|
452
|
+
}
|
|
453
|
+
]
|
|
454
|
+
},
|
|
370
455
|
{
|
|
371
456
|
"kind": "javascript-module",
|
|
372
457
|
"path": "src/decorators/index.ts",
|
|
@@ -458,56 +543,6 @@
|
|
|
458
543
|
}
|
|
459
544
|
]
|
|
460
545
|
},
|
|
461
|
-
{
|
|
462
|
-
"kind": "javascript-module",
|
|
463
|
-
"path": "src/design-system/design-system.ts",
|
|
464
|
-
"declarations": [
|
|
465
|
-
{
|
|
466
|
-
"kind": "function",
|
|
467
|
-
"name": "assureDesignSystem",
|
|
468
|
-
"return": {
|
|
469
|
-
"type": {
|
|
470
|
-
"text": "DesignSystemModule"
|
|
471
|
-
}
|
|
472
|
-
},
|
|
473
|
-
"parameters": [
|
|
474
|
-
{
|
|
475
|
-
"name": "module",
|
|
476
|
-
"type": {
|
|
477
|
-
"text": "DesignSystemModule"
|
|
478
|
-
}
|
|
479
|
-
}
|
|
480
|
-
],
|
|
481
|
-
"description": "assureDesignSystem.",
|
|
482
|
-
"privacy": "public"
|
|
483
|
-
}
|
|
484
|
-
],
|
|
485
|
-
"exports": [
|
|
486
|
-
{
|
|
487
|
-
"kind": "js",
|
|
488
|
-
"name": "assureDesignSystem",
|
|
489
|
-
"declaration": {
|
|
490
|
-
"name": "assureDesignSystem",
|
|
491
|
-
"module": "src/design-system/design-system.ts"
|
|
492
|
-
}
|
|
493
|
-
}
|
|
494
|
-
]
|
|
495
|
-
},
|
|
496
|
-
{
|
|
497
|
-
"kind": "javascript-module",
|
|
498
|
-
"path": "src/design-system/index.ts",
|
|
499
|
-
"declarations": [],
|
|
500
|
-
"exports": [
|
|
501
|
-
{
|
|
502
|
-
"kind": "js",
|
|
503
|
-
"name": "*",
|
|
504
|
-
"declaration": {
|
|
505
|
-
"name": "*",
|
|
506
|
-
"package": "./design-system"
|
|
507
|
-
}
|
|
508
|
-
}
|
|
509
|
-
]
|
|
510
|
-
},
|
|
511
546
|
{
|
|
512
547
|
"kind": "javascript-module",
|
|
513
548
|
"path": "src/env/index.ts",
|
|
@@ -2446,7 +2481,7 @@
|
|
|
2446
2481
|
},
|
|
2447
2482
|
{
|
|
2448
2483
|
"kind": "javascript-module",
|
|
2449
|
-
"path": "src/directives/
|
|
2484
|
+
"path": "src/directives/sync/index.ts",
|
|
2450
2485
|
"declarations": [],
|
|
2451
2486
|
"exports": [
|
|
2452
2487
|
{
|
|
@@ -2454,18 +2489,28 @@
|
|
|
2454
2489
|
"name": "*",
|
|
2455
2490
|
"declaration": {
|
|
2456
2491
|
"name": "*",
|
|
2457
|
-
"package": "./
|
|
2492
|
+
"package": "./sync"
|
|
2458
2493
|
}
|
|
2459
2494
|
}
|
|
2460
2495
|
]
|
|
2461
2496
|
},
|
|
2462
2497
|
{
|
|
2463
2498
|
"kind": "javascript-module",
|
|
2464
|
-
"path": "src/directives/
|
|
2499
|
+
"path": "src/directives/sync/sync.ts",
|
|
2465
2500
|
"declarations": [
|
|
2501
|
+
{
|
|
2502
|
+
"kind": "variable",
|
|
2503
|
+
"name": "defaultEventMap",
|
|
2504
|
+
"type": {
|
|
2505
|
+
"text": "Map<string, EventName>"
|
|
2506
|
+
},
|
|
2507
|
+
"default": "new Map([\n ['FAST-TEXT-AREA', 'input'],\n ['FAST-TEXT-FIELD', 'input'],\n ['FOUNDATION-TEXT-AREA', 'input'],\n ['FOUNDATION-TEXT-FIELD', 'input'],\n ['INPUT', 'input'],\n ['ZERO-TEXT-FIELD', 'input'],\n])",
|
|
2508
|
+
"description": "A map that associates specific HTML element tags with their corresponding default event names.",
|
|
2509
|
+
"privacy": "public"
|
|
2510
|
+
},
|
|
2466
2511
|
{
|
|
2467
2512
|
"kind": "function",
|
|
2468
|
-
"name": "
|
|
2513
|
+
"name": "sync",
|
|
2469
2514
|
"return": {
|
|
2470
2515
|
"type": {
|
|
2471
2516
|
"text": "CaptureType<TSource>"
|
|
@@ -2476,42 +2521,56 @@
|
|
|
2476
2521
|
"name": "binding",
|
|
2477
2522
|
"type": {
|
|
2478
2523
|
"text": "Binding<TSource, TReturn>"
|
|
2479
|
-
}
|
|
2480
|
-
"description": "The condition to test for rendering."
|
|
2524
|
+
}
|
|
2481
2525
|
},
|
|
2482
2526
|
{
|
|
2483
|
-
"name": "
|
|
2527
|
+
"name": "conversionType",
|
|
2528
|
+
"default": "'string'",
|
|
2484
2529
|
"type": {
|
|
2485
|
-
"text": "
|
|
2486
|
-
}
|
|
2487
|
-
"description": "The template or a binding that gets the template to render when the condition is true."
|
|
2530
|
+
"text": "ConversionType"
|
|
2531
|
+
}
|
|
2488
2532
|
},
|
|
2489
2533
|
{
|
|
2490
|
-
"name": "
|
|
2534
|
+
"name": "eventName",
|
|
2535
|
+
"default": "'default'",
|
|
2491
2536
|
"type": {
|
|
2492
|
-
"text": "
|
|
2493
|
-
}
|
|
2494
|
-
|
|
2537
|
+
"text": "EventName"
|
|
2538
|
+
}
|
|
2539
|
+
},
|
|
2540
|
+
{
|
|
2541
|
+
"name": "keyAttr",
|
|
2542
|
+
"optional": true,
|
|
2543
|
+
"type": {
|
|
2544
|
+
"text": "string"
|
|
2545
|
+
}
|
|
2495
2546
|
}
|
|
2496
2547
|
],
|
|
2497
|
-
"description": "
|
|
2548
|
+
"description": "Creates a synchronization directive that binds a data source to an HTML element,",
|
|
2498
2549
|
"privacy": "public"
|
|
2499
2550
|
}
|
|
2500
2551
|
],
|
|
2501
2552
|
"exports": [
|
|
2502
2553
|
{
|
|
2503
2554
|
"kind": "js",
|
|
2504
|
-
"name": "
|
|
2555
|
+
"name": "defaultEventMap",
|
|
2505
2556
|
"declaration": {
|
|
2506
|
-
"name": "
|
|
2507
|
-
"module": "src/directives/
|
|
2557
|
+
"name": "defaultEventMap",
|
|
2558
|
+
"module": "src/directives/sync/sync.ts"
|
|
2559
|
+
}
|
|
2560
|
+
},
|
|
2561
|
+
{
|
|
2562
|
+
"kind": "js",
|
|
2563
|
+
"name": "sync",
|
|
2564
|
+
"declaration": {
|
|
2565
|
+
"name": "sync",
|
|
2566
|
+
"module": "src/directives/sync/sync.ts"
|
|
2508
2567
|
}
|
|
2509
2568
|
}
|
|
2510
2569
|
]
|
|
2511
2570
|
},
|
|
2512
2571
|
{
|
|
2513
2572
|
"kind": "javascript-module",
|
|
2514
|
-
"path": "src/directives/
|
|
2573
|
+
"path": "src/directives/when-else/index.ts",
|
|
2515
2574
|
"declarations": [],
|
|
2516
2575
|
"exports": [
|
|
2517
2576
|
{
|
|
@@ -2519,28 +2578,18 @@
|
|
|
2519
2578
|
"name": "*",
|
|
2520
2579
|
"declaration": {
|
|
2521
2580
|
"name": "*",
|
|
2522
|
-
"package": "./
|
|
2581
|
+
"package": "./when-else"
|
|
2523
2582
|
}
|
|
2524
2583
|
}
|
|
2525
2584
|
]
|
|
2526
2585
|
},
|
|
2527
2586
|
{
|
|
2528
2587
|
"kind": "javascript-module",
|
|
2529
|
-
"path": "src/directives/
|
|
2588
|
+
"path": "src/directives/when-else/when-else.ts",
|
|
2530
2589
|
"declarations": [
|
|
2531
|
-
{
|
|
2532
|
-
"kind": "variable",
|
|
2533
|
-
"name": "defaultEventMap",
|
|
2534
|
-
"type": {
|
|
2535
|
-
"text": "Map<string, EventName>"
|
|
2536
|
-
},
|
|
2537
|
-
"default": "new Map([\n ['FAST-TEXT-AREA', 'input'],\n ['FAST-TEXT-FIELD', 'input'],\n ['FOUNDATION-TEXT-AREA', 'input'],\n ['FOUNDATION-TEXT-FIELD', 'input'],\n ['INPUT', 'input'],\n ['ZERO-TEXT-FIELD', 'input'],\n])",
|
|
2538
|
-
"description": "A map that associates specific HTML element tags with their corresponding default event names.",
|
|
2539
|
-
"privacy": "public"
|
|
2540
|
-
},
|
|
2541
2590
|
{
|
|
2542
2591
|
"kind": "function",
|
|
2543
|
-
"name": "
|
|
2592
|
+
"name": "whenElse",
|
|
2544
2593
|
"return": {
|
|
2545
2594
|
"type": {
|
|
2546
2595
|
"text": "CaptureType<TSource>"
|
|
@@ -2551,49 +2600,35 @@
|
|
|
2551
2600
|
"name": "binding",
|
|
2552
2601
|
"type": {
|
|
2553
2602
|
"text": "Binding<TSource, TReturn>"
|
|
2554
|
-
}
|
|
2555
|
-
|
|
2556
|
-
{
|
|
2557
|
-
"name": "conversionType",
|
|
2558
|
-
"default": "'string'",
|
|
2559
|
-
"type": {
|
|
2560
|
-
"text": "ConversionType"
|
|
2561
|
-
}
|
|
2603
|
+
},
|
|
2604
|
+
"description": "The condition to test for rendering."
|
|
2562
2605
|
},
|
|
2563
2606
|
{
|
|
2564
|
-
"name": "
|
|
2565
|
-
"default": "'default'",
|
|
2607
|
+
"name": "trueTemplateOrTemplateBinding",
|
|
2566
2608
|
"type": {
|
|
2567
|
-
"text": "
|
|
2568
|
-
}
|
|
2609
|
+
"text": "WhenTemplate<TSource>"
|
|
2610
|
+
},
|
|
2611
|
+
"description": "The template or a binding that gets the template to render when the condition is true."
|
|
2569
2612
|
},
|
|
2570
2613
|
{
|
|
2571
|
-
"name": "
|
|
2572
|
-
"optional": true,
|
|
2614
|
+
"name": "falseTemplateOrTemplateBinding",
|
|
2573
2615
|
"type": {
|
|
2574
|
-
"text": "
|
|
2575
|
-
}
|
|
2616
|
+
"text": "WhenTemplate<TSource>"
|
|
2617
|
+
},
|
|
2618
|
+
"description": "The template or a binding that gets the template to render when the condition is false."
|
|
2576
2619
|
}
|
|
2577
2620
|
],
|
|
2578
|
-
"description": "
|
|
2621
|
+
"description": "Directive that allows supplying an \"else\" template to the traditional https://www.fast.design/docs/api/fast-element.when/#when-function directive",
|
|
2579
2622
|
"privacy": "public"
|
|
2580
2623
|
}
|
|
2581
2624
|
],
|
|
2582
2625
|
"exports": [
|
|
2583
2626
|
{
|
|
2584
2627
|
"kind": "js",
|
|
2585
|
-
"name": "
|
|
2586
|
-
"declaration": {
|
|
2587
|
-
"name": "defaultEventMap",
|
|
2588
|
-
"module": "src/directives/sync/sync.ts"
|
|
2589
|
-
}
|
|
2590
|
-
},
|
|
2591
|
-
{
|
|
2592
|
-
"kind": "js",
|
|
2593
|
-
"name": "sync",
|
|
2628
|
+
"name": "whenElse",
|
|
2594
2629
|
"declaration": {
|
|
2595
|
-
"name": "
|
|
2596
|
-
"module": "src/directives/
|
|
2630
|
+
"name": "whenElse",
|
|
2631
|
+
"module": "src/directives/when-else/when-else.ts"
|
|
2597
2632
|
}
|
|
2598
2633
|
}
|
|
2599
2634
|
]
|
|
@@ -51,4 +51,19 @@ export type DesignSystemResource<T = DesignSystemModule> = Promise<T>;
|
|
|
51
51
|
* @public
|
|
52
52
|
*/
|
|
53
53
|
export declare function assureDesignSystem(module: DesignSystemModule): DesignSystemModule;
|
|
54
|
+
/**
|
|
55
|
+
* Get the current design system prefix by checking available providers.
|
|
56
|
+
* If no provider is found, falls back to the provided prefix.
|
|
57
|
+
* @param element - The starting HTML element
|
|
58
|
+
* @param fallbackPrefix - The prefix to fallback to if the provider is not available
|
|
59
|
+
* @returns The current design system prefix
|
|
60
|
+
*
|
|
61
|
+
* @example
|
|
62
|
+
* ```ts
|
|
63
|
+
* const prefix = getCurrentDesignSystemPrefix(myElement, 'default-prefix');
|
|
64
|
+
* logger.debug(prefix); // e.g., 'rapid' or 'default-prefix'
|
|
65
|
+
* ```
|
|
66
|
+
* @public
|
|
67
|
+
*/
|
|
68
|
+
export declare function getCurrentDesignSystemPrefix(element: HTMLElement, fallbackPrefix: string): string;
|
|
54
69
|
//# sourceMappingURL=design-system.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"design-system.d.ts","sourceRoot":"","sources":["../../../src/design-system/design-system.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"design-system.d.ts","sourceRoot":"","sources":["../../../src/design-system/design-system.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAG1D;;;GAGG;AACH,MAAM,WAAW,kBAAkB;IACjC,mBAAmB,CACjB,OAAO,CAAC,EAAE,WAAW,EACrB,MAAM,CAAC,EAAE,MAAM,GACd,YAAY,GAAG,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;IACjD,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED;;;GAGG;AACH,MAAM,MAAM,oBAAoB,CAAC,CAAC,GAAG,kBAAkB,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC;AAEtE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,kBAAkB,GAAG,kBAAkB,CAQjF;AAmJD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,4BAA4B,CAAC,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,GAAG,MAAM,CAiDjG"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { logger } from '../utils';
|
|
1
2
|
/**
|
|
2
3
|
* assureDesignSystem.
|
|
3
4
|
*
|
|
@@ -45,3 +46,181 @@ export function assureDesignSystem(module) {
|
|
|
45
46
|
}
|
|
46
47
|
return module;
|
|
47
48
|
}
|
|
49
|
+
/**
|
|
50
|
+
* Recursively gather all elements including those in shadow DOM
|
|
51
|
+
* @private
|
|
52
|
+
*/
|
|
53
|
+
function getAllElements(root) {
|
|
54
|
+
const elements = [];
|
|
55
|
+
const processedShadowRoots = new Set();
|
|
56
|
+
function collectElements(node) {
|
|
57
|
+
// Get all elements in the current node
|
|
58
|
+
const nodeElements = Array.from(node.querySelectorAll('*'));
|
|
59
|
+
elements.push(...nodeElements);
|
|
60
|
+
// Process shadow roots
|
|
61
|
+
nodeElements.forEach((el) => {
|
|
62
|
+
if (el.shadowRoot && !processedShadowRoots.has(el.shadowRoot)) {
|
|
63
|
+
processedShadowRoots.add(el.shadowRoot);
|
|
64
|
+
collectElements(el.shadowRoot);
|
|
65
|
+
}
|
|
66
|
+
});
|
|
67
|
+
}
|
|
68
|
+
collectElements(root);
|
|
69
|
+
return elements;
|
|
70
|
+
}
|
|
71
|
+
/**
|
|
72
|
+
* Find design system providers in the document, including those in shadow DOM
|
|
73
|
+
* Prioritizes providers that are closest to the specified element
|
|
74
|
+
* @private
|
|
75
|
+
*/
|
|
76
|
+
function findProvidersByDocumentSearch(targetElement) {
|
|
77
|
+
// Get all elements including those in shadow DOM
|
|
78
|
+
const allElements = getAllElements(document);
|
|
79
|
+
logger.debug(`Total elements found including shadow DOM: ${allElements.length}`);
|
|
80
|
+
// Find elements with tag names ending in -design-system-provider
|
|
81
|
+
const providerElements = allElements.filter((el) => {
|
|
82
|
+
var _a;
|
|
83
|
+
const tagName = (_a = el.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase();
|
|
84
|
+
if (!tagName)
|
|
85
|
+
return false;
|
|
86
|
+
const isProvider = tagName.endsWith('-design-system-provider');
|
|
87
|
+
if (isProvider) {
|
|
88
|
+
logger.debug(`Found provider in document: ${tagName}`);
|
|
89
|
+
}
|
|
90
|
+
return isProvider;
|
|
91
|
+
});
|
|
92
|
+
if (providerElements.length === 0) {
|
|
93
|
+
logger.debug(`No design-system-provider elements found in document`);
|
|
94
|
+
return null;
|
|
95
|
+
}
|
|
96
|
+
logger.debug(`Found ${providerElements.length} design-system-provider elements in document`);
|
|
97
|
+
// If only one provider found, use it
|
|
98
|
+
if (providerElements.length === 1) {
|
|
99
|
+
const provider = providerElements[0];
|
|
100
|
+
const providerTag = provider.tagName.toLowerCase();
|
|
101
|
+
const prefix = providerTag.split('-design-system-provider')[0];
|
|
102
|
+
if (prefix) {
|
|
103
|
+
logger.debug(`Only one provider found: ${providerTag} with prefix: ${prefix}`);
|
|
104
|
+
return prefix;
|
|
105
|
+
}
|
|
106
|
+
return null;
|
|
107
|
+
}
|
|
108
|
+
// Multiple providers - find the closest one to our target element
|
|
109
|
+
// First, check if any provider is an ancestor of our element
|
|
110
|
+
let closestAncestor = null;
|
|
111
|
+
let closestAncestorDepth = Infinity;
|
|
112
|
+
// Start from element's parent and move up
|
|
113
|
+
let currentEl = targetElement.parentElement;
|
|
114
|
+
let depth = 1;
|
|
115
|
+
while (currentEl) {
|
|
116
|
+
const tagName = currentEl.tagName.toLowerCase();
|
|
117
|
+
if (tagName.endsWith('-design-system-provider')) {
|
|
118
|
+
// Found a direct ancestor that is a provider
|
|
119
|
+
closestAncestor = currentEl;
|
|
120
|
+
closestAncestorDepth = depth;
|
|
121
|
+
break;
|
|
122
|
+
}
|
|
123
|
+
currentEl = currentEl.parentElement;
|
|
124
|
+
depth += 1;
|
|
125
|
+
}
|
|
126
|
+
if (closestAncestor) {
|
|
127
|
+
// We found an ancestor that is a provider
|
|
128
|
+
const providerTag = closestAncestor.tagName.toLowerCase();
|
|
129
|
+
const prefix = providerTag.split('-design-system-provider')[0];
|
|
130
|
+
logger.debug(`Found ancestor provider at depth ${closestAncestorDepth}: ${providerTag} with prefix: ${prefix}`);
|
|
131
|
+
return prefix || null;
|
|
132
|
+
}
|
|
133
|
+
// No ancestor is a provider - check document order
|
|
134
|
+
// Calculate each provider's proximity to our element in the DOM
|
|
135
|
+
// Sort by DOM proximity (closest first)
|
|
136
|
+
const providersWithDistance = providerElements.map((provider) => {
|
|
137
|
+
var _a, _b;
|
|
138
|
+
const providerTag = provider.tagName.toLowerCase();
|
|
139
|
+
const prefix = providerTag.split('-design-system-provider')[0];
|
|
140
|
+
// Use TreeWalker to calculate DOM distance
|
|
141
|
+
const nodePositionMap = new Map();
|
|
142
|
+
let counter = 0;
|
|
143
|
+
// Build a map of nodes to positions
|
|
144
|
+
const walker = document.createTreeWalker(document.documentElement, NodeFilter.SHOW_ELEMENT);
|
|
145
|
+
let current = walker.currentNode;
|
|
146
|
+
while (current) {
|
|
147
|
+
nodePositionMap.set(current, counter);
|
|
148
|
+
counter += 1;
|
|
149
|
+
current = walker.nextNode();
|
|
150
|
+
}
|
|
151
|
+
// Get positions or maximum value if node not in map
|
|
152
|
+
const providerPosition = (_a = nodePositionMap.get(provider)) !== null && _a !== void 0 ? _a : Number.MAX_SAFE_INTEGER;
|
|
153
|
+
const targetPosition = (_b = nodePositionMap.get(targetElement)) !== null && _b !== void 0 ? _b : Number.MAX_SAFE_INTEGER;
|
|
154
|
+
// Calculate distance as the absolute difference in positions
|
|
155
|
+
const distance = Math.abs(providerPosition - targetPosition);
|
|
156
|
+
return { provider, prefix: prefix || '', distance };
|
|
157
|
+
});
|
|
158
|
+
// Sort by distance (closest first)
|
|
159
|
+
providersWithDistance.sort((a, b) => a.distance - b.distance);
|
|
160
|
+
// Use the closest provider
|
|
161
|
+
if (providersWithDistance.length > 0 && providersWithDistance[0].prefix) {
|
|
162
|
+
const closestProvider = providersWithDistance[0];
|
|
163
|
+
logger.debug(`Using closest provider: ${closestProvider.provider.tagName.toLowerCase()} with prefix: ${closestProvider.prefix} (distance: ${closestProvider.distance})`);
|
|
164
|
+
return closestProvider.prefix;
|
|
165
|
+
}
|
|
166
|
+
return null;
|
|
167
|
+
}
|
|
168
|
+
/**
|
|
169
|
+
* Get the current design system prefix by checking available providers.
|
|
170
|
+
* If no provider is found, falls back to the provided prefix.
|
|
171
|
+
* @param element - The starting HTML element
|
|
172
|
+
* @param fallbackPrefix - The prefix to fallback to if the provider is not available
|
|
173
|
+
* @returns The current design system prefix
|
|
174
|
+
*
|
|
175
|
+
* @example
|
|
176
|
+
* ```ts
|
|
177
|
+
* const prefix = getCurrentDesignSystemPrefix(myElement, 'default-prefix');
|
|
178
|
+
* logger.debug(prefix); // e.g., 'rapid' or 'default-prefix'
|
|
179
|
+
* ```
|
|
180
|
+
* @public
|
|
181
|
+
*/
|
|
182
|
+
export function getCurrentDesignSystemPrefix(element, fallbackPrefix) {
|
|
183
|
+
// First try: Check element and its ancestors
|
|
184
|
+
let current = element;
|
|
185
|
+
while (current) {
|
|
186
|
+
const tagName = current.tagName.toLowerCase();
|
|
187
|
+
if (tagName.endsWith('-design-system-provider')) {
|
|
188
|
+
const prefix = tagName.split('-design-system-provider')[0];
|
|
189
|
+
if (prefix) {
|
|
190
|
+
logger.debug(`Found provider by ancestor search: ${tagName}, prefix: ${prefix}`);
|
|
191
|
+
return prefix;
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
// Move up the DOM tree, handling shadow DOM boundaries
|
|
195
|
+
if (current.parentElement) {
|
|
196
|
+
current = current.parentElement;
|
|
197
|
+
}
|
|
198
|
+
else if (current.getRootNode && current.getRootNode() instanceof ShadowRoot) {
|
|
199
|
+
current = current.getRootNode().host;
|
|
200
|
+
}
|
|
201
|
+
else {
|
|
202
|
+
current = null;
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
// Second try: Document-wide search
|
|
206
|
+
const allProviders = document.querySelectorAll('[class*="-design-system-provider"],[id*="-design-system-provider"]');
|
|
207
|
+
const providerElements = Array.from(allProviders);
|
|
208
|
+
// Add shadow DOM providers
|
|
209
|
+
const shadowProviders = getAllElements(document).filter((el) => {
|
|
210
|
+
var _a;
|
|
211
|
+
const tagName = (_a = el.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase();
|
|
212
|
+
return (tagName === null || tagName === void 0 ? void 0 : tagName.endsWith('-design-system-provider')) || false;
|
|
213
|
+
});
|
|
214
|
+
providerElements.push(...shadowProviders);
|
|
215
|
+
if (providerElements.length > 0) {
|
|
216
|
+
const provider = providerElements[0];
|
|
217
|
+
const providerTag = provider.tagName.toLowerCase();
|
|
218
|
+
const prefix = providerTag.split('-design-system-provider')[0];
|
|
219
|
+
if (prefix) {
|
|
220
|
+
logger.debug(`Found provider by document search: ${providerTag}, prefix: ${prefix}`);
|
|
221
|
+
return prefix;
|
|
222
|
+
}
|
|
223
|
+
}
|
|
224
|
+
logger.debug(`No provider found. Falling back to ${fallbackPrefix}.`);
|
|
225
|
+
return fallbackPrefix;
|
|
226
|
+
}
|
|
@@ -3716,6 +3716,68 @@
|
|
|
3716
3716
|
}
|
|
3717
3717
|
]
|
|
3718
3718
|
},
|
|
3719
|
+
{
|
|
3720
|
+
"kind": "Function",
|
|
3721
|
+
"canonicalReference": "@genesislcap/foundation-utils!getCurrentDesignSystemPrefix:function(1)",
|
|
3722
|
+
"docComment": "/**\n * Get the current design system prefix by checking available providers. If no provider is found, falls back to the provided prefix.\n *\n * @param element - The starting HTML element\n *\n * @param fallbackPrefix - The prefix to fallback to if the provider is not available\n *\n * @returns The current design system prefix\n *\n * @example\n * ```ts\n * const prefix = getCurrentDesignSystemPrefix(myElement, 'default-prefix');\n * logger.debug(prefix); // e.g., 'rapid' or 'default-prefix'\n * ```\n *\n * @public\n */\n",
|
|
3723
|
+
"excerptTokens": [
|
|
3724
|
+
{
|
|
3725
|
+
"kind": "Content",
|
|
3726
|
+
"text": "export declare function getCurrentDesignSystemPrefix(element: "
|
|
3727
|
+
},
|
|
3728
|
+
{
|
|
3729
|
+
"kind": "Reference",
|
|
3730
|
+
"text": "HTMLElement",
|
|
3731
|
+
"canonicalReference": "!HTMLElement:interface"
|
|
3732
|
+
},
|
|
3733
|
+
{
|
|
3734
|
+
"kind": "Content",
|
|
3735
|
+
"text": ", fallbackPrefix: "
|
|
3736
|
+
},
|
|
3737
|
+
{
|
|
3738
|
+
"kind": "Content",
|
|
3739
|
+
"text": "string"
|
|
3740
|
+
},
|
|
3741
|
+
{
|
|
3742
|
+
"kind": "Content",
|
|
3743
|
+
"text": "): "
|
|
3744
|
+
},
|
|
3745
|
+
{
|
|
3746
|
+
"kind": "Content",
|
|
3747
|
+
"text": "string"
|
|
3748
|
+
},
|
|
3749
|
+
{
|
|
3750
|
+
"kind": "Content",
|
|
3751
|
+
"text": ";"
|
|
3752
|
+
}
|
|
3753
|
+
],
|
|
3754
|
+
"fileUrlPath": "src/design-system/design-system.ts",
|
|
3755
|
+
"returnTypeTokenRange": {
|
|
3756
|
+
"startIndex": 5,
|
|
3757
|
+
"endIndex": 6
|
|
3758
|
+
},
|
|
3759
|
+
"releaseTag": "Public",
|
|
3760
|
+
"overloadIndex": 1,
|
|
3761
|
+
"parameters": [
|
|
3762
|
+
{
|
|
3763
|
+
"parameterName": "element",
|
|
3764
|
+
"parameterTypeTokenRange": {
|
|
3765
|
+
"startIndex": 1,
|
|
3766
|
+
"endIndex": 2
|
|
3767
|
+
},
|
|
3768
|
+
"isOptional": false
|
|
3769
|
+
},
|
|
3770
|
+
{
|
|
3771
|
+
"parameterName": "fallbackPrefix",
|
|
3772
|
+
"parameterTypeTokenRange": {
|
|
3773
|
+
"startIndex": 3,
|
|
3774
|
+
"endIndex": 4
|
|
3775
|
+
},
|
|
3776
|
+
"isOptional": false
|
|
3777
|
+
}
|
|
3778
|
+
],
|
|
3779
|
+
"name": "getCurrentDesignSystemPrefix"
|
|
3780
|
+
},
|
|
3719
3781
|
{
|
|
3720
3782
|
"kind": "Function",
|
|
3721
3783
|
"canonicalReference": "@genesislcap/foundation-utils!getDateFormatter:function(1)",
|
|
@@ -521,6 +521,22 @@ export declare namespace Genesis {
|
|
|
521
521
|
*/
|
|
522
522
|
export declare const GENESIS_SOCKET_URL: string;
|
|
523
523
|
|
|
524
|
+
/**
|
|
525
|
+
* Get the current design system prefix by checking available providers.
|
|
526
|
+
* If no provider is found, falls back to the provided prefix.
|
|
527
|
+
* @param element - The starting HTML element
|
|
528
|
+
* @param fallbackPrefix - The prefix to fallback to if the provider is not available
|
|
529
|
+
* @returns The current design system prefix
|
|
530
|
+
*
|
|
531
|
+
* @example
|
|
532
|
+
* ```ts
|
|
533
|
+
* const prefix = getCurrentDesignSystemPrefix(myElement, 'default-prefix');
|
|
534
|
+
* logger.debug(prefix); // e.g., 'rapid' or 'default-prefix'
|
|
535
|
+
* ```
|
|
536
|
+
* @public
|
|
537
|
+
*/
|
|
538
|
+
export declare function getCurrentDesignSystemPrefix(element: HTMLElement, fallbackPrefix: string): string;
|
|
539
|
+
|
|
524
540
|
/**
|
|
525
541
|
* @public
|
|
526
542
|
*/
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
|
+
|
|
3
|
+
[Home](./index.md) > [@genesislcap/foundation-utils](./foundation-utils.md) > [getCurrentDesignSystemPrefix](./foundation-utils.getcurrentdesignsystemprefix.md)
|
|
4
|
+
|
|
5
|
+
## getCurrentDesignSystemPrefix() function
|
|
6
|
+
|
|
7
|
+
Get the current design system prefix by checking available providers. If no provider is found, falls back to the provided prefix.
|
|
8
|
+
|
|
9
|
+
**Signature:**
|
|
10
|
+
|
|
11
|
+
```typescript
|
|
12
|
+
export declare function getCurrentDesignSystemPrefix(element: HTMLElement, fallbackPrefix: string): string;
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Parameters
|
|
16
|
+
|
|
17
|
+
| Parameter | Type | Description |
|
|
18
|
+
| --- | --- | --- |
|
|
19
|
+
| element | HTMLElement | The starting HTML element |
|
|
20
|
+
| fallbackPrefix | string | The prefix to fallback to if the provider is not available |
|
|
21
|
+
|
|
22
|
+
**Returns:**
|
|
23
|
+
|
|
24
|
+
string
|
|
25
|
+
|
|
26
|
+
The current design system prefix
|
|
27
|
+
|
|
28
|
+
## Example
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
```ts
|
|
32
|
+
const prefix = getCurrentDesignSystemPrefix(myElement, 'default-prefix');
|
|
33
|
+
logger.debug(prefix); // e.g., 'rapid' or 'default-prefix'
|
|
34
|
+
```
|
|
35
|
+
|
|
@@ -32,6 +32,7 @@
|
|
|
32
32
|
| [formatDateTimestamp(timestamp)](./foundation-utils.formatdatetimestamp.md) | Formats \[DATE\] UNIX Timestamps (without time) to readable strings |
|
|
33
33
|
| [formatDateTimeTimestamp(timestamp)](./foundation-utils.formatdatetimetimestamp.md) | Formats \[DATETIME\] UNIX Timestamps (with time) to readable strings |
|
|
34
34
|
| [formatTimestamp(timestamp, withTime)](./foundation-utils.formattimestamp.md) | Formats \[DATE\|DATETIME\] Unix Timestamps to readable strings |
|
|
35
|
+
| [getCurrentDesignSystemPrefix(element, fallbackPrefix)](./foundation-utils.getcurrentdesignsystemprefix.md) | Get the current design system prefix by checking available providers. If no provider is found, falls back to the provided prefix. |
|
|
35
36
|
| [getDateFormatter(locale, options)](./foundation-utils.getdateformatter.md) | |
|
|
36
37
|
| [getNumberFormatter(format, locale)](./foundation-utils.getnumberformatter.md) | |
|
|
37
38
|
| [JSONReplacer(key, value)](./foundation-utils.jsonreplacer.md) | JSON replacer function. |
|
package/docs/api-report.md
CHANGED
|
@@ -297,6 +297,9 @@ export namespace Genesis {
|
|
|
297
297
|
// @public
|
|
298
298
|
export const GENESIS_SOCKET_URL: string;
|
|
299
299
|
|
|
300
|
+
// @public
|
|
301
|
+
export function getCurrentDesignSystemPrefix(element: HTMLElement, fallbackPrefix: string): string;
|
|
302
|
+
|
|
300
303
|
// @public (undocumented)
|
|
301
304
|
export function getDateFormatter(locale?: string, options?: Intl.DateTimeFormatOptions): (params: any) => string;
|
|
302
305
|
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@genesislcap/foundation-utils",
|
|
3
3
|
"description": "Genesis Foundation Utils",
|
|
4
|
-
"version": "14.
|
|
4
|
+
"version": "14.275.0",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"license": "SEE LICENSE IN license.txt",
|
|
7
7
|
"main": "dist/esm/index.js",
|
|
@@ -27,19 +27,19 @@
|
|
|
27
27
|
}
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
|
-
"@genesislcap/foundation-testing": "14.
|
|
31
|
-
"@genesislcap/genx": "14.
|
|
32
|
-
"@genesislcap/rollup-builder": "14.
|
|
33
|
-
"@genesislcap/ts-builder": "14.
|
|
34
|
-
"@genesislcap/uvu-playwright-builder": "14.
|
|
35
|
-
"@genesislcap/vite-builder": "14.
|
|
36
|
-
"@genesislcap/webpack-builder": "14.
|
|
30
|
+
"@genesislcap/foundation-testing": "14.275.0",
|
|
31
|
+
"@genesislcap/genx": "14.275.0",
|
|
32
|
+
"@genesislcap/rollup-builder": "14.275.0",
|
|
33
|
+
"@genesislcap/ts-builder": "14.275.0",
|
|
34
|
+
"@genesislcap/uvu-playwright-builder": "14.275.0",
|
|
35
|
+
"@genesislcap/vite-builder": "14.275.0",
|
|
36
|
+
"@genesislcap/webpack-builder": "14.275.0",
|
|
37
37
|
"@types/json-schema": "^7.0.11",
|
|
38
38
|
"rimraf": "^5.0.0"
|
|
39
39
|
},
|
|
40
40
|
"dependencies": {
|
|
41
41
|
"@genesislcap/expression-builder": "14.258.1",
|
|
42
|
-
"@genesislcap/foundation-logger": "14.
|
|
42
|
+
"@genesislcap/foundation-logger": "14.275.0",
|
|
43
43
|
"@microsoft/fast-components": "2.30.6",
|
|
44
44
|
"@microsoft/fast-element": "1.14.0",
|
|
45
45
|
"@microsoft/fast-foundation": "2.49.6",
|
|
@@ -57,5 +57,5 @@
|
|
|
57
57
|
"access": "public"
|
|
58
58
|
},
|
|
59
59
|
"customElements": "dist/custom-elements.json",
|
|
60
|
-
"gitHead": "
|
|
60
|
+
"gitHead": "ce2f043a6de1db6be728298be2baf76d4586f705"
|
|
61
61
|
}
|