@nectary/components 5.22.0 → 5.22.2
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/color-swatch/utils.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import type { SwatchColors } from './types';
|
|
2
2
|
export declare const isSwatchColor: (value?: string) => value is SwatchColors;
|
|
3
|
-
export declare const getSwatchColorBg: (id: SwatchColors) => "var(--sinch-comp-color-swatch-color-
|
|
4
|
-
export declare const getSwatchColorFg: (id: SwatchColors) => "var(--sinch-comp-color-swatch-color-
|
|
3
|
+
export declare const getSwatchColorBg: (id: SwatchColors) => "var(--sinch-comp-color-swatch-color-default-background)" | "var(--sinch-comp-color-swatch-color-blue-background)" | "var(--sinch-comp-color-swatch-color-dark-blue-background)" | "var(--sinch-comp-color-swatch-color-dark-gray-background)" | "var(--sinch-comp-color-swatch-color-dark-green-background)" | "var(--sinch-comp-color-swatch-color-dark-orange-background)" | "var(--sinch-comp-color-swatch-color-dark-pink-background)" | "var(--sinch-comp-color-swatch-color-dark-red-background)" | "var(--sinch-comp-color-swatch-color-dark-violet-background)" | "var(--sinch-comp-color-swatch-color-dark-yellow-background)" | "var(--sinch-comp-color-swatch-color-gray-background)" | "var(--sinch-comp-color-swatch-color-green-background)" | "var(--sinch-comp-color-swatch-color-light-blue-background)" | "var(--sinch-comp-color-swatch-color-light-gray-background)" | "var(--sinch-comp-color-swatch-color-light-green-background)" | "var(--sinch-comp-color-swatch-color-light-orange-background)" | "var(--sinch-comp-color-swatch-color-light-pink-background)" | "var(--sinch-comp-color-swatch-color-light-red-background)" | "var(--sinch-comp-color-swatch-color-light-violet-background)" | "var(--sinch-comp-color-swatch-color-light-yellow-background)" | "var(--sinch-comp-color-swatch-color-orange-background)" | "var(--sinch-comp-color-swatch-color-pink-background)" | "var(--sinch-comp-color-swatch-color-red-background)" | "var(--sinch-comp-color-swatch-color-violet-background)" | "var(--sinch-comp-color-swatch-color-yellow-background)" | "var(--sinch-comp-color-swatch-color-skintone-dark-background)" | "var(--sinch-comp-color-swatch-color-skintone-default-background)" | "var(--sinch-comp-color-swatch-color-skintone-light-background)" | "var(--sinch-comp-color-swatch-color-skintone-light-medium-background)" | "var(--sinch-comp-color-swatch-color-skintone-medium-background)" | "var(--sinch-comp-color-swatch-color-skintone-medium-dark-background)";
|
|
4
|
+
export declare const getSwatchColorFg: (id: SwatchColors) => "var(--sinch-comp-color-swatch-color-default-foreground)" | "var(--sinch-comp-color-swatch-color-blue-foreground)" | "var(--sinch-comp-color-swatch-color-dark-blue-foreground)" | "var(--sinch-comp-color-swatch-color-dark-gray-foreground)" | "var(--sinch-comp-color-swatch-color-dark-green-foreground)" | "var(--sinch-comp-color-swatch-color-dark-orange-foreground)" | "var(--sinch-comp-color-swatch-color-dark-pink-foreground)" | "var(--sinch-comp-color-swatch-color-dark-red-foreground)" | "var(--sinch-comp-color-swatch-color-dark-violet-foreground)" | "var(--sinch-comp-color-swatch-color-dark-yellow-foreground)" | "var(--sinch-comp-color-swatch-color-gray-foreground)" | "var(--sinch-comp-color-swatch-color-green-foreground)" | "var(--sinch-comp-color-swatch-color-light-blue-foreground)" | "var(--sinch-comp-color-swatch-color-light-gray-foreground)" | "var(--sinch-comp-color-swatch-color-light-green-foreground)" | "var(--sinch-comp-color-swatch-color-light-orange-foreground)" | "var(--sinch-comp-color-swatch-color-light-pink-foreground)" | "var(--sinch-comp-color-swatch-color-light-red-foreground)" | "var(--sinch-comp-color-swatch-color-light-violet-foreground)" | "var(--sinch-comp-color-swatch-color-light-yellow-foreground)" | "var(--sinch-comp-color-swatch-color-orange-foreground)" | "var(--sinch-comp-color-swatch-color-pink-foreground)" | "var(--sinch-comp-color-swatch-color-red-foreground)" | "var(--sinch-comp-color-swatch-color-violet-foreground)" | "var(--sinch-comp-color-swatch-color-yellow-foreground)" | "var(--sinch-comp-color-swatch-color-skintone-dark-foreground)" | "var(--sinch-comp-color-swatch-color-skintone-default-foreground)" | "var(--sinch-comp-color-swatch-color-skintone-light-foreground)" | "var(--sinch-comp-color-swatch-color-skintone-light-medium-foreground)" | "var(--sinch-comp-color-swatch-color-skintone-medium-foreground)" | "var(--sinch-comp-color-swatch-color-skintone-medium-dark-foreground)";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nectary/components",
|
|
3
|
-
"version": "5.22.
|
|
3
|
+
"version": "5.22.2",
|
|
4
4
|
"files": [
|
|
5
5
|
"**/*/*.css",
|
|
6
6
|
"**/*/*.json",
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
26
|
"@babel/runtime": "^7.22.15",
|
|
27
|
-
"@nectary/assets": "3.6.
|
|
27
|
+
"@nectary/assets": "3.6.2"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
30
|
"@babel/cli": "^7.22.15",
|
|
@@ -40,6 +40,6 @@
|
|
|
40
40
|
"vite": "^7.0.6"
|
|
41
41
|
},
|
|
42
42
|
"peerDependencies": {
|
|
43
|
-
"@nectary/theme-base": "1.11.
|
|
43
|
+
"@nectary/theme-base": "1.11.2"
|
|
44
44
|
}
|
|
45
45
|
}
|
|
@@ -6,4 +6,5 @@ interface LoadModuleOptions {
|
|
|
6
6
|
logPrefix?: string;
|
|
7
7
|
}
|
|
8
8
|
export declare const loadModuleWithFallback: <TModule = Record<string, any>>(options: LoadModuleOptions) => Promise<TModule>;
|
|
9
|
+
export declare const loadCSSModuleWithFallback: <TModule = Record<string, any>>(options: LoadModuleOptions) => Promise<TModule>;
|
|
9
10
|
export {};
|
|
@@ -14,6 +14,22 @@ const getImportPath = (cdnUrl, version, modulePath) => {
|
|
|
14
14
|
}
|
|
15
15
|
return `${cdnUrl}/latest/${modulePath}.js`;
|
|
16
16
|
};
|
|
17
|
+
const getCssImportPath = (cdnUrl, version, modulePath) => {
|
|
18
|
+
if (cdnUrl.length === 0) {
|
|
19
|
+
return null;
|
|
20
|
+
}
|
|
21
|
+
const host = new URL(cdnUrl).host;
|
|
22
|
+
if (host === "esm.sh") {
|
|
23
|
+
if (version.length !== 0) {
|
|
24
|
+
return `${cdnUrl}@${version}/es2022/${modulePath}.css`;
|
|
25
|
+
}
|
|
26
|
+
return `${cdnUrl}/${modulePath}`;
|
|
27
|
+
}
|
|
28
|
+
if (version.length !== 0) {
|
|
29
|
+
return `${cdnUrl}/${version}/${modulePath}.css`;
|
|
30
|
+
}
|
|
31
|
+
return `${cdnUrl}/latest/${modulePath}.css`;
|
|
32
|
+
};
|
|
17
33
|
const FALLBACK_DELAY_MS = 2e3;
|
|
18
34
|
const loadModuleWithFallback = async (options) => {
|
|
19
35
|
const { cdnUrl, fallbackCdnUrl, version, modulePath, logPrefix = "CDN" } = options;
|
|
@@ -54,6 +70,57 @@ const loadModuleWithFallback = async (options) => {
|
|
|
54
70
|
throw error;
|
|
55
71
|
}
|
|
56
72
|
};
|
|
73
|
+
const fetchCSS = async (url) => {
|
|
74
|
+
const res = await fetch(url);
|
|
75
|
+
if (!res.ok) {
|
|
76
|
+
throw new Error(`CSS fetch failed: ${res.status} ${url}`);
|
|
77
|
+
}
|
|
78
|
+
const css = await res.text();
|
|
79
|
+
return { default: css };
|
|
80
|
+
};
|
|
81
|
+
const loadCSSFromUrl = (url) => {
|
|
82
|
+
if (url.endsWith(".css")) {
|
|
83
|
+
return fetchCSS(url);
|
|
84
|
+
}
|
|
85
|
+
return import(
|
|
86
|
+
/* webpackIgnore: true */
|
|
87
|
+
url
|
|
88
|
+
);
|
|
89
|
+
};
|
|
90
|
+
const loadCSSModuleWithFallback = async (options) => {
|
|
91
|
+
const { cdnUrl, fallbackCdnUrl, version, modulePath, logPrefix = "CDN" } = options;
|
|
92
|
+
const importPath = getCssImportPath(cdnUrl, version, modulePath);
|
|
93
|
+
const fallbackImportPath = getCssImportPath(fallbackCdnUrl, version, modulePath);
|
|
94
|
+
const promises = [
|
|
95
|
+
loadCSSFromUrl(importPath)
|
|
96
|
+
];
|
|
97
|
+
let timeoutId = null;
|
|
98
|
+
if (fallbackImportPath !== null) {
|
|
99
|
+
promises.push(
|
|
100
|
+
new Promise((resolve) => {
|
|
101
|
+
timeoutId = setTimeout(() => resolve(loadCSSFromUrl(fallbackImportPath)), FALLBACK_DELAY_MS);
|
|
102
|
+
})
|
|
103
|
+
);
|
|
104
|
+
}
|
|
105
|
+
try {
|
|
106
|
+
const module = await Promise.any(promises);
|
|
107
|
+
if (timeoutId !== null) {
|
|
108
|
+
clearTimeout(timeoutId);
|
|
109
|
+
}
|
|
110
|
+
return module;
|
|
111
|
+
} catch (error) {
|
|
112
|
+
if (error instanceof AggregateError) {
|
|
113
|
+
console.error(`${logPrefix} primary load failed: ${importPath}`, error.errors[0]);
|
|
114
|
+
if (fallbackImportPath !== null) {
|
|
115
|
+
console.error(`${logPrefix} fallback load failed: ${fallbackImportPath}`, error.errors[1]);
|
|
116
|
+
}
|
|
117
|
+
} else {
|
|
118
|
+
console.error(`${logPrefix} failed to load module: ${importPath}`, error);
|
|
119
|
+
}
|
|
120
|
+
throw error;
|
|
121
|
+
}
|
|
122
|
+
};
|
|
57
123
|
export {
|
|
124
|
+
loadCSSModuleWithFallback,
|
|
58
125
|
loadModuleWithFallback
|
|
59
126
|
};
|
package/utils/shared/index.d.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { NectaryElementBase, isSinchElementName, sinchElementNameToBase } from "./nectary-element-base.js";
|
|
2
2
|
import { createDeferredPromise } from "./deferred-promise.js";
|
|
3
|
-
import { loadModuleWithFallback } from "./cdn-loader.js";
|
|
3
|
+
import { loadCSSModuleWithFallback, loadModuleWithFallback } from "./cdn-loader.js";
|
|
4
4
|
import { getConstructor, getStore } from "./global-elements-store.js";
|
|
5
5
|
import { GlobalElementsManager } from "./global-elements-manager.js";
|
|
6
6
|
export {
|
|
@@ -10,6 +10,7 @@ export {
|
|
|
10
10
|
getConstructor,
|
|
11
11
|
getStore,
|
|
12
12
|
isSinchElementName,
|
|
13
|
+
loadCSSModuleWithFallback,
|
|
13
14
|
loadModuleWithFallback,
|
|
14
15
|
sinchElementNameToBase
|
|
15
16
|
};
|
package/utils/shared/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { NectaryElementBase, isSinchElementName, sinchElementNameToBase } from "./nectary-element-base.js";
|
|
2
2
|
import { createDeferredPromise } from "./deferred-promise.js";
|
|
3
|
-
import { loadModuleWithFallback } from "./cdn-loader.js";
|
|
3
|
+
import { loadCSSModuleWithFallback, loadModuleWithFallback } from "./cdn-loader.js";
|
|
4
4
|
import { getConstructor, getStore } from "./global-elements-store.js";
|
|
5
5
|
import { GlobalElementsManager } from "./global-elements-manager.js";
|
|
6
6
|
export {
|
|
@@ -10,6 +10,7 @@ export {
|
|
|
10
10
|
getConstructor,
|
|
11
11
|
getStore,
|
|
12
12
|
isSinchElementName,
|
|
13
|
+
loadCSSModuleWithFallback,
|
|
13
14
|
loadModuleWithFallback,
|
|
14
15
|
sinchElementNameToBase
|
|
15
16
|
};
|