@genesislcap/foundation-utils 14.307.1 → 14.307.3
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 +368 -306
- package/dist/dts/design-system/design-system.d.ts +19 -0
- package/dist/dts/design-system/design-system.d.ts.map +1 -1
- package/dist/dts/styles/index.d.ts +0 -1
- package/dist/dts/styles/index.d.ts.map +1 -1
- package/dist/dts/{styles → utils}/dom.d.ts +5 -0
- package/dist/dts/utils/dom.d.ts.map +1 -0
- package/dist/dts/utils/index.d.ts +1 -0
- package/dist/dts/utils/index.d.ts.map +1 -1
- package/dist/esm/design-system/design-system.js +26 -127
- package/dist/esm/styles/index.js +0 -1
- package/dist/esm/styles/typography.js +1 -1
- package/dist/esm/{styles → utils}/dom.js +23 -1
- package/dist/esm/utils/index.js +1 -0
- package/dist/foundation-utils.api.json +133 -2
- package/dist/foundation-utils.d.ts +26 -0
- package/docs/api/foundation-utils.getallelements.md +52 -0
- package/docs/api/foundation-utils.getcurrentdesignsystem.md +84 -0
- package/docs/api/foundation-utils.md +22 -0
- package/docs/api-report.md.api.md +9 -0
- package/package.json +11 -11
- package/dist/dts/styles/dom.d.ts.map +0 -1
@@ -51,6 +51,25 @@ 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 provider element and 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 An object containing the current design system provider element and prefix
|
60
|
+
*
|
61
|
+
* @example
|
62
|
+
* ```ts
|
63
|
+
* const { element: providerElement, prefix } = getCurrentDesignSystem(myElement, 'default-prefix');
|
64
|
+
* logger.debug(prefix); // e.g., 'rapid' or 'default-prefix'
|
65
|
+
* logger.debug(providerElement); // The provider element or null
|
66
|
+
* ```
|
67
|
+
* @public
|
68
|
+
*/
|
69
|
+
export declare function getCurrentDesignSystem(element: HTMLElement, fallbackPrefix: string): {
|
70
|
+
element: HTMLElement | null;
|
71
|
+
prefix: string;
|
72
|
+
};
|
54
73
|
/**
|
55
74
|
* Get the current design system prefix by checking available providers.
|
56
75
|
* If no provider is found, falls back to the provided prefix.
|
@@ -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;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;
|
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;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,WAAW,EACpB,cAAc,EAAE,MAAM,GACrB;IAAE,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAiDjD;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,4BAA4B,CAAC,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,GAAG,MAAM,CAEjG"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/styles/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/styles/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC"}
|
@@ -13,4 +13,9 @@ export declare const insertDocumentCSSRule: (cssRule: string, styleElementId: st
|
|
13
13
|
* @param href - The URL of the CSS file to insert.
|
14
14
|
*/
|
15
15
|
export declare const insertDocumentLink: (href: string) => void;
|
16
|
+
/**
|
17
|
+
* Recursively gather all elements including those in shadow DOM
|
18
|
+
* @public
|
19
|
+
*/
|
20
|
+
export declare function getAllElements(root: Element | Document): Element[];
|
16
21
|
//# sourceMappingURL=dom.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../../src/utils/dom.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,eAAO,MAAM,qBAAqB,GAAI,SAAS,MAAM,EAAE,gBAAgB,MAAM,KAAG,CAAC,MAAM,IAAI,CAyC1F,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAAI,MAAM,MAAM,SAQ9C,CAAC;AAEF;;;GAGG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,EAAE,CAoBlE"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC"}
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC"}
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { logger } from '../utils';
|
1
|
+
import { getAllElements, logger } from '../utils';
|
2
2
|
/**
|
3
3
|
* assureDesignSystem.
|
4
4
|
*
|
@@ -47,139 +47,21 @@ export function assureDesignSystem(module) {
|
|
47
47
|
return module;
|
48
48
|
}
|
49
49
|
/**
|
50
|
-
*
|
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.
|
50
|
+
* Get the current design system provider element and prefix by checking available providers.
|
170
51
|
* If no provider is found, falls back to the provided prefix.
|
171
52
|
* @param element - The starting HTML element
|
172
53
|
* @param fallbackPrefix - The prefix to fallback to if the provider is not available
|
173
|
-
* @returns
|
54
|
+
* @returns An object containing the current design system provider element and prefix
|
174
55
|
*
|
175
56
|
* @example
|
176
57
|
* ```ts
|
177
|
-
* const prefix =
|
58
|
+
* const { element: providerElement, prefix } = getCurrentDesignSystem(myElement, 'default-prefix');
|
178
59
|
* logger.debug(prefix); // e.g., 'rapid' or 'default-prefix'
|
60
|
+
* logger.debug(providerElement); // The provider element or null
|
179
61
|
* ```
|
180
62
|
* @public
|
181
63
|
*/
|
182
|
-
export function
|
64
|
+
export function getCurrentDesignSystem(element, fallbackPrefix) {
|
183
65
|
// First try: Check element and its ancestors
|
184
66
|
let current = element;
|
185
67
|
while (current) {
|
@@ -188,7 +70,7 @@ export function getCurrentDesignSystemPrefix(element, fallbackPrefix) {
|
|
188
70
|
const prefix = tagName.split('-design-system-provider')[0];
|
189
71
|
if (prefix) {
|
190
72
|
logger.debug(`Found provider by ancestor search: ${tagName}, prefix: ${prefix}`);
|
191
|
-
return prefix;
|
73
|
+
return { element: current, prefix };
|
192
74
|
}
|
193
75
|
}
|
194
76
|
// Move up the DOM tree, handling shadow DOM boundaries
|
@@ -218,9 +100,26 @@ export function getCurrentDesignSystemPrefix(element, fallbackPrefix) {
|
|
218
100
|
const prefix = providerTag.split('-design-system-provider')[0];
|
219
101
|
if (prefix) {
|
220
102
|
logger.debug(`Found provider by document search: ${providerTag}, prefix: ${prefix}`);
|
221
|
-
return prefix;
|
103
|
+
return { element: provider, prefix };
|
222
104
|
}
|
223
105
|
}
|
224
106
|
logger.debug(`No provider found. Falling back to ${fallbackPrefix}.`);
|
225
|
-
return fallbackPrefix;
|
107
|
+
return { element: null, prefix: fallbackPrefix };
|
108
|
+
}
|
109
|
+
/**
|
110
|
+
* Get the current design system prefix by checking available providers.
|
111
|
+
* If no provider is found, falls back to the provided prefix.
|
112
|
+
* @param element - The starting HTML element
|
113
|
+
* @param fallbackPrefix - The prefix to fallback to if the provider is not available
|
114
|
+
* @returns The current design system prefix
|
115
|
+
*
|
116
|
+
* @example
|
117
|
+
* ```ts
|
118
|
+
* const prefix = getCurrentDesignSystemPrefix(myElement, 'default-prefix');
|
119
|
+
* logger.debug(prefix); // e.g., 'rapid' or 'default-prefix'
|
120
|
+
* ```
|
121
|
+
* @public
|
122
|
+
*/
|
123
|
+
export function getCurrentDesignSystemPrefix(element, fallbackPrefix) {
|
124
|
+
return getCurrentDesignSystem(element, fallbackPrefix).prefix;
|
226
125
|
}
|
package/dist/esm/styles/index.js
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
import { insertDocumentCSSRule } from '
|
1
|
+
import { insertDocumentCSSRule } from '../utils/dom';
|
2
2
|
/**
|
3
3
|
* Loads font faces by inserting a style element with the specified font face rules into the document.
|
4
4
|
* @param fontFaceRules - The CSS rules for the font faces.
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { logger } from '
|
1
|
+
import { logger } from './logger';
|
2
2
|
/**
|
3
3
|
* Inserts a CSS rule into the document by creating a new style element or using an existing one with the specified ID.
|
4
4
|
* Returns a function that can be called to remove the rule from the document.
|
@@ -60,3 +60,25 @@ export const insertDocumentLink = (href) => {
|
|
60
60
|
link.href = href;
|
61
61
|
document.head.appendChild(link);
|
62
62
|
};
|
63
|
+
/**
|
64
|
+
* Recursively gather all elements including those in shadow DOM
|
65
|
+
* @public
|
66
|
+
*/
|
67
|
+
export function getAllElements(root) {
|
68
|
+
const elements = [];
|
69
|
+
const processedShadowRoots = new Set();
|
70
|
+
function collectElements(node) {
|
71
|
+
// Get all elements in the current node
|
72
|
+
const nodeElements = Array.from(node.querySelectorAll('*'));
|
73
|
+
elements.push(...nodeElements);
|
74
|
+
// Process shadow roots
|
75
|
+
nodeElements.forEach((el) => {
|
76
|
+
if (el.shadowRoot && !processedShadowRoots.has(el.shadowRoot)) {
|
77
|
+
processedShadowRoots.add(el.shadowRoot);
|
78
|
+
collectElements(el.shadowRoot);
|
79
|
+
}
|
80
|
+
});
|
81
|
+
}
|
82
|
+
collectElements(root);
|
83
|
+
return elements;
|
84
|
+
}
|
package/dist/esm/utils/index.js
CHANGED
@@ -3923,6 +3923,137 @@
|
|
3923
3923
|
}
|
3924
3924
|
]
|
3925
3925
|
},
|
3926
|
+
{
|
3927
|
+
"kind": "Function",
|
3928
|
+
"canonicalReference": "@genesislcap/foundation-utils!getAllElements:function(1)",
|
3929
|
+
"docComment": "/**\n * Recursively gather all elements including those in shadow DOM\n *\n * @public\n */\n",
|
3930
|
+
"excerptTokens": [
|
3931
|
+
{
|
3932
|
+
"kind": "Content",
|
3933
|
+
"text": "export declare function getAllElements(root: "
|
3934
|
+
},
|
3935
|
+
{
|
3936
|
+
"kind": "Reference",
|
3937
|
+
"text": "Element",
|
3938
|
+
"canonicalReference": "!Element:interface"
|
3939
|
+
},
|
3940
|
+
{
|
3941
|
+
"kind": "Content",
|
3942
|
+
"text": " | "
|
3943
|
+
},
|
3944
|
+
{
|
3945
|
+
"kind": "Reference",
|
3946
|
+
"text": "Document",
|
3947
|
+
"canonicalReference": "!Document:interface"
|
3948
|
+
},
|
3949
|
+
{
|
3950
|
+
"kind": "Content",
|
3951
|
+
"text": "): "
|
3952
|
+
},
|
3953
|
+
{
|
3954
|
+
"kind": "Reference",
|
3955
|
+
"text": "Element",
|
3956
|
+
"canonicalReference": "!Element:interface"
|
3957
|
+
},
|
3958
|
+
{
|
3959
|
+
"kind": "Content",
|
3960
|
+
"text": "[]"
|
3961
|
+
},
|
3962
|
+
{
|
3963
|
+
"kind": "Content",
|
3964
|
+
"text": ";"
|
3965
|
+
}
|
3966
|
+
],
|
3967
|
+
"fileUrlPath": "src/utils/dom.ts",
|
3968
|
+
"returnTypeTokenRange": {
|
3969
|
+
"startIndex": 5,
|
3970
|
+
"endIndex": 7
|
3971
|
+
},
|
3972
|
+
"releaseTag": "Public",
|
3973
|
+
"overloadIndex": 1,
|
3974
|
+
"parameters": [
|
3975
|
+
{
|
3976
|
+
"parameterName": "root",
|
3977
|
+
"parameterTypeTokenRange": {
|
3978
|
+
"startIndex": 1,
|
3979
|
+
"endIndex": 4
|
3980
|
+
},
|
3981
|
+
"isOptional": false
|
3982
|
+
}
|
3983
|
+
],
|
3984
|
+
"name": "getAllElements"
|
3985
|
+
},
|
3986
|
+
{
|
3987
|
+
"kind": "Function",
|
3988
|
+
"canonicalReference": "@genesislcap/foundation-utils!getCurrentDesignSystem:function(1)",
|
3989
|
+
"docComment": "/**\n * Get the current design system provider element and 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 An object containing the current design system provider element and prefix\n *\n * @example\n * ```ts\n * const { element: providerElement, prefix } = getCurrentDesignSystem(myElement, 'default-prefix');\n * logger.debug(prefix); // e.g., 'rapid' or 'default-prefix'\n * logger.debug(providerElement); // The provider element or null\n * ```\n *\n * @public\n */\n",
|
3990
|
+
"excerptTokens": [
|
3991
|
+
{
|
3992
|
+
"kind": "Content",
|
3993
|
+
"text": "export declare function getCurrentDesignSystem(element: "
|
3994
|
+
},
|
3995
|
+
{
|
3996
|
+
"kind": "Reference",
|
3997
|
+
"text": "HTMLElement",
|
3998
|
+
"canonicalReference": "!HTMLElement:interface"
|
3999
|
+
},
|
4000
|
+
{
|
4001
|
+
"kind": "Content",
|
4002
|
+
"text": ", fallbackPrefix: "
|
4003
|
+
},
|
4004
|
+
{
|
4005
|
+
"kind": "Content",
|
4006
|
+
"text": "string"
|
4007
|
+
},
|
4008
|
+
{
|
4009
|
+
"kind": "Content",
|
4010
|
+
"text": "): "
|
4011
|
+
},
|
4012
|
+
{
|
4013
|
+
"kind": "Content",
|
4014
|
+
"text": "{\n element: "
|
4015
|
+
},
|
4016
|
+
{
|
4017
|
+
"kind": "Reference",
|
4018
|
+
"text": "HTMLElement",
|
4019
|
+
"canonicalReference": "!HTMLElement:interface"
|
4020
|
+
},
|
4021
|
+
{
|
4022
|
+
"kind": "Content",
|
4023
|
+
"text": " | null;\n prefix: string;\n}"
|
4024
|
+
},
|
4025
|
+
{
|
4026
|
+
"kind": "Content",
|
4027
|
+
"text": ";"
|
4028
|
+
}
|
4029
|
+
],
|
4030
|
+
"fileUrlPath": "src/design-system/design-system.ts",
|
4031
|
+
"returnTypeTokenRange": {
|
4032
|
+
"startIndex": 5,
|
4033
|
+
"endIndex": 8
|
4034
|
+
},
|
4035
|
+
"releaseTag": "Public",
|
4036
|
+
"overloadIndex": 1,
|
4037
|
+
"parameters": [
|
4038
|
+
{
|
4039
|
+
"parameterName": "element",
|
4040
|
+
"parameterTypeTokenRange": {
|
4041
|
+
"startIndex": 1,
|
4042
|
+
"endIndex": 2
|
4043
|
+
},
|
4044
|
+
"isOptional": false
|
4045
|
+
},
|
4046
|
+
{
|
4047
|
+
"parameterName": "fallbackPrefix",
|
4048
|
+
"parameterTypeTokenRange": {
|
4049
|
+
"startIndex": 3,
|
4050
|
+
"endIndex": 4
|
4051
|
+
},
|
4052
|
+
"isOptional": false
|
4053
|
+
}
|
4054
|
+
],
|
4055
|
+
"name": "getCurrentDesignSystem"
|
4056
|
+
},
|
3926
4057
|
{
|
3927
4058
|
"kind": "Function",
|
3928
4059
|
"canonicalReference": "@genesislcap/foundation-utils!getCurrentDesignSystemPrefix:function(1)",
|
@@ -4842,7 +4973,7 @@
|
|
4842
4973
|
"text": "(() => void)"
|
4843
4974
|
}
|
4844
4975
|
],
|
4845
|
-
"fileUrlPath": "src/
|
4976
|
+
"fileUrlPath": "src/utils/dom.ts",
|
4846
4977
|
"returnTypeTokenRange": {
|
4847
4978
|
"startIndex": 5,
|
4848
4979
|
"endIndex": 6
|
@@ -4891,7 +5022,7 @@
|
|
4891
5022
|
"text": "void"
|
4892
5023
|
}
|
4893
5024
|
],
|
4894
|
-
"fileUrlPath": "src/
|
5025
|
+
"fileUrlPath": "src/utils/dom.ts",
|
4895
5026
|
"returnTypeTokenRange": {
|
4896
5027
|
"startIndex": 3,
|
4897
5028
|
"endIndex": 4
|
@@ -545,6 +545,32 @@ export declare namespace Genesis {
|
|
545
545
|
*/
|
546
546
|
export declare const GENESIS_SOCKET_URL: string;
|
547
547
|
|
548
|
+
/**
|
549
|
+
* Recursively gather all elements including those in shadow DOM
|
550
|
+
* @public
|
551
|
+
*/
|
552
|
+
export declare function getAllElements(root: Element | Document): Element[];
|
553
|
+
|
554
|
+
/**
|
555
|
+
* Get the current design system provider element and prefix by checking available providers.
|
556
|
+
* If no provider is found, falls back to the provided prefix.
|
557
|
+
* @param element - The starting HTML element
|
558
|
+
* @param fallbackPrefix - The prefix to fallback to if the provider is not available
|
559
|
+
* @returns An object containing the current design system provider element and prefix
|
560
|
+
*
|
561
|
+
* @example
|
562
|
+
* ```ts
|
563
|
+
* const { element: providerElement, prefix } = getCurrentDesignSystem(myElement, 'default-prefix');
|
564
|
+
* logger.debug(prefix); // e.g., 'rapid' or 'default-prefix'
|
565
|
+
* logger.debug(providerElement); // The provider element or null
|
566
|
+
* ```
|
567
|
+
* @public
|
568
|
+
*/
|
569
|
+
export declare function getCurrentDesignSystem(element: HTMLElement, fallbackPrefix: string): {
|
570
|
+
element: HTMLElement | null;
|
571
|
+
prefix: string;
|
572
|
+
};
|
573
|
+
|
548
574
|
/**
|
549
575
|
* Get the current design system prefix by checking available providers.
|
550
576
|
* If no provider is found, falls back to the provided prefix.
|
@@ -0,0 +1,52 @@
|
|
1
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
2
|
+
|
3
|
+
[Home](./index.md) > [@genesislcap/foundation-utils](./foundation-utils.md) > [getAllElements](./foundation-utils.getallelements.md)
|
4
|
+
|
5
|
+
## getAllElements() function
|
6
|
+
|
7
|
+
Recursively gather all elements including those in shadow DOM
|
8
|
+
|
9
|
+
**Signature:**
|
10
|
+
|
11
|
+
```typescript
|
12
|
+
export declare function getAllElements(root: Element | Document): Element[];
|
13
|
+
```
|
14
|
+
|
15
|
+
## Parameters
|
16
|
+
|
17
|
+
<table><thead><tr><th>
|
18
|
+
|
19
|
+
Parameter
|
20
|
+
|
21
|
+
|
22
|
+
</th><th>
|
23
|
+
|
24
|
+
Type
|
25
|
+
|
26
|
+
|
27
|
+
</th><th>
|
28
|
+
|
29
|
+
Description
|
30
|
+
|
31
|
+
|
32
|
+
</th></tr></thead>
|
33
|
+
<tbody><tr><td>
|
34
|
+
|
35
|
+
root
|
36
|
+
|
37
|
+
|
38
|
+
</td><td>
|
39
|
+
|
40
|
+
Element \| Document
|
41
|
+
|
42
|
+
|
43
|
+
</td><td>
|
44
|
+
|
45
|
+
|
46
|
+
</td></tr>
|
47
|
+
</tbody></table>
|
48
|
+
|
49
|
+
**Returns:**
|
50
|
+
|
51
|
+
Element\[\]
|
52
|
+
|
@@ -0,0 +1,84 @@
|
|
1
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
2
|
+
|
3
|
+
[Home](./index.md) > [@genesislcap/foundation-utils](./foundation-utils.md) > [getCurrentDesignSystem](./foundation-utils.getcurrentdesignsystem.md)
|
4
|
+
|
5
|
+
## getCurrentDesignSystem() function
|
6
|
+
|
7
|
+
Get the current design system provider element and 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 getCurrentDesignSystem(element: HTMLElement, fallbackPrefix: string): {
|
13
|
+
element: HTMLElement | null;
|
14
|
+
prefix: string;
|
15
|
+
};
|
16
|
+
```
|
17
|
+
|
18
|
+
## Parameters
|
19
|
+
|
20
|
+
<table><thead><tr><th>
|
21
|
+
|
22
|
+
Parameter
|
23
|
+
|
24
|
+
|
25
|
+
</th><th>
|
26
|
+
|
27
|
+
Type
|
28
|
+
|
29
|
+
|
30
|
+
</th><th>
|
31
|
+
|
32
|
+
Description
|
33
|
+
|
34
|
+
|
35
|
+
</th></tr></thead>
|
36
|
+
<tbody><tr><td>
|
37
|
+
|
38
|
+
element
|
39
|
+
|
40
|
+
|
41
|
+
</td><td>
|
42
|
+
|
43
|
+
HTMLElement
|
44
|
+
|
45
|
+
|
46
|
+
</td><td>
|
47
|
+
|
48
|
+
The starting HTML element
|
49
|
+
|
50
|
+
|
51
|
+
</td></tr>
|
52
|
+
<tr><td>
|
53
|
+
|
54
|
+
fallbackPrefix
|
55
|
+
|
56
|
+
|
57
|
+
</td><td>
|
58
|
+
|
59
|
+
string
|
60
|
+
|
61
|
+
|
62
|
+
</td><td>
|
63
|
+
|
64
|
+
The prefix to fallback to if the provider is not available
|
65
|
+
|
66
|
+
|
67
|
+
</td></tr>
|
68
|
+
</tbody></table>
|
69
|
+
|
70
|
+
**Returns:**
|
71
|
+
|
72
|
+
{ element: HTMLElement \| null; prefix: string; }
|
73
|
+
|
74
|
+
An object containing the current design system provider element and prefix
|
75
|
+
|
76
|
+
## Example
|
77
|
+
|
78
|
+
|
79
|
+
```ts
|
80
|
+
const { element: providerElement, prefix } = getCurrentDesignSystem(myElement, 'default-prefix');
|
81
|
+
logger.debug(prefix); // e.g., 'rapid' or 'default-prefix'
|
82
|
+
logger.debug(providerElement); // The provider element or null
|
83
|
+
```
|
84
|
+
|
@@ -286,6 +286,28 @@ Formats \[DATETIME\] UNIX Timestamps (with time and milliseconds) to readable st
|
|
286
286
|
Formats \[DATE\|DATETIME\] Unix Timestamps to readable strings
|
287
287
|
|
288
288
|
|
289
|
+
</td></tr>
|
290
|
+
<tr><td>
|
291
|
+
|
292
|
+
[getAllElements(root)](./foundation-utils.getallelements.md)
|
293
|
+
|
294
|
+
|
295
|
+
</td><td>
|
296
|
+
|
297
|
+
Recursively gather all elements including those in shadow DOM
|
298
|
+
|
299
|
+
|
300
|
+
</td></tr>
|
301
|
+
<tr><td>
|
302
|
+
|
303
|
+
[getCurrentDesignSystem(element, fallbackPrefix)](./foundation-utils.getcurrentdesignsystem.md)
|
304
|
+
|
305
|
+
|
306
|
+
</td><td>
|
307
|
+
|
308
|
+
Get the current design system provider element and prefix by checking available providers. If no provider is found, falls back to the provided prefix.
|
309
|
+
|
310
|
+
|
289
311
|
</td></tr>
|
290
312
|
<tr><td>
|
291
313
|
|