@builder.io/sdk-qwik 0.17.7 → 0.17.8
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/lib/browser/blocks/custom-code/custom-code.qwik.cjs +1 -1
- package/lib/browser/blocks/custom-code/custom-code.qwik.mjs +1 -1
- package/lib/browser/components/block/components/block-styles.qwik.cjs +10 -2
- package/lib/browser/components/block/components/block-styles.qwik.mjs +10 -2
- package/lib/browser/components/content/components/enable-editor.qwik.cjs +2 -2
- package/lib/browser/components/content/components/enable-editor.qwik.mjs +3 -3
- package/lib/browser/constants/device-sizes.qwik.cjs +19 -3
- package/lib/browser/constants/device-sizes.qwik.mjs +19 -3
- package/lib/browser/constants/sdk-version.qwik.cjs +1 -1
- package/lib/browser/constants/sdk-version.qwik.mjs +1 -1
- package/lib/browser/scripts/init-editing.qwik.cjs +1 -0
- package/lib/browser/scripts/init-editing.qwik.mjs +1 -0
- package/lib/edge/blocks/custom-code/custom-code.qwik.cjs +1 -1
- package/lib/edge/blocks/custom-code/custom-code.qwik.mjs +1 -1
- package/lib/edge/components/block/components/block-styles.qwik.cjs +10 -2
- package/lib/edge/components/block/components/block-styles.qwik.mjs +10 -2
- package/lib/edge/components/content/components/enable-editor.qwik.cjs +2 -2
- package/lib/edge/components/content/components/enable-editor.qwik.mjs +3 -3
- package/lib/edge/constants/device-sizes.qwik.cjs +19 -3
- package/lib/edge/constants/device-sizes.qwik.mjs +19 -3
- package/lib/edge/constants/sdk-version.qwik.cjs +1 -1
- package/lib/edge/constants/sdk-version.qwik.mjs +1 -1
- package/lib/edge/scripts/init-editing.qwik.cjs +1 -0
- package/lib/edge/scripts/init-editing.qwik.mjs +1 -0
- package/lib/node/blocks/custom-code/custom-code.qwik.cjs +1 -1
- package/lib/node/blocks/custom-code/custom-code.qwik.mjs +1 -1
- package/lib/node/components/block/components/block-styles.qwik.cjs +10 -2
- package/lib/node/components/block/components/block-styles.qwik.mjs +10 -2
- package/lib/node/components/content/components/enable-editor.qwik.cjs +2 -2
- package/lib/node/components/content/components/enable-editor.qwik.mjs +3 -3
- package/lib/node/constants/device-sizes.qwik.cjs +19 -3
- package/lib/node/constants/device-sizes.qwik.mjs +19 -3
- package/lib/node/constants/sdk-version.qwik.cjs +1 -1
- package/lib/node/constants/sdk-version.qwik.mjs +1 -1
- package/lib/node/scripts/init-editing.qwik.cjs +1 -0
- package/lib/node/scripts/init-editing.qwik.mjs +1 -0
- package/package.json +1 -1
- package/types/src/constants/device-sizes.d.ts +3 -2
- package/types/src/constants/sdk-version.d.ts +1 -1
- package/types/src/types/builder-block.d.ts +0 -1
- package/types/src/types/builder-content.d.ts +1 -0
|
@@ -7,7 +7,7 @@ const CustomCode = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inline
|
|
|
7
7
|
scriptsInserted: [],
|
|
8
8
|
scriptsRun: []
|
|
9
9
|
});
|
|
10
|
-
qwik.useOn("
|
|
10
|
+
qwik.useOn("readystatechange", /* @__PURE__ */ qwik.inlinedQrl((event, element) => {
|
|
11
11
|
const [state2] = qwik.useLexicalScope();
|
|
12
12
|
if (!(element == null ? void 0 : element.getElementsByTagName) || typeof window === "undefined")
|
|
13
13
|
return;
|
|
@@ -5,7 +5,7 @@ const CustomCode = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
|
|
|
5
5
|
scriptsInserted: [],
|
|
6
6
|
scriptsRun: []
|
|
7
7
|
});
|
|
8
|
-
useOn("
|
|
8
|
+
useOn("readystatechange", /* @__PURE__ */ inlinedQrl((event, element) => {
|
|
9
9
|
const [state2] = useLexicalScope();
|
|
10
10
|
if (!(element == null ? void 0 : element.getElementsByTagName) || typeof window === "undefined")
|
|
11
11
|
return;
|
|
@@ -21,15 +21,17 @@ const BlockStyles = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
|
|
|
21
21
|
props
|
|
22
22
|
]));
|
|
23
23
|
const css$1 = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
|
|
24
|
-
var _a, _b, _c;
|
|
24
|
+
var _a, _b, _c, _d, _e;
|
|
25
25
|
const [props2] = qwik.useLexicalScope();
|
|
26
26
|
const processedBlock = props2.block;
|
|
27
27
|
const styles = processedBlock.responsiveStyles;
|
|
28
28
|
const content = props2.context.content;
|
|
29
29
|
const sizesWithUpdatedBreakpoints = deviceSizes.getSizesForBreakpoints(((_a = content == null ? void 0 : content.meta) == null ? void 0 : _a.breakpoints) || {});
|
|
30
|
+
const contentHasXSmallBreakpoint = Boolean((_c = (_b = content == null ? void 0 : content.meta) == null ? void 0 : _b.breakpoints) == null ? void 0 : _c.xsmall);
|
|
30
31
|
const largeStyles = styles == null ? void 0 : styles.large;
|
|
31
32
|
const mediumStyles = styles == null ? void 0 : styles.medium;
|
|
32
33
|
const smallStyles = styles == null ? void 0 : styles.small;
|
|
34
|
+
const xsmallStyles = styles == null ? void 0 : styles.xsmall;
|
|
33
35
|
const className = processedBlock.id;
|
|
34
36
|
if (!className)
|
|
35
37
|
return "";
|
|
@@ -47,10 +49,15 @@ const BlockStyles = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
|
|
|
47
49
|
styles: smallStyles,
|
|
48
50
|
mediaQuery: deviceSizes.getMaxWidthQueryForSize("small", sizesWithUpdatedBreakpoints)
|
|
49
51
|
}) : "";
|
|
52
|
+
const xsmallStylesClass = xsmallStyles && contentHasXSmallBreakpoint ? css.createCssClass({
|
|
53
|
+
className,
|
|
54
|
+
styles: xsmallStyles,
|
|
55
|
+
mediaQuery: deviceSizes.getMaxWidthQueryForSize("xsmall", sizesWithUpdatedBreakpoints)
|
|
56
|
+
}) : "";
|
|
50
57
|
const hoverAnimation = processedBlock.animations && processedBlock.animations.find((item) => item.trigger === "hover");
|
|
51
58
|
let hoverStylesClass = "";
|
|
52
59
|
if (hoverAnimation) {
|
|
53
|
-
const hoverStyles = ((
|
|
60
|
+
const hoverStyles = ((_e = (_d = hoverAnimation.steps) == null ? void 0 : _d[1]) == null ? void 0 : _e.styles) || {};
|
|
54
61
|
hoverStylesClass = css.createCssClass({
|
|
55
62
|
className: `${className}:hover`,
|
|
56
63
|
styles: {
|
|
@@ -64,6 +71,7 @@ const BlockStyles = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
|
|
|
64
71
|
largeStylesClass,
|
|
65
72
|
mediumStylesClass,
|
|
66
73
|
smallStylesClass,
|
|
74
|
+
xsmallStylesClass,
|
|
67
75
|
hoverStylesClass
|
|
68
76
|
].join(" ");
|
|
69
77
|
}, "BlockStyles_component_css_useComputed_b9Ru8qTcNik", [
|
|
@@ -19,15 +19,17 @@ const BlockStyles = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
|
|
|
19
19
|
props
|
|
20
20
|
]));
|
|
21
21
|
const css = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
|
|
22
|
-
var _a, _b, _c;
|
|
22
|
+
var _a, _b, _c, _d, _e;
|
|
23
23
|
const [props2] = useLexicalScope();
|
|
24
24
|
const processedBlock = props2.block;
|
|
25
25
|
const styles = processedBlock.responsiveStyles;
|
|
26
26
|
const content = props2.context.content;
|
|
27
27
|
const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(((_a = content == null ? void 0 : content.meta) == null ? void 0 : _a.breakpoints) || {});
|
|
28
|
+
const contentHasXSmallBreakpoint = Boolean((_c = (_b = content == null ? void 0 : content.meta) == null ? void 0 : _b.breakpoints) == null ? void 0 : _c.xsmall);
|
|
28
29
|
const largeStyles = styles == null ? void 0 : styles.large;
|
|
29
30
|
const mediumStyles = styles == null ? void 0 : styles.medium;
|
|
30
31
|
const smallStyles = styles == null ? void 0 : styles.small;
|
|
32
|
+
const xsmallStyles = styles == null ? void 0 : styles.xsmall;
|
|
31
33
|
const className = processedBlock.id;
|
|
32
34
|
if (!className)
|
|
33
35
|
return "";
|
|
@@ -45,10 +47,15 @@ const BlockStyles = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
|
|
|
45
47
|
styles: smallStyles,
|
|
46
48
|
mediaQuery: getMaxWidthQueryForSize("small", sizesWithUpdatedBreakpoints)
|
|
47
49
|
}) : "";
|
|
50
|
+
const xsmallStylesClass = xsmallStyles && contentHasXSmallBreakpoint ? createCssClass({
|
|
51
|
+
className,
|
|
52
|
+
styles: xsmallStyles,
|
|
53
|
+
mediaQuery: getMaxWidthQueryForSize("xsmall", sizesWithUpdatedBreakpoints)
|
|
54
|
+
}) : "";
|
|
48
55
|
const hoverAnimation = processedBlock.animations && processedBlock.animations.find((item) => item.trigger === "hover");
|
|
49
56
|
let hoverStylesClass = "";
|
|
50
57
|
if (hoverAnimation) {
|
|
51
|
-
const hoverStyles = ((
|
|
58
|
+
const hoverStyles = ((_e = (_d = hoverAnimation.steps) == null ? void 0 : _d[1]) == null ? void 0 : _e.styles) || {};
|
|
52
59
|
hoverStylesClass = createCssClass({
|
|
53
60
|
className: `${className}:hover`,
|
|
54
61
|
styles: {
|
|
@@ -62,6 +69,7 @@ const BlockStyles = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
|
|
|
62
69
|
largeStylesClass,
|
|
63
70
|
mediumStylesClass,
|
|
64
71
|
smallStylesClass,
|
|
72
|
+
xsmallStylesClass,
|
|
65
73
|
hoverStylesClass
|
|
66
74
|
].join(" ");
|
|
67
75
|
}, "BlockStyles_component_css_useComputed_b9Ru8qTcNik", [
|
|
@@ -211,7 +211,7 @@ const EnableEditor = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inli
|
|
|
211
211
|
showContentProps,
|
|
212
212
|
state
|
|
213
213
|
]));
|
|
214
|
-
qwik.
|
|
214
|
+
qwik.useOnDocument("readystatechange", /* @__PURE__ */ qwik.inlinedQrl((event, element) => {
|
|
215
215
|
var _a2, _b2, _c, _d;
|
|
216
216
|
const [props2] = qwik.useLexicalScope();
|
|
217
217
|
if (isBrowser.isBrowser()) {
|
|
@@ -238,7 +238,7 @@ const EnableEditor = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inli
|
|
|
238
238
|
element.dispatchEvent(new CustomEvent("initpreviewingbldr"));
|
|
239
239
|
}
|
|
240
240
|
}
|
|
241
|
-
}, "
|
|
241
|
+
}, "EnableEditor_component_useOnDocument_H7syEGJXM4Y", [
|
|
242
242
|
props
|
|
243
243
|
]));
|
|
244
244
|
qwik.useContextProvider(builder_context, props.builderContextSignal);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { componentQrl, inlinedQrl, _jsxBranch, useComputedQrl, useLexicalScope, useSignal, useStore, useOn, useContextProvider, useTaskQrl, _jsxC, Slot, _IMMUTABLE, _fnSignal } from "@builder.io/qwik";
|
|
1
|
+
import { componentQrl, inlinedQrl, _jsxBranch, useComputedQrl, useLexicalScope, useSignal, useStore, useOn, useOnDocument, useContextProvider, useTaskQrl, _jsxC, Slot, _IMMUTABLE, _fnSignal } from "@builder.io/qwik";
|
|
2
2
|
import { Fragment } from "@builder.io/qwik/jsx-runtime";
|
|
3
3
|
import builderContext from "../../../context/builder.context.qwik.mjs";
|
|
4
4
|
import { evaluate } from "../../../functions/evaluate/evaluate.qwik.mjs";
|
|
@@ -209,7 +209,7 @@ const EnableEditor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
|
|
|
209
209
|
showContentProps,
|
|
210
210
|
state
|
|
211
211
|
]));
|
|
212
|
-
|
|
212
|
+
useOnDocument("readystatechange", /* @__PURE__ */ inlinedQrl((event, element) => {
|
|
213
213
|
var _a2, _b2, _c, _d;
|
|
214
214
|
const [props2] = useLexicalScope();
|
|
215
215
|
if (isBrowser()) {
|
|
@@ -236,7 +236,7 @@ const EnableEditor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
|
|
|
236
236
|
element.dispatchEvent(new CustomEvent("initpreviewingbldr"));
|
|
237
237
|
}
|
|
238
238
|
}
|
|
239
|
-
}, "
|
|
239
|
+
}, "EnableEditor_component_useOnDocument_H7syEGJXM4Y", [
|
|
240
240
|
props
|
|
241
241
|
]));
|
|
242
242
|
useContextProvider(builderContext, props.builderContextSignal);
|
|
@@ -2,8 +2,13 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const fastClone = require("../functions/fast-clone.qwik.cjs");
|
|
4
4
|
const SIZES = {
|
|
5
|
+
xsmall: {
|
|
6
|
+
min: 0,
|
|
7
|
+
default: 160,
|
|
8
|
+
max: 320
|
|
9
|
+
},
|
|
5
10
|
small: {
|
|
6
|
-
min:
|
|
11
|
+
min: 321,
|
|
7
12
|
default: 321,
|
|
8
13
|
max: 640
|
|
9
14
|
},
|
|
@@ -19,11 +24,22 @@ const SIZES = {
|
|
|
19
24
|
}
|
|
20
25
|
};
|
|
21
26
|
const getMaxWidthQueryForSize = (size, sizeValues = SIZES) => `@media (max-width: ${sizeValues[size].max}px)`;
|
|
22
|
-
const getSizesForBreakpoints = (
|
|
27
|
+
const getSizesForBreakpoints = (breakpoints) => {
|
|
23
28
|
const newSizes = fastClone.fastClone(SIZES);
|
|
29
|
+
if (!breakpoints)
|
|
30
|
+
return newSizes;
|
|
31
|
+
const { xsmall, small, medium } = breakpoints;
|
|
32
|
+
if (xsmall) {
|
|
33
|
+
const xsmallMin = Math.floor(xsmall / 2);
|
|
34
|
+
newSizes.xsmall = {
|
|
35
|
+
max: xsmall,
|
|
36
|
+
min: xsmallMin,
|
|
37
|
+
default: xsmallMin + 1
|
|
38
|
+
};
|
|
39
|
+
}
|
|
24
40
|
if (!small || !medium)
|
|
25
41
|
return newSizes;
|
|
26
|
-
const smallMin = Math.floor(small / 2);
|
|
42
|
+
const smallMin = xsmall ? newSizes.xsmall.max + 1 : Math.floor(small / 2);
|
|
27
43
|
newSizes.small = {
|
|
28
44
|
max: small,
|
|
29
45
|
min: smallMin,
|
|
@@ -1,7 +1,12 @@
|
|
|
1
1
|
import { fastClone } from "../functions/fast-clone.qwik.mjs";
|
|
2
2
|
const SIZES = {
|
|
3
|
+
xsmall: {
|
|
4
|
+
min: 0,
|
|
5
|
+
default: 160,
|
|
6
|
+
max: 320
|
|
7
|
+
},
|
|
3
8
|
small: {
|
|
4
|
-
min:
|
|
9
|
+
min: 321,
|
|
5
10
|
default: 321,
|
|
6
11
|
max: 640
|
|
7
12
|
},
|
|
@@ -17,11 +22,22 @@ const SIZES = {
|
|
|
17
22
|
}
|
|
18
23
|
};
|
|
19
24
|
const getMaxWidthQueryForSize = (size, sizeValues = SIZES) => `@media (max-width: ${sizeValues[size].max}px)`;
|
|
20
|
-
const getSizesForBreakpoints = (
|
|
25
|
+
const getSizesForBreakpoints = (breakpoints) => {
|
|
21
26
|
const newSizes = fastClone(SIZES);
|
|
27
|
+
if (!breakpoints)
|
|
28
|
+
return newSizes;
|
|
29
|
+
const { xsmall, small, medium } = breakpoints;
|
|
30
|
+
if (xsmall) {
|
|
31
|
+
const xsmallMin = Math.floor(xsmall / 2);
|
|
32
|
+
newSizes.xsmall = {
|
|
33
|
+
max: xsmall,
|
|
34
|
+
min: xsmallMin,
|
|
35
|
+
default: xsmallMin + 1
|
|
36
|
+
};
|
|
37
|
+
}
|
|
22
38
|
if (!small || !medium)
|
|
23
39
|
return newSizes;
|
|
24
|
-
const smallMin = Math.floor(small / 2);
|
|
40
|
+
const smallMin = xsmall ? newSizes.xsmall.max + 1 : Math.floor(small / 2);
|
|
25
41
|
newSizes.small = {
|
|
26
42
|
max: small,
|
|
27
43
|
min: smallMin,
|
|
@@ -7,7 +7,7 @@ const CustomCode = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inline
|
|
|
7
7
|
scriptsInserted: [],
|
|
8
8
|
scriptsRun: []
|
|
9
9
|
});
|
|
10
|
-
qwik.useOn("
|
|
10
|
+
qwik.useOn("readystatechange", /* @__PURE__ */ qwik.inlinedQrl((event, element) => {
|
|
11
11
|
const [state2] = qwik.useLexicalScope();
|
|
12
12
|
if (!(element == null ? void 0 : element.getElementsByTagName) || typeof window === "undefined")
|
|
13
13
|
return;
|
|
@@ -5,7 +5,7 @@ const CustomCode = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
|
|
|
5
5
|
scriptsInserted: [],
|
|
6
6
|
scriptsRun: []
|
|
7
7
|
});
|
|
8
|
-
useOn("
|
|
8
|
+
useOn("readystatechange", /* @__PURE__ */ inlinedQrl((event, element) => {
|
|
9
9
|
const [state2] = useLexicalScope();
|
|
10
10
|
if (!(element == null ? void 0 : element.getElementsByTagName) || typeof window === "undefined")
|
|
11
11
|
return;
|
|
@@ -21,15 +21,17 @@ const BlockStyles = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
|
|
|
21
21
|
props
|
|
22
22
|
]));
|
|
23
23
|
const css$1 = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
|
|
24
|
-
var _a, _b, _c;
|
|
24
|
+
var _a, _b, _c, _d, _e;
|
|
25
25
|
const [props2] = qwik.useLexicalScope();
|
|
26
26
|
const processedBlock = props2.block;
|
|
27
27
|
const styles = processedBlock.responsiveStyles;
|
|
28
28
|
const content = props2.context.content;
|
|
29
29
|
const sizesWithUpdatedBreakpoints = deviceSizes.getSizesForBreakpoints(((_a = content == null ? void 0 : content.meta) == null ? void 0 : _a.breakpoints) || {});
|
|
30
|
+
const contentHasXSmallBreakpoint = Boolean((_c = (_b = content == null ? void 0 : content.meta) == null ? void 0 : _b.breakpoints) == null ? void 0 : _c.xsmall);
|
|
30
31
|
const largeStyles = styles == null ? void 0 : styles.large;
|
|
31
32
|
const mediumStyles = styles == null ? void 0 : styles.medium;
|
|
32
33
|
const smallStyles = styles == null ? void 0 : styles.small;
|
|
34
|
+
const xsmallStyles = styles == null ? void 0 : styles.xsmall;
|
|
33
35
|
const className = processedBlock.id;
|
|
34
36
|
if (!className)
|
|
35
37
|
return "";
|
|
@@ -47,10 +49,15 @@ const BlockStyles = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
|
|
|
47
49
|
styles: smallStyles,
|
|
48
50
|
mediaQuery: deviceSizes.getMaxWidthQueryForSize("small", sizesWithUpdatedBreakpoints)
|
|
49
51
|
}) : "";
|
|
52
|
+
const xsmallStylesClass = xsmallStyles && contentHasXSmallBreakpoint ? css.createCssClass({
|
|
53
|
+
className,
|
|
54
|
+
styles: xsmallStyles,
|
|
55
|
+
mediaQuery: deviceSizes.getMaxWidthQueryForSize("xsmall", sizesWithUpdatedBreakpoints)
|
|
56
|
+
}) : "";
|
|
50
57
|
const hoverAnimation = processedBlock.animations && processedBlock.animations.find((item) => item.trigger === "hover");
|
|
51
58
|
let hoverStylesClass = "";
|
|
52
59
|
if (hoverAnimation) {
|
|
53
|
-
const hoverStyles = ((
|
|
60
|
+
const hoverStyles = ((_e = (_d = hoverAnimation.steps) == null ? void 0 : _d[1]) == null ? void 0 : _e.styles) || {};
|
|
54
61
|
hoverStylesClass = css.createCssClass({
|
|
55
62
|
className: `${className}:hover`,
|
|
56
63
|
styles: {
|
|
@@ -64,6 +71,7 @@ const BlockStyles = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
|
|
|
64
71
|
largeStylesClass,
|
|
65
72
|
mediumStylesClass,
|
|
66
73
|
smallStylesClass,
|
|
74
|
+
xsmallStylesClass,
|
|
67
75
|
hoverStylesClass
|
|
68
76
|
].join(" ");
|
|
69
77
|
}, "BlockStyles_component_css_useComputed_b9Ru8qTcNik", [
|
|
@@ -19,15 +19,17 @@ const BlockStyles = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
|
|
|
19
19
|
props
|
|
20
20
|
]));
|
|
21
21
|
const css = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
|
|
22
|
-
var _a, _b, _c;
|
|
22
|
+
var _a, _b, _c, _d, _e;
|
|
23
23
|
const [props2] = useLexicalScope();
|
|
24
24
|
const processedBlock = props2.block;
|
|
25
25
|
const styles = processedBlock.responsiveStyles;
|
|
26
26
|
const content = props2.context.content;
|
|
27
27
|
const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(((_a = content == null ? void 0 : content.meta) == null ? void 0 : _a.breakpoints) || {});
|
|
28
|
+
const contentHasXSmallBreakpoint = Boolean((_c = (_b = content == null ? void 0 : content.meta) == null ? void 0 : _b.breakpoints) == null ? void 0 : _c.xsmall);
|
|
28
29
|
const largeStyles = styles == null ? void 0 : styles.large;
|
|
29
30
|
const mediumStyles = styles == null ? void 0 : styles.medium;
|
|
30
31
|
const smallStyles = styles == null ? void 0 : styles.small;
|
|
32
|
+
const xsmallStyles = styles == null ? void 0 : styles.xsmall;
|
|
31
33
|
const className = processedBlock.id;
|
|
32
34
|
if (!className)
|
|
33
35
|
return "";
|
|
@@ -45,10 +47,15 @@ const BlockStyles = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
|
|
|
45
47
|
styles: smallStyles,
|
|
46
48
|
mediaQuery: getMaxWidthQueryForSize("small", sizesWithUpdatedBreakpoints)
|
|
47
49
|
}) : "";
|
|
50
|
+
const xsmallStylesClass = xsmallStyles && contentHasXSmallBreakpoint ? createCssClass({
|
|
51
|
+
className,
|
|
52
|
+
styles: xsmallStyles,
|
|
53
|
+
mediaQuery: getMaxWidthQueryForSize("xsmall", sizesWithUpdatedBreakpoints)
|
|
54
|
+
}) : "";
|
|
48
55
|
const hoverAnimation = processedBlock.animations && processedBlock.animations.find((item) => item.trigger === "hover");
|
|
49
56
|
let hoverStylesClass = "";
|
|
50
57
|
if (hoverAnimation) {
|
|
51
|
-
const hoverStyles = ((
|
|
58
|
+
const hoverStyles = ((_e = (_d = hoverAnimation.steps) == null ? void 0 : _d[1]) == null ? void 0 : _e.styles) || {};
|
|
52
59
|
hoverStylesClass = createCssClass({
|
|
53
60
|
className: `${className}:hover`,
|
|
54
61
|
styles: {
|
|
@@ -62,6 +69,7 @@ const BlockStyles = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
|
|
|
62
69
|
largeStylesClass,
|
|
63
70
|
mediumStylesClass,
|
|
64
71
|
smallStylesClass,
|
|
72
|
+
xsmallStylesClass,
|
|
65
73
|
hoverStylesClass
|
|
66
74
|
].join(" ");
|
|
67
75
|
}, "BlockStyles_component_css_useComputed_b9Ru8qTcNik", [
|
|
@@ -211,7 +211,7 @@ const EnableEditor = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inli
|
|
|
211
211
|
showContentProps,
|
|
212
212
|
state
|
|
213
213
|
]));
|
|
214
|
-
qwik.
|
|
214
|
+
qwik.useOnDocument("readystatechange", /* @__PURE__ */ qwik.inlinedQrl((event, element) => {
|
|
215
215
|
var _a2, _b2, _c, _d;
|
|
216
216
|
const [props2] = qwik.useLexicalScope();
|
|
217
217
|
if (isBrowser.isBrowser()) {
|
|
@@ -238,7 +238,7 @@ const EnableEditor = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inli
|
|
|
238
238
|
element.dispatchEvent(new CustomEvent("initpreviewingbldr"));
|
|
239
239
|
}
|
|
240
240
|
}
|
|
241
|
-
}, "
|
|
241
|
+
}, "EnableEditor_component_useOnDocument_H7syEGJXM4Y", [
|
|
242
242
|
props
|
|
243
243
|
]));
|
|
244
244
|
qwik.useContextProvider(builder_context, props.builderContextSignal);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { componentQrl, inlinedQrl, _jsxBranch, useComputedQrl, useLexicalScope, useSignal, useStore, useOn, useContextProvider, useTaskQrl, _jsxC, Slot, _IMMUTABLE, _fnSignal } from "@builder.io/qwik";
|
|
1
|
+
import { componentQrl, inlinedQrl, _jsxBranch, useComputedQrl, useLexicalScope, useSignal, useStore, useOn, useOnDocument, useContextProvider, useTaskQrl, _jsxC, Slot, _IMMUTABLE, _fnSignal } from "@builder.io/qwik";
|
|
2
2
|
import { Fragment } from "@builder.io/qwik/jsx-runtime";
|
|
3
3
|
import builderContext from "../../../context/builder.context.qwik.mjs";
|
|
4
4
|
import { evaluate } from "../../../functions/evaluate/evaluate.qwik.mjs";
|
|
@@ -209,7 +209,7 @@ const EnableEditor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
|
|
|
209
209
|
showContentProps,
|
|
210
210
|
state
|
|
211
211
|
]));
|
|
212
|
-
|
|
212
|
+
useOnDocument("readystatechange", /* @__PURE__ */ inlinedQrl((event, element) => {
|
|
213
213
|
var _a2, _b2, _c, _d;
|
|
214
214
|
const [props2] = useLexicalScope();
|
|
215
215
|
if (isBrowser()) {
|
|
@@ -236,7 +236,7 @@ const EnableEditor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
|
|
|
236
236
|
element.dispatchEvent(new CustomEvent("initpreviewingbldr"));
|
|
237
237
|
}
|
|
238
238
|
}
|
|
239
|
-
}, "
|
|
239
|
+
}, "EnableEditor_component_useOnDocument_H7syEGJXM4Y", [
|
|
240
240
|
props
|
|
241
241
|
]));
|
|
242
242
|
useContextProvider(builderContext, props.builderContextSignal);
|
|
@@ -2,8 +2,13 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const fastClone = require("../functions/fast-clone.qwik.cjs");
|
|
4
4
|
const SIZES = {
|
|
5
|
+
xsmall: {
|
|
6
|
+
min: 0,
|
|
7
|
+
default: 160,
|
|
8
|
+
max: 320
|
|
9
|
+
},
|
|
5
10
|
small: {
|
|
6
|
-
min:
|
|
11
|
+
min: 321,
|
|
7
12
|
default: 321,
|
|
8
13
|
max: 640
|
|
9
14
|
},
|
|
@@ -19,11 +24,22 @@ const SIZES = {
|
|
|
19
24
|
}
|
|
20
25
|
};
|
|
21
26
|
const getMaxWidthQueryForSize = (size, sizeValues = SIZES) => `@media (max-width: ${sizeValues[size].max}px)`;
|
|
22
|
-
const getSizesForBreakpoints = (
|
|
27
|
+
const getSizesForBreakpoints = (breakpoints) => {
|
|
23
28
|
const newSizes = fastClone.fastClone(SIZES);
|
|
29
|
+
if (!breakpoints)
|
|
30
|
+
return newSizes;
|
|
31
|
+
const { xsmall, small, medium } = breakpoints;
|
|
32
|
+
if (xsmall) {
|
|
33
|
+
const xsmallMin = Math.floor(xsmall / 2);
|
|
34
|
+
newSizes.xsmall = {
|
|
35
|
+
max: xsmall,
|
|
36
|
+
min: xsmallMin,
|
|
37
|
+
default: xsmallMin + 1
|
|
38
|
+
};
|
|
39
|
+
}
|
|
24
40
|
if (!small || !medium)
|
|
25
41
|
return newSizes;
|
|
26
|
-
const smallMin = Math.floor(small / 2);
|
|
42
|
+
const smallMin = xsmall ? newSizes.xsmall.max + 1 : Math.floor(small / 2);
|
|
27
43
|
newSizes.small = {
|
|
28
44
|
max: small,
|
|
29
45
|
min: smallMin,
|
|
@@ -1,7 +1,12 @@
|
|
|
1
1
|
import { fastClone } from "../functions/fast-clone.qwik.mjs";
|
|
2
2
|
const SIZES = {
|
|
3
|
+
xsmall: {
|
|
4
|
+
min: 0,
|
|
5
|
+
default: 160,
|
|
6
|
+
max: 320
|
|
7
|
+
},
|
|
3
8
|
small: {
|
|
4
|
-
min:
|
|
9
|
+
min: 321,
|
|
5
10
|
default: 321,
|
|
6
11
|
max: 640
|
|
7
12
|
},
|
|
@@ -17,11 +22,22 @@ const SIZES = {
|
|
|
17
22
|
}
|
|
18
23
|
};
|
|
19
24
|
const getMaxWidthQueryForSize = (size, sizeValues = SIZES) => `@media (max-width: ${sizeValues[size].max}px)`;
|
|
20
|
-
const getSizesForBreakpoints = (
|
|
25
|
+
const getSizesForBreakpoints = (breakpoints) => {
|
|
21
26
|
const newSizes = fastClone(SIZES);
|
|
27
|
+
if (!breakpoints)
|
|
28
|
+
return newSizes;
|
|
29
|
+
const { xsmall, small, medium } = breakpoints;
|
|
30
|
+
if (xsmall) {
|
|
31
|
+
const xsmallMin = Math.floor(xsmall / 2);
|
|
32
|
+
newSizes.xsmall = {
|
|
33
|
+
max: xsmall,
|
|
34
|
+
min: xsmallMin,
|
|
35
|
+
default: xsmallMin + 1
|
|
36
|
+
};
|
|
37
|
+
}
|
|
22
38
|
if (!small || !medium)
|
|
23
39
|
return newSizes;
|
|
24
|
-
const smallMin = Math.floor(small / 2);
|
|
40
|
+
const smallMin = xsmall ? newSizes.xsmall.max + 1 : Math.floor(small / 2);
|
|
25
41
|
newSizes.small = {
|
|
26
42
|
max: small,
|
|
27
43
|
min: smallMin,
|
|
@@ -7,7 +7,7 @@ const CustomCode = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inline
|
|
|
7
7
|
scriptsInserted: [],
|
|
8
8
|
scriptsRun: []
|
|
9
9
|
});
|
|
10
|
-
qwik.useOn("
|
|
10
|
+
qwik.useOn("readystatechange", /* @__PURE__ */ qwik.inlinedQrl((event, element) => {
|
|
11
11
|
const [state2] = qwik.useLexicalScope();
|
|
12
12
|
if (!(element == null ? void 0 : element.getElementsByTagName) || typeof window === "undefined")
|
|
13
13
|
return;
|
|
@@ -5,7 +5,7 @@ const CustomCode = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
|
|
|
5
5
|
scriptsInserted: [],
|
|
6
6
|
scriptsRun: []
|
|
7
7
|
});
|
|
8
|
-
useOn("
|
|
8
|
+
useOn("readystatechange", /* @__PURE__ */ inlinedQrl((event, element) => {
|
|
9
9
|
const [state2] = useLexicalScope();
|
|
10
10
|
if (!(element == null ? void 0 : element.getElementsByTagName) || typeof window === "undefined")
|
|
11
11
|
return;
|
|
@@ -21,15 +21,17 @@ const BlockStyles = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
|
|
|
21
21
|
props
|
|
22
22
|
]));
|
|
23
23
|
const css$1 = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
|
|
24
|
-
var _a, _b, _c;
|
|
24
|
+
var _a, _b, _c, _d, _e;
|
|
25
25
|
const [props2] = qwik.useLexicalScope();
|
|
26
26
|
const processedBlock = props2.block;
|
|
27
27
|
const styles = processedBlock.responsiveStyles;
|
|
28
28
|
const content = props2.context.content;
|
|
29
29
|
const sizesWithUpdatedBreakpoints = deviceSizes.getSizesForBreakpoints(((_a = content == null ? void 0 : content.meta) == null ? void 0 : _a.breakpoints) || {});
|
|
30
|
+
const contentHasXSmallBreakpoint = Boolean((_c = (_b = content == null ? void 0 : content.meta) == null ? void 0 : _b.breakpoints) == null ? void 0 : _c.xsmall);
|
|
30
31
|
const largeStyles = styles == null ? void 0 : styles.large;
|
|
31
32
|
const mediumStyles = styles == null ? void 0 : styles.medium;
|
|
32
33
|
const smallStyles = styles == null ? void 0 : styles.small;
|
|
34
|
+
const xsmallStyles = styles == null ? void 0 : styles.xsmall;
|
|
33
35
|
const className = processedBlock.id;
|
|
34
36
|
if (!className)
|
|
35
37
|
return "";
|
|
@@ -47,10 +49,15 @@ const BlockStyles = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
|
|
|
47
49
|
styles: smallStyles,
|
|
48
50
|
mediaQuery: deviceSizes.getMaxWidthQueryForSize("small", sizesWithUpdatedBreakpoints)
|
|
49
51
|
}) : "";
|
|
52
|
+
const xsmallStylesClass = xsmallStyles && contentHasXSmallBreakpoint ? css.createCssClass({
|
|
53
|
+
className,
|
|
54
|
+
styles: xsmallStyles,
|
|
55
|
+
mediaQuery: deviceSizes.getMaxWidthQueryForSize("xsmall", sizesWithUpdatedBreakpoints)
|
|
56
|
+
}) : "";
|
|
50
57
|
const hoverAnimation = processedBlock.animations && processedBlock.animations.find((item) => item.trigger === "hover");
|
|
51
58
|
let hoverStylesClass = "";
|
|
52
59
|
if (hoverAnimation) {
|
|
53
|
-
const hoverStyles = ((
|
|
60
|
+
const hoverStyles = ((_e = (_d = hoverAnimation.steps) == null ? void 0 : _d[1]) == null ? void 0 : _e.styles) || {};
|
|
54
61
|
hoverStylesClass = css.createCssClass({
|
|
55
62
|
className: `${className}:hover`,
|
|
56
63
|
styles: {
|
|
@@ -64,6 +71,7 @@ const BlockStyles = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
|
|
|
64
71
|
largeStylesClass,
|
|
65
72
|
mediumStylesClass,
|
|
66
73
|
smallStylesClass,
|
|
74
|
+
xsmallStylesClass,
|
|
67
75
|
hoverStylesClass
|
|
68
76
|
].join(" ");
|
|
69
77
|
}, "BlockStyles_component_css_useComputed_b9Ru8qTcNik", [
|
|
@@ -19,15 +19,17 @@ const BlockStyles = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
|
|
|
19
19
|
props
|
|
20
20
|
]));
|
|
21
21
|
const css = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
|
|
22
|
-
var _a, _b, _c;
|
|
22
|
+
var _a, _b, _c, _d, _e;
|
|
23
23
|
const [props2] = useLexicalScope();
|
|
24
24
|
const processedBlock = props2.block;
|
|
25
25
|
const styles = processedBlock.responsiveStyles;
|
|
26
26
|
const content = props2.context.content;
|
|
27
27
|
const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(((_a = content == null ? void 0 : content.meta) == null ? void 0 : _a.breakpoints) || {});
|
|
28
|
+
const contentHasXSmallBreakpoint = Boolean((_c = (_b = content == null ? void 0 : content.meta) == null ? void 0 : _b.breakpoints) == null ? void 0 : _c.xsmall);
|
|
28
29
|
const largeStyles = styles == null ? void 0 : styles.large;
|
|
29
30
|
const mediumStyles = styles == null ? void 0 : styles.medium;
|
|
30
31
|
const smallStyles = styles == null ? void 0 : styles.small;
|
|
32
|
+
const xsmallStyles = styles == null ? void 0 : styles.xsmall;
|
|
31
33
|
const className = processedBlock.id;
|
|
32
34
|
if (!className)
|
|
33
35
|
return "";
|
|
@@ -45,10 +47,15 @@ const BlockStyles = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
|
|
|
45
47
|
styles: smallStyles,
|
|
46
48
|
mediaQuery: getMaxWidthQueryForSize("small", sizesWithUpdatedBreakpoints)
|
|
47
49
|
}) : "";
|
|
50
|
+
const xsmallStylesClass = xsmallStyles && contentHasXSmallBreakpoint ? createCssClass({
|
|
51
|
+
className,
|
|
52
|
+
styles: xsmallStyles,
|
|
53
|
+
mediaQuery: getMaxWidthQueryForSize("xsmall", sizesWithUpdatedBreakpoints)
|
|
54
|
+
}) : "";
|
|
48
55
|
const hoverAnimation = processedBlock.animations && processedBlock.animations.find((item) => item.trigger === "hover");
|
|
49
56
|
let hoverStylesClass = "";
|
|
50
57
|
if (hoverAnimation) {
|
|
51
|
-
const hoverStyles = ((
|
|
58
|
+
const hoverStyles = ((_e = (_d = hoverAnimation.steps) == null ? void 0 : _d[1]) == null ? void 0 : _e.styles) || {};
|
|
52
59
|
hoverStylesClass = createCssClass({
|
|
53
60
|
className: `${className}:hover`,
|
|
54
61
|
styles: {
|
|
@@ -62,6 +69,7 @@ const BlockStyles = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
|
|
|
62
69
|
largeStylesClass,
|
|
63
70
|
mediumStylesClass,
|
|
64
71
|
smallStylesClass,
|
|
72
|
+
xsmallStylesClass,
|
|
65
73
|
hoverStylesClass
|
|
66
74
|
].join(" ");
|
|
67
75
|
}, "BlockStyles_component_css_useComputed_b9Ru8qTcNik", [
|
|
@@ -211,7 +211,7 @@ const EnableEditor = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inli
|
|
|
211
211
|
showContentProps,
|
|
212
212
|
state
|
|
213
213
|
]));
|
|
214
|
-
qwik.
|
|
214
|
+
qwik.useOnDocument("readystatechange", /* @__PURE__ */ qwik.inlinedQrl((event, element) => {
|
|
215
215
|
var _a2, _b2, _c, _d;
|
|
216
216
|
const [props2] = qwik.useLexicalScope();
|
|
217
217
|
if (isBrowser.isBrowser()) {
|
|
@@ -238,7 +238,7 @@ const EnableEditor = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inli
|
|
|
238
238
|
element.dispatchEvent(new CustomEvent("initpreviewingbldr"));
|
|
239
239
|
}
|
|
240
240
|
}
|
|
241
|
-
}, "
|
|
241
|
+
}, "EnableEditor_component_useOnDocument_H7syEGJXM4Y", [
|
|
242
242
|
props
|
|
243
243
|
]));
|
|
244
244
|
qwik.useContextProvider(builder_context, props.builderContextSignal);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { componentQrl, inlinedQrl, _jsxBranch, useComputedQrl, useLexicalScope, useSignal, useStore, useOn, useContextProvider, useTaskQrl, _jsxC, Slot, _IMMUTABLE, _fnSignal } from "@builder.io/qwik";
|
|
1
|
+
import { componentQrl, inlinedQrl, _jsxBranch, useComputedQrl, useLexicalScope, useSignal, useStore, useOn, useOnDocument, useContextProvider, useTaskQrl, _jsxC, Slot, _IMMUTABLE, _fnSignal } from "@builder.io/qwik";
|
|
2
2
|
import { Fragment } from "@builder.io/qwik/jsx-runtime";
|
|
3
3
|
import builderContext from "../../../context/builder.context.qwik.mjs";
|
|
4
4
|
import { evaluate } from "../../../functions/evaluate/evaluate.qwik.mjs";
|
|
@@ -209,7 +209,7 @@ const EnableEditor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
|
|
|
209
209
|
showContentProps,
|
|
210
210
|
state
|
|
211
211
|
]));
|
|
212
|
-
|
|
212
|
+
useOnDocument("readystatechange", /* @__PURE__ */ inlinedQrl((event, element) => {
|
|
213
213
|
var _a2, _b2, _c, _d;
|
|
214
214
|
const [props2] = useLexicalScope();
|
|
215
215
|
if (isBrowser()) {
|
|
@@ -236,7 +236,7 @@ const EnableEditor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
|
|
|
236
236
|
element.dispatchEvent(new CustomEvent("initpreviewingbldr"));
|
|
237
237
|
}
|
|
238
238
|
}
|
|
239
|
-
}, "
|
|
239
|
+
}, "EnableEditor_component_useOnDocument_H7syEGJXM4Y", [
|
|
240
240
|
props
|
|
241
241
|
]));
|
|
242
242
|
useContextProvider(builderContext, props.builderContextSignal);
|
|
@@ -2,8 +2,13 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const fastClone = require("../functions/fast-clone.qwik.cjs");
|
|
4
4
|
const SIZES = {
|
|
5
|
+
xsmall: {
|
|
6
|
+
min: 0,
|
|
7
|
+
default: 160,
|
|
8
|
+
max: 320
|
|
9
|
+
},
|
|
5
10
|
small: {
|
|
6
|
-
min:
|
|
11
|
+
min: 321,
|
|
7
12
|
default: 321,
|
|
8
13
|
max: 640
|
|
9
14
|
},
|
|
@@ -19,11 +24,22 @@ const SIZES = {
|
|
|
19
24
|
}
|
|
20
25
|
};
|
|
21
26
|
const getMaxWidthQueryForSize = (size, sizeValues = SIZES) => `@media (max-width: ${sizeValues[size].max}px)`;
|
|
22
|
-
const getSizesForBreakpoints = (
|
|
27
|
+
const getSizesForBreakpoints = (breakpoints) => {
|
|
23
28
|
const newSizes = fastClone.fastClone(SIZES);
|
|
29
|
+
if (!breakpoints)
|
|
30
|
+
return newSizes;
|
|
31
|
+
const { xsmall, small, medium } = breakpoints;
|
|
32
|
+
if (xsmall) {
|
|
33
|
+
const xsmallMin = Math.floor(xsmall / 2);
|
|
34
|
+
newSizes.xsmall = {
|
|
35
|
+
max: xsmall,
|
|
36
|
+
min: xsmallMin,
|
|
37
|
+
default: xsmallMin + 1
|
|
38
|
+
};
|
|
39
|
+
}
|
|
24
40
|
if (!small || !medium)
|
|
25
41
|
return newSizes;
|
|
26
|
-
const smallMin = Math.floor(small / 2);
|
|
42
|
+
const smallMin = xsmall ? newSizes.xsmall.max + 1 : Math.floor(small / 2);
|
|
27
43
|
newSizes.small = {
|
|
28
44
|
max: small,
|
|
29
45
|
min: smallMin,
|
|
@@ -1,7 +1,12 @@
|
|
|
1
1
|
import { fastClone } from "../functions/fast-clone.qwik.mjs";
|
|
2
2
|
const SIZES = {
|
|
3
|
+
xsmall: {
|
|
4
|
+
min: 0,
|
|
5
|
+
default: 160,
|
|
6
|
+
max: 320
|
|
7
|
+
},
|
|
3
8
|
small: {
|
|
4
|
-
min:
|
|
9
|
+
min: 321,
|
|
5
10
|
default: 321,
|
|
6
11
|
max: 640
|
|
7
12
|
},
|
|
@@ -17,11 +22,22 @@ const SIZES = {
|
|
|
17
22
|
}
|
|
18
23
|
};
|
|
19
24
|
const getMaxWidthQueryForSize = (size, sizeValues = SIZES) => `@media (max-width: ${sizeValues[size].max}px)`;
|
|
20
|
-
const getSizesForBreakpoints = (
|
|
25
|
+
const getSizesForBreakpoints = (breakpoints) => {
|
|
21
26
|
const newSizes = fastClone(SIZES);
|
|
27
|
+
if (!breakpoints)
|
|
28
|
+
return newSizes;
|
|
29
|
+
const { xsmall, small, medium } = breakpoints;
|
|
30
|
+
if (xsmall) {
|
|
31
|
+
const xsmallMin = Math.floor(xsmall / 2);
|
|
32
|
+
newSizes.xsmall = {
|
|
33
|
+
max: xsmall,
|
|
34
|
+
min: xsmallMin,
|
|
35
|
+
default: xsmallMin + 1
|
|
36
|
+
};
|
|
37
|
+
}
|
|
22
38
|
if (!small || !medium)
|
|
23
39
|
return newSizes;
|
|
24
|
-
const smallMin = Math.floor(small / 2);
|
|
40
|
+
const smallMin = xsmall ? newSizes.xsmall.max + 1 : Math.floor(small / 2);
|
|
25
41
|
newSizes.small = {
|
|
26
42
|
max: small,
|
|
27
43
|
min: smallMin,
|
package/package.json
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export type SizeName = 'large' | 'medium' | 'small';
|
|
1
|
+
export type SizeName = 'large' | 'medium' | 'small' | 'xsmall';
|
|
2
2
|
interface Size {
|
|
3
3
|
min: number;
|
|
4
4
|
default: number;
|
|
@@ -6,8 +6,9 @@ interface Size {
|
|
|
6
6
|
}
|
|
7
7
|
export declare const getMaxWidthQueryForSize: (size: SizeName, sizeValues?: Record<SizeName, Size>) => string;
|
|
8
8
|
interface Breakpoints {
|
|
9
|
+
xsmall?: number;
|
|
9
10
|
small?: number;
|
|
10
11
|
medium?: number;
|
|
11
12
|
}
|
|
12
|
-
export declare const getSizesForBreakpoints: (
|
|
13
|
+
export declare const getSizesForBreakpoints: (breakpoints: Breakpoints) => Record<SizeName, Size>;
|
|
13
14
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const SDK_VERSION = "0.17.
|
|
1
|
+
export declare const SDK_VERSION = "0.17.8";
|