@salesforce/webapp-experimental 1.69.0 → 1.71.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.
Files changed (5) hide show
  1. package/dist/design/design-mode-interactions.js +55 -22
  2. package/dist/design/interactions/utils/cssUtils.d.ts +42 -10
  3. package/dist/design/interactions/utils/cssUtils.d.ts.map +1 -1
  4. package/dist/design/interactions/utils/cssUtils.js +59 -33
  5. package/package.json +2 -2
package/dist/design/design-mode-interactions.js CHANGED
@@ -13,31 +13,64 @@
13
13
  var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
14
14
 
15
15
  // src/design/interactions/utils/cssUtils.ts
16
- function parsePixelValue(value) {
17
- if (!value || typeof value !== "string") {
18
- return 0;
19
- }
20
- const match = value.match(/^(\d+(?:\.\d+)?)px$/);
21
- const numberPart = match?.[1];
22
- return numberPart ? Number.parseFloat(numberPart) : 0;
23
- }
24
16
  function getElementStyles(element) {
25
- if (!element) {
26
- return {};
27
- }
17
+ if (!element) return {};
28
18
  const computed = window.getComputedStyle(element);
29
- const px = (prop) => parsePixelValue(computed[prop] || "");
19
+ const inlineStyle = element.style;
20
+ const prop = (name, fallback) => ({
21
+ inline: inlineStyle[name] || (fallback ? inlineStyle[fallback] : "") || "",
22
+ computed: (fallback ? computed[fallback] : computed[name]) || ""
23
+ });
24
+ const box = (shorthand, top, right, bottom, left) => {
25
+ let inlineValue = inlineStyle[shorthand] || "";
26
+ if (!inlineValue) {
27
+ const iT = inlineStyle[top] || "", iR = inlineStyle[right] || "", iB = inlineStyle[bottom] || "", iL = inlineStyle[left] || "";
28
+ if (iT || iR || iB || iL) {
29
+ inlineValue = `${iT || "0px"} ${iR || "0px"} ${iB || "0px"} ${iL || "0px"}`;
30
+ }
31
+ }
32
+ return {
33
+ inline: inlineValue,
34
+ computed: `${computed[top] || ""} ${computed[right] || ""} ${computed[bottom] || ""} ${computed[left] || ""}`
35
+ };
36
+ };
30
37
  return {
31
- paddingTop: px("paddingTop"),
32
- paddingRight: px("paddingRight"),
33
- paddingBottom: px("paddingBottom"),
34
- paddingLeft: px("paddingLeft"),
35
- marginTop: px("marginTop"),
36
- marginRight: px("marginRight"),
37
- marginBottom: px("marginBottom"),
38
- marginLeft: px("marginLeft"),
39
- backgroundColor: computed.backgroundColor,
40
- fontFamily: computed.fontFamily
38
+ width: prop("width"),
39
+ minWidth: prop("minWidth"),
40
+ maxWidth: prop("maxWidth"),
41
+ height: prop("height"),
42
+ minHeight: prop("minHeight"),
43
+ maxHeight: prop("maxHeight"),
44
+ overflow: prop("overflow"),
45
+ padding: box("padding", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft"),
46
+ margin: box("margin", "marginTop", "marginRight", "marginBottom", "marginLeft"),
47
+ backgroundColor: prop("backgroundColor"),
48
+ borderWidth: box(
49
+ "borderWidth",
50
+ "borderTopWidth",
51
+ "borderRightWidth",
52
+ "borderBottomWidth",
53
+ "borderLeftWidth"
54
+ ),
55
+ borderStyle: prop("borderStyle", "borderTopStyle"),
56
+ borderColor: prop("borderColor", "borderTopColor"),
57
+ borderRadius: box(
58
+ "borderRadius",
59
+ "borderTopLeftRadius",
60
+ "borderTopRightRadius",
61
+ "borderBottomRightRadius",
62
+ "borderBottomLeftRadius"
63
+ ),
64
+ color: prop("color"),
65
+ fontFamily: prop("fontFamily"),
66
+ fontSize: prop("fontSize"),
67
+ fontWeight: prop("fontWeight"),
68
+ fontStyle: prop("fontStyle"),
69
+ lineHeight: prop("lineHeight"),
70
+ letterSpacing: prop("letterSpacing"),
71
+ textAlign: prop("textAlign"),
72
+ textDecoration: prop("textDecoration", "textDecorationLine"),
73
+ textTransform: prop("textTransform")
41
74
  };
42
75
  }
43
76
 
package/dist/design/interactions/utils/cssUtils.d.ts CHANGED
@@ -4,19 +4,51 @@
4
4
  * For full license text, see the LICENSE.txt file
5
5
  */
6
6
  /**
7
- * CSS Utility Functions
8
- * Helper functions for CSS value parsing and conversion
7
+ * Style value with both inline and computed values.
8
+ * - inline: the raw value from element.style (what was explicitly set via
9
+ * the style attribute).
10
+ * - computed: the browser-resolved value after the full cascade.
9
11
  */
12
+ interface StyleValue {
13
+ inline: string;
14
+ computed: string;
15
+ }
10
16
  /**
11
- * Parse pixel value from CSS string (e.g., "10px" -> 10)
12
- * @param value - CSS value string
13
- * @returns Numeric value in pixels
17
+ * Complete element styles snapshot
14
18
  */
15
- export declare function parsePixelValue(value: string): number;
19
+ interface ElementStyles {
20
+ width: StyleValue;
21
+ minWidth: StyleValue;
22
+ maxWidth: StyleValue;
23
+ height: StyleValue;
24
+ minHeight: StyleValue;
25
+ maxHeight: StyleValue;
26
+ overflow: StyleValue;
27
+ padding: StyleValue;
28
+ margin: StyleValue;
29
+ backgroundColor: StyleValue;
30
+ borderWidth: StyleValue;
31
+ borderStyle: StyleValue;
32
+ borderColor: StyleValue;
33
+ borderRadius: StyleValue;
34
+ color: StyleValue;
35
+ fontFamily: StyleValue;
36
+ fontSize: StyleValue;
37
+ fontWeight: StyleValue;
38
+ fontStyle: StyleValue;
39
+ lineHeight: StyleValue;
40
+ letterSpacing: StyleValue;
41
+ textAlign: StyleValue;
42
+ textDecoration: StyleValue;
43
+ textTransform: StyleValue;
44
+ }
16
45
  /**
17
- * Get all style values relevant to UI controls for an element
18
- * @param element - The element
19
- * @returns Object with style values (plain values safe for postMessage)
46
+ * Get all style values relevant to UI controls for an element.
47
+ * Each property returns { inline, computed } where inline is the raw
48
+ * element.style value and computed is the browser-resolved value.
49
+ * @param element - The HTML element to extract styles from
50
+ * @returns Plain-object snapshot safe for postMessage
20
51
  */
21
- export declare function getElementStyles(element: HTMLElement | null | undefined): Record<string, number | string>;
52
+ export declare function getElementStyles(element: HTMLElement | null | undefined): Partial<ElementStyles>;
53
+ export {};
22
54
  //# sourceMappingURL=cssUtils.d.ts.map
package/dist/design/interactions/utils/cssUtils.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"cssUtils.d.ts","sourceRoot":"","sources":["../../../../src/design/interactions/utils/cssUtils.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;GAGG;AAEH;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAOrD;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAC/B,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GACrC,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CA+BjC"}
1
+ {"version":3,"file":"cssUtils.d.ts","sourceRoot":"","sources":["../../../../src/design/interactions/utils/cssUtils.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;GAKG;AACH,UAAU,UAAU;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;CACjB;AAID;;GAEG;AACH,UAAU,aAAa;IACtB,KAAK,EAAE,UAAU,CAAC;IAClB,QAAQ,EAAE,UAAU,CAAC;IACrB,QAAQ,EAAE,UAAU,CAAC;IACrB,MAAM,EAAE,UAAU,CAAC;IACnB,SAAS,EAAE,UAAU,CAAC;IACtB,SAAS,EAAE,UAAU,CAAC;IACtB,QAAQ,EAAE,UAAU,CAAC;IACrB,OAAO,EAAE,UAAU,CAAC;IACpB,MAAM,EAAE,UAAU,CAAC;IACnB,eAAe,EAAE,UAAU,CAAC;IAC5B,WAAW,EAAE,UAAU,CAAC;IACxB,WAAW,EAAE,UAAU,CAAC;IACxB,WAAW,EAAE,UAAU,CAAC;IACxB,YAAY,EAAE,UAAU,CAAC;IACzB,KAAK,EAAE,UAAU,CAAC;IAClB,UAAU,EAAE,UAAU,CAAC;IACvB,QAAQ,EAAE,UAAU,CAAC;IACrB,UAAU,EAAE,UAAU,CAAC;IACvB,SAAS,EAAE,UAAU,CAAC;IACtB,UAAU,EAAE,UAAU,CAAC;IACvB,aAAa,EAAE,UAAU,CAAC;IAC1B,SAAS,EAAE,UAAU,CAAC;IACtB,cAAc,EAAE,UAAU,CAAC;IAC3B,aAAa,EAAE,UAAU,CAAC;CAC1B;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO,CAAC,aAAa,CAAC,CAmFhG"}
package/dist/design/interactions/utils/cssUtils.js CHANGED
@@ -4,43 +4,69 @@
4
4
  * For full license text, see the LICENSE.txt file
5
5
  */
6
6
  /**
7
- * CSS Utility Functions
8
- * Helper functions for CSS value parsing and conversion
9
- */
10
- /**
11
- * Parse pixel value from CSS string (e.g., "10px" -> 10)
12
- * @param value - CSS value string
13
- * @returns Numeric value in pixels
14
- */
15
- export function parsePixelValue(value) {
16
- if (!value || typeof value !== "string") {
17
- return 0;
18
- }
19
- const match = value.match(/^(\d+(?:\.\d+)?)px$/);
20
- const numberPart = match?.[1];
21
- return numberPart ? Number.parseFloat(numberPart) : 0;
22
- }
23
- /**
24
- * Get all style values relevant to UI controls for an element
25
- * @param element - The element
26
- * @returns Object with style values (plain values safe for postMessage)
7
+ * Get all style values relevant to UI controls for an element.
8
+ * Each property returns { inline, computed } where inline is the raw
9
+ * element.style value and computed is the browser-resolved value.
10
+ * @param element - The HTML element to extract styles from
11
+ * @returns Plain-object snapshot safe for postMessage
27
12
  */
28
13
  export function getElementStyles(element) {
29
- if (!element) {
14
+ if (!element)
30
15
  return {};
31
- }
32
16
  const computed = window.getComputedStyle(element);
33
- const px = (prop) => parsePixelValue(computed[prop] || "");
17
+ const inlineStyle = element.style;
18
+ /**
19
+ * Get inline and computed value for single-value property.
20
+ * @param name - CSS property name
21
+ * @param fallback - Alternate longhand key when browsers don't
22
+ * populate the shorthand (e.g. borderStyle -> borderTopStyle)
23
+ */
24
+ const prop = (name, fallback) => ({
25
+ inline: inlineStyle[name] || (fallback ? inlineStyle[fallback] : "") || "",
26
+ computed: (fallback ? computed[fallback] : computed[name]) || "",
27
+ });
28
+ /**
29
+ * Get inline and computed value for 4-side shorthand (e.g. padding) property.
30
+ * Reconstructs the shorthand from individual sides when only longhands are
31
+ * set (inlineStyle.padding is '' but inlineStyle.paddingTop has a value).
32
+ */
33
+ const box = (shorthand, top, right, bottom, left) => {
34
+ let inlineValue = inlineStyle[shorthand] || "";
35
+ if (!inlineValue) {
36
+ const iT = inlineStyle[top] || "", iR = inlineStyle[right] || "", iB = inlineStyle[bottom] || "", iL = inlineStyle[left] || "";
37
+ if (iT || iR || iB || iL) {
38
+ inlineValue = `${iT || "0px"} ${iR || "0px"} ${iB || "0px"} ${iL || "0px"}`;
39
+ }
40
+ }
41
+ return {
42
+ inline: inlineValue,
43
+ computed: `${computed[top] || ""} ${computed[right] || ""} ${computed[bottom] || ""} ${computed[left] || ""}`,
44
+ };
45
+ };
34
46
  return {
35
- paddingTop: px("paddingTop"),
36
- paddingRight: px("paddingRight"),
37
- paddingBottom: px("paddingBottom"),
38
- paddingLeft: px("paddingLeft"),
39
- marginTop: px("marginTop"),
40
- marginRight: px("marginRight"),
41
- marginBottom: px("marginBottom"),
42
- marginLeft: px("marginLeft"),
43
- backgroundColor: computed.backgroundColor,
44
- fontFamily: computed.fontFamily,
47
+ width: prop("width"),
48
+ minWidth: prop("minWidth"),
49
+ maxWidth: prop("maxWidth"),
50
+ height: prop("height"),
51
+ minHeight: prop("minHeight"),
52
+ maxHeight: prop("maxHeight"),
53
+ overflow: prop("overflow"),
54
+ padding: box("padding", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft"),
55
+ margin: box("margin", "marginTop", "marginRight", "marginBottom", "marginLeft"),
56
+ backgroundColor: prop("backgroundColor"),
57
+ borderWidth: box("borderWidth", "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth"),
58
+ borderStyle: prop("borderStyle", "borderTopStyle"),
59
+ borderColor: prop("borderColor", "borderTopColor"),
60
+ borderRadius: box("borderRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomRightRadius", "borderBottomLeftRadius"),
61
+ color: prop("color"),
62
+ fontFamily: prop("fontFamily"),
63
+ fontSize: prop("fontSize"),
64
+ fontWeight: prop("fontWeight"),
65
+ fontStyle: prop("fontStyle"),
66
+ lineHeight: prop("lineHeight"),
67
+ letterSpacing: prop("letterSpacing"),
68
+ textAlign: prop("textAlign"),
69
+ textDecoration: prop("textDecoration", "textDecorationLine"),
70
+ textTransform: prop("textTransform"),
45
71
  };
46
72
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@salesforce/webapp-experimental",
3
3
  "description": "[experimental] Core package for Salesforce Web Applications",
4
- "version": "1.69.0",
4
+ "version": "1.71.0",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "type": "module",
7
7
  "main": "./dist/index.js",
@@ -45,7 +45,7 @@
45
45
  },
46
46
  "dependencies": {
47
47
  "@salesforce/core": "^8.23.4",
48
- "@salesforce/sdk-data": "^1.69.0",
48
+ "@salesforce/sdk-data": "^1.71.0",
49
49
  "axios": "^1.7.7",
50
50
  "micromatch": "^4.0.8",
51
51
  "path-to-regexp": "^8.3.0"