@wix/editor-react-components 1.2528.0 → 1.2529.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/site/components/AnimatedIcon/manifest.js +1 -1
- package/dist/site/components/Button/manifest.js +1 -1
- package/dist/site/components/Tabs/component.js +1 -1
- package/dist/site/components/Tabs/manifest.js +1 -1
- package/dist/site/components/TestComp/TestComp.d.ts +0 -2
- package/dist/site/components/TestComp/component.js +3 -14
- package/dist/site/components/TestComp/css.css +0 -24
- package/dist/site/components/TestComp/manifest.js +2 -14
- package/dist/site/components/chunks/AnimatedIcon.js +1 -1
- package/dist/site/components/chunks/Button.js +1 -1
- package/dist/site/components/chunks/constants19.js +49 -54
- package/dist/site/components/chunks/constants20.js +51 -48
- package/dist/site/components/chunks/constants21.js +45 -43
- package/package.json +2 -2
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { b as DISPLAY_GROUPS, N as NativeStateType, C as CSS_PROPERTIES, D as DATA, a as ACTIONS, L as LAYOUT, A as Archetype } from "../chunks/chunk-6KMOHX3X.js";
|
|
2
|
-
import { c as DesignStates, d as DisplayNames, D as DEFAULT_ANIMATION_DURATION } from "../chunks/
|
|
2
|
+
import { c as DesignStates, d as DisplayNames, D as DEFAULT_ANIMATION_DURATION } from "../chunks/constants21.js";
|
|
3
3
|
import { w as withSpec } from "../chunks/manifest.js";
|
|
4
4
|
import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";
|
|
5
5
|
const displayConfig = {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { a as ACTIONS, E as ELEMENTS, N as NativeStateType, C as CSS_PROPERTIES, I as INTERACTIONS, D as DATA, L as LAYOUT, A as Archetype } from "../chunks/chunk-6KMOHX3X.js";
|
|
2
|
-
import { D as DesignStates, b as DisplayNames } from "../chunks/
|
|
2
|
+
import { D as DesignStates, b as DisplayNames } from "../chunks/constants20.js";
|
|
3
3
|
import { m as manifestFocusable, c as manifestMouseHover, d as manifestClickable } from "../chunks/manifestSdkMixins.js";
|
|
4
4
|
import { w as withSpec } from "../chunks/manifest.js";
|
|
5
5
|
import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
2
|
import { useState, useEffect, useCallback, useMemo, useRef, useLayoutEffect } from "react";
|
|
3
3
|
import { c as clsx } from "../chunks/clsx.js";
|
|
4
|
-
import { O as OVERFLOW_BEHAVIOR, c as classes } from "../chunks/
|
|
4
|
+
import { O as OVERFLOW_BEHAVIOR, c as classes } from "../chunks/constants19.js";
|
|
5
5
|
import { d as debounce } from "../chunks/performanceUtils.js";
|
|
6
6
|
import { useService } from "@wix/services-manager-react";
|
|
7
7
|
import { E as EnvironmentDefinition } from "../chunks/index2.js";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { E as ELEMENTS, N as NativeStateType, C as CSS_PROPERTIES, a as ACTIONS, I as INTERACTIONS, b as DISPLAY_GROUPS, D as DATA, L as LAYOUT, c as ContainerType, A as Archetype } from "../chunks/chunk-6KMOHX3X.js";
|
|
2
|
-
import { D as DesignStates, c as classes, R as ROOT_MENU_ITEM_CSS_PROPERTIES, a as ROOT_MENU_ITEM_CUSTOM_PROPERTIES } from "../chunks/
|
|
2
|
+
import { D as DesignStates, c as classes, R as ROOT_MENU_ITEM_CSS_PROPERTIES, a as ROOT_MENU_ITEM_CUSTOM_PROPERTIES } from "../chunks/constants19.js";
|
|
3
3
|
import { w as withSpec } from "../chunks/manifest.js";
|
|
4
4
|
import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";
|
|
5
5
|
import { m as manifestFocusable, c as manifestMouseHover, d as manifestClickable, a as manifestChangeable } from "../chunks/manifestSdkMixins.js";
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
2
|
import { MenuItemType } from '../Menu/Menu.types';
|
|
3
3
|
import { A11y, Direction } from '@wix/editor-react-types';
|
|
4
|
-
import { AnimatedIconBuilderProps } from '../AnimatedIcon/types';
|
|
5
4
|
import { SdkFunctionClickableProps, SdkFunctionMouseHoverProps, SdkFunctionFocusableProps } from '../../../utils/functions/sdkFunctionCallbackProps';
|
|
6
5
|
type TestCompProps = {
|
|
7
6
|
id: string;
|
|
@@ -27,7 +26,6 @@ type TestCompProps = {
|
|
|
27
26
|
errorText?: {
|
|
28
27
|
text?: string;
|
|
29
28
|
};
|
|
30
|
-
dummyAnimatedIcon?: AnimatedIconBuilderProps;
|
|
31
29
|
};
|
|
32
30
|
a11y?: A11y;
|
|
33
31
|
isEnabled?: boolean;
|
|
@@ -2,7 +2,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { c as clsx } from "../chunks/clsx.js";
|
|
3
3
|
import { f as formatClassNames } from "../chunks/classNames.js";
|
|
4
4
|
import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
|
|
5
|
-
import AnimatedIconWithReducedMotion from "../AnimatedIcon/component.js";
|
|
6
5
|
const semanticClassNames = {
|
|
7
6
|
root: "test-comp-card"
|
|
8
7
|
};
|
|
@@ -39,7 +38,7 @@ const styles = {
|
|
|
39
38
|
functionBtn
|
|
40
39
|
};
|
|
41
40
|
const TestComp = (props) => {
|
|
42
|
-
var _a, _b, _c, _d, _e, _f, _g
|
|
41
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
43
42
|
const {
|
|
44
43
|
id,
|
|
45
44
|
className,
|
|
@@ -144,23 +143,13 @@ const TestComp = (props) => {
|
|
|
144
143
|
}
|
|
145
144
|
),
|
|
146
145
|
isError && /* @__PURE__ */ jsx("p", { className: "card-error-text", children: ((_e = elementProps.errorText) == null ? void 0 : _e.text) || "Something went wrong" }),
|
|
147
|
-
/* @__PURE__ */ jsx(
|
|
148
|
-
AnimatedIconWithReducedMotion,
|
|
149
|
-
{
|
|
150
|
-
...elementProps.dummyAnimatedIcon,
|
|
151
|
-
className: clsx(
|
|
152
|
-
"dummy-animated-icon",
|
|
153
|
-
(_f = elementProps.dummyAnimatedIcon) == null ? void 0 : _f.className
|
|
154
|
-
)
|
|
155
|
-
}
|
|
156
|
-
),
|
|
157
|
-
((_g = elementProps.image) == null ? void 0 : _g.src) && /* @__PURE__ */ jsx(
|
|
146
|
+
((_f = elementProps.image) == null ? void 0 : _f.src) && /* @__PURE__ */ jsx(
|
|
158
147
|
"div",
|
|
159
148
|
{
|
|
160
149
|
className: clsx(
|
|
161
150
|
styles.imageWrapper,
|
|
162
151
|
"card-image",
|
|
163
|
-
(
|
|
152
|
+
(_g = elementProps.image) == null ? void 0 : _g.className
|
|
164
153
|
),
|
|
165
154
|
children: /* @__PURE__ */ jsx(
|
|
166
155
|
"img",
|
|
@@ -205,28 +205,4 @@
|
|
|
205
205
|
}
|
|
206
206
|
.presetWrapper__J1yzj {
|
|
207
207
|
display: contents;
|
|
208
|
-
}
|
|
209
|
-
.animatedIcon__3o5ii {
|
|
210
|
-
--size: 16px;
|
|
211
|
-
--fill: #000000;
|
|
212
|
-
--rotation: 0deg;
|
|
213
|
-
}
|
|
214
|
-
.animatedIcon__3o5ii {
|
|
215
|
-
display: block;
|
|
216
|
-
width: inherit;
|
|
217
|
-
height: inherit;
|
|
218
|
-
width: var(--size);
|
|
219
|
-
height: var(--size);
|
|
220
|
-
}
|
|
221
|
-
.animatedIcon__3o5ii svg {
|
|
222
|
-
width: var(--size);
|
|
223
|
-
height: var(--size);
|
|
224
|
-
display: block;
|
|
225
|
-
fill: var(--fill);
|
|
226
|
-
transform: rotate(var(--rotation));
|
|
227
|
-
}
|
|
228
|
-
@media (forced-colors: active) {
|
|
229
|
-
.animatedIcon__3o5ii svg {
|
|
230
|
-
fill: currentColor;
|
|
231
|
-
}
|
|
232
208
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { L as LAYOUT, N as NativeStateType,
|
|
1
|
+
import { L as LAYOUT, N as NativeStateType, D as DATA, E as ELEMENTS, b as DISPLAY_GROUPS, C as CSS_PROPERTIES, A as Archetype } from "../chunks/chunk-6KMOHX3X.js";
|
|
2
2
|
import { m as manifestFocusable, c as manifestMouseHover, d as manifestClickable } from "../chunks/manifestSdkMixins.js";
|
|
3
3
|
const DesignStates = {
|
|
4
4
|
testCompCard: {
|
|
@@ -31,10 +31,7 @@ const manifest = {
|
|
|
31
31
|
resources: {
|
|
32
32
|
client: {
|
|
33
33
|
componentUrl: "./site/components/TestComp/component.tsx",
|
|
34
|
-
moduleSpecifier: "@wix/editor-react-components/TestComp"
|
|
35
|
-
dependencies: {
|
|
36
|
-
componentDependencies: ["@wix/editor-react-components/AnimatedIcon"]
|
|
37
|
-
}
|
|
34
|
+
moduleSpecifier: "@wix/editor-react-components/TestComp"
|
|
38
35
|
}
|
|
39
36
|
},
|
|
40
37
|
editorElement: {
|
|
@@ -546,15 +543,6 @@ const manifest = {
|
|
|
546
543
|
color: {}
|
|
547
544
|
}
|
|
548
545
|
}
|
|
549
|
-
},
|
|
550
|
-
dummyAnimatedIcon: {
|
|
551
|
-
spec: "sp.erc.testCompAnimatedIcon",
|
|
552
|
-
elementType: ELEMENTS.ELEMENT_TYPE.refElement,
|
|
553
|
-
refElement: {
|
|
554
|
-
selector: ".dummy-animated-icon",
|
|
555
|
-
displayName: "Dummy Animated Icon",
|
|
556
|
-
type: "wixEditorElements.AnimatedIcon"
|
|
557
|
-
}
|
|
558
546
|
}
|
|
559
547
|
},
|
|
560
548
|
states: {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef, useRef, useImperativeHandle, useCallback, useMemo } from "react";
|
|
3
3
|
import { p as parseSvg } from "./parseSvg.js";
|
|
4
|
-
import { A as AnimatedSvgIds, a as AnimatedDataAttributes, b as AnimationDirection, T as TestIds, D as DEFAULT_ANIMATION_DURATION } from "./
|
|
4
|
+
import { A as AnimatedSvgIds, a as AnimatedDataAttributes, b as AnimationDirection, T as TestIds, D as DEFAULT_ANIMATION_DURATION } from "./constants21.js";
|
|
5
5
|
import { c as cn } from "./index9.js";
|
|
6
6
|
const AnimatedSvg = forwardRef(
|
|
7
7
|
({ svgContent, reducedMotion = false, duration }, ref) => {
|
|
@@ -7,7 +7,7 @@ import { a as getDataAttributes, g as getQaDataAttributes } from "./dataUtils.js
|
|
|
7
7
|
import { f as formatClassNames } from "./classNames.js";
|
|
8
8
|
import { I as IconAnimationTriggers } from "./Button.types.js";
|
|
9
9
|
import AnimatedIconWithReducedMotion from "../AnimatedIcon/component.js";
|
|
10
|
-
import { T as TRANSITION_DURATION, S as SEMANTIC_CLASS_NAMES, a as TestIds } from "./
|
|
10
|
+
import { T as TRANSITION_DURATION, S as SEMANTIC_CLASS_NAMES, a as TestIds } from "./constants20.js";
|
|
11
11
|
import { d as activateByEnterButton, a as activateBySpaceOrEnterButton, r as removeAriaPrefix, g as getAccessibilityAttributesSpread } from "./a11y.js";
|
|
12
12
|
import { i as isValidLink } from "./Link.js";
|
|
13
13
|
const root = "root__IB9QF";
|
|
@@ -1,61 +1,56 @@
|
|
|
1
|
-
const
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
const classes = {
|
|
2
|
+
tabs: "tabs",
|
|
3
|
+
tabMenu: "tab-menu",
|
|
4
|
+
tabMenuItemsWrapper: "tab-menu-items-wrapper",
|
|
5
|
+
tabMenuItems: "tab-menu-items",
|
|
6
|
+
menuItem: "menu-item",
|
|
7
|
+
scrollButton: "scroll-button",
|
|
8
|
+
tabContentContainer: "tab-content-container",
|
|
9
|
+
tabContentItem: "tab-content-item"
|
|
7
10
|
};
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
AnimationDirection2["BACKWARD"] = "Backward";
|
|
11
|
-
return AnimationDirection2;
|
|
12
|
-
})(AnimationDirection || {});
|
|
13
|
-
const AnimatedDataAttributes = {
|
|
14
|
-
[
|
|
15
|
-
"Forward"
|
|
16
|
-
/* FORWARD */
|
|
17
|
-
]: "data-animated-end-path",
|
|
18
|
-
[
|
|
19
|
-
"Backward"
|
|
20
|
-
/* BACKWARD */
|
|
21
|
-
]: "data-animated-start-path"
|
|
22
|
-
};
|
|
23
|
-
const TestIds = {
|
|
24
|
-
animatedSvg: "animated-svg",
|
|
25
|
-
animateTagForward: "animate-tag-forward",
|
|
26
|
-
animateTagBackward: "animate-tag-backward"
|
|
11
|
+
const OVERFLOW_BEHAVIOR = {
|
|
12
|
+
WRAP: "wrap"
|
|
27
13
|
};
|
|
28
14
|
const DesignStates = {
|
|
29
|
-
|
|
30
|
-
hover: { displayName: "Hover", className: "
|
|
31
|
-
disabled: { displayName: "Disabled", className: "animated-icon--disabled" },
|
|
32
|
-
selected: { displayName: "Selected", className: "animated-icon--selected" }
|
|
33
|
-
}
|
|
34
|
-
};
|
|
35
|
-
const DisplayNames = {
|
|
36
|
-
root: {
|
|
37
|
-
elementDisplayName: "Animated Icon",
|
|
38
|
-
customActions: {
|
|
39
|
-
animatedIcon: {
|
|
40
|
-
displayName: "Icon"
|
|
41
|
-
}
|
|
42
|
-
},
|
|
43
|
-
data: {
|
|
44
|
-
duration: "Duration"
|
|
45
|
-
},
|
|
46
|
-
cssCustomProperties: {
|
|
47
|
-
size: "Size",
|
|
48
|
-
fill: "Color",
|
|
49
|
-
rotation: "Rotation"
|
|
50
|
-
}
|
|
15
|
+
menuItem: {
|
|
16
|
+
hover: { displayName: "Hover", className: "tabs__item--hover" }
|
|
51
17
|
}
|
|
52
18
|
};
|
|
19
|
+
const ROOT_MENU_ITEM_CUSTOM_PROPERTIES = [
|
|
20
|
+
"menu-item-background",
|
|
21
|
+
"menu-item-box-shadow",
|
|
22
|
+
"menu-item-color",
|
|
23
|
+
"menu-item-text-decoration-line",
|
|
24
|
+
"menu-item-letter-spacing",
|
|
25
|
+
"menu-item-text-shadow",
|
|
26
|
+
"menu-item-text-align",
|
|
27
|
+
"menu-item-flex",
|
|
28
|
+
"menu-item-border-width-top",
|
|
29
|
+
"menu-item-border-width-bottom",
|
|
30
|
+
"menu-item-border-width-inline-start",
|
|
31
|
+
"menu-item-border-width-inline-end",
|
|
32
|
+
"menu-item-border-style-top",
|
|
33
|
+
"menu-item-border-style-bottom",
|
|
34
|
+
"menu-item-border-style-inline-start",
|
|
35
|
+
"menu-item-border-style-inline-end",
|
|
36
|
+
"menu-item-border-color-top",
|
|
37
|
+
"menu-item-border-color-bottom",
|
|
38
|
+
"menu-item-border-color-inline-start",
|
|
39
|
+
"menu-item-border-color-inline-end",
|
|
40
|
+
"menu-item-border-radius-start-start",
|
|
41
|
+
"menu-item-border-radius-start-end",
|
|
42
|
+
"menu-item-border-radius-end-start",
|
|
43
|
+
"menu-item-border-radius-end-end",
|
|
44
|
+
"menu-item-padding-top",
|
|
45
|
+
"menu-item-padding-bottom",
|
|
46
|
+
"menu-item-padding-inline-start",
|
|
47
|
+
"menu-item-padding-inline-end"
|
|
48
|
+
];
|
|
49
|
+
const ROOT_MENU_ITEM_CSS_PROPERTIES = ["font"];
|
|
53
50
|
export {
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
DesignStates as c,
|
|
60
|
-
DisplayNames as d
|
|
51
|
+
DesignStates as D,
|
|
52
|
+
OVERFLOW_BEHAVIOR as O,
|
|
53
|
+
ROOT_MENU_ITEM_CSS_PROPERTIES as R,
|
|
54
|
+
ROOT_MENU_ITEM_CUSTOM_PROPERTIES as a,
|
|
55
|
+
classes as c
|
|
61
56
|
};
|
|
@@ -1,56 +1,59 @@
|
|
|
1
|
-
const
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
tabMenuItemsWrapper: "tab-menu-items-wrapper",
|
|
5
|
-
tabMenuItems: "tab-menu-items",
|
|
6
|
-
menuItem: "menu-item",
|
|
7
|
-
scrollButton: "scroll-button",
|
|
8
|
-
tabContentContainer: "tab-content-container",
|
|
9
|
-
tabContentItem: "tab-content-item"
|
|
1
|
+
const TestIds = {
|
|
2
|
+
buttonContent: "buttonContent",
|
|
3
|
+
buttonLabel: "stylablebutton-label"
|
|
10
4
|
};
|
|
11
|
-
const
|
|
12
|
-
|
|
5
|
+
const TRANSITION_DURATION = 400;
|
|
6
|
+
const SEMANTIC_CLASS_NAMES = {
|
|
7
|
+
root: "button",
|
|
8
|
+
buttonLabel: "button__label"
|
|
13
9
|
};
|
|
14
10
|
const DesignStates = {
|
|
15
|
-
|
|
16
|
-
hover: { displayName: "Hover", className: "
|
|
11
|
+
root: {
|
|
12
|
+
hover: { displayName: "Hover", className: "button--hover" },
|
|
13
|
+
disabled: { displayName: "Disabled", className: "button--disabled" }
|
|
14
|
+
},
|
|
15
|
+
label: {
|
|
16
|
+
hover: { displayName: "Hover", className: "button__label--hover" },
|
|
17
|
+
disabled: { displayName: "Disabled", className: "button__label--disabled" }
|
|
18
|
+
}
|
|
19
|
+
};
|
|
20
|
+
const DisplayNames = {
|
|
21
|
+
root: {
|
|
22
|
+
elementDisplayName: "Button",
|
|
23
|
+
data: {
|
|
24
|
+
disabled: "Disabled"
|
|
25
|
+
},
|
|
26
|
+
cssProperties: {
|
|
27
|
+
gap: "Space between text and icon"
|
|
28
|
+
},
|
|
29
|
+
cssCustomProperties: {
|
|
30
|
+
"content-horizontal-alignment": "Alignment",
|
|
31
|
+
"icon-position": "Icon position"
|
|
32
|
+
},
|
|
33
|
+
presets: {
|
|
34
|
+
baseButton: "Base Button"
|
|
35
|
+
},
|
|
36
|
+
iconPosition: {
|
|
37
|
+
beforeText: "Before text",
|
|
38
|
+
afterText: "After text",
|
|
39
|
+
belowText: "Below text",
|
|
40
|
+
aboveText: "Above text"
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
label: {
|
|
44
|
+
elementDisplayName: "Text",
|
|
45
|
+
cssProperties: {
|
|
46
|
+
font: "Typography"
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
data: {
|
|
50
|
+
iconCollapsed: "Display icon"
|
|
17
51
|
}
|
|
18
52
|
};
|
|
19
|
-
const ROOT_MENU_ITEM_CUSTOM_PROPERTIES = [
|
|
20
|
-
"menu-item-background",
|
|
21
|
-
"menu-item-box-shadow",
|
|
22
|
-
"menu-item-color",
|
|
23
|
-
"menu-item-text-decoration-line",
|
|
24
|
-
"menu-item-letter-spacing",
|
|
25
|
-
"menu-item-text-shadow",
|
|
26
|
-
"menu-item-text-align",
|
|
27
|
-
"menu-item-flex",
|
|
28
|
-
"menu-item-border-width-top",
|
|
29
|
-
"menu-item-border-width-bottom",
|
|
30
|
-
"menu-item-border-width-inline-start",
|
|
31
|
-
"menu-item-border-width-inline-end",
|
|
32
|
-
"menu-item-border-style-top",
|
|
33
|
-
"menu-item-border-style-bottom",
|
|
34
|
-
"menu-item-border-style-inline-start",
|
|
35
|
-
"menu-item-border-style-inline-end",
|
|
36
|
-
"menu-item-border-color-top",
|
|
37
|
-
"menu-item-border-color-bottom",
|
|
38
|
-
"menu-item-border-color-inline-start",
|
|
39
|
-
"menu-item-border-color-inline-end",
|
|
40
|
-
"menu-item-border-radius-start-start",
|
|
41
|
-
"menu-item-border-radius-start-end",
|
|
42
|
-
"menu-item-border-radius-end-start",
|
|
43
|
-
"menu-item-border-radius-end-end",
|
|
44
|
-
"menu-item-padding-top",
|
|
45
|
-
"menu-item-padding-bottom",
|
|
46
|
-
"menu-item-padding-inline-start",
|
|
47
|
-
"menu-item-padding-inline-end"
|
|
48
|
-
];
|
|
49
|
-
const ROOT_MENU_ITEM_CSS_PROPERTIES = ["font"];
|
|
50
53
|
export {
|
|
51
54
|
DesignStates as D,
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
55
|
+
SEMANTIC_CLASS_NAMES as S,
|
|
56
|
+
TRANSITION_DURATION as T,
|
|
57
|
+
TestIds as a,
|
|
58
|
+
DisplayNames as b
|
|
56
59
|
};
|
|
@@ -1,59 +1,61 @@
|
|
|
1
|
-
const
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
const DEFAULT_ANIMATION_DURATION = 0.2;
|
|
2
|
+
const AnimatedSvgIds = {
|
|
3
|
+
animatedSvg: "animatedSvg",
|
|
4
|
+
animatedTagPath: "animatedPath",
|
|
5
|
+
animateTagForward: "animateForward",
|
|
6
|
+
animateTagBackward: "animateBackward"
|
|
7
|
+
};
|
|
8
|
+
var AnimationDirection = /* @__PURE__ */ ((AnimationDirection2) => {
|
|
9
|
+
AnimationDirection2["FORWARD"] = "Forward";
|
|
10
|
+
AnimationDirection2["BACKWARD"] = "Backward";
|
|
11
|
+
return AnimationDirection2;
|
|
12
|
+
})(AnimationDirection || {});
|
|
13
|
+
const AnimatedDataAttributes = {
|
|
14
|
+
[
|
|
15
|
+
"Forward"
|
|
16
|
+
/* FORWARD */
|
|
17
|
+
]: "data-animated-end-path",
|
|
18
|
+
[
|
|
19
|
+
"Backward"
|
|
20
|
+
/* BACKWARD */
|
|
21
|
+
]: "data-animated-start-path"
|
|
4
22
|
};
|
|
5
|
-
const
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
23
|
+
const TestIds = {
|
|
24
|
+
animatedSvg: "animated-svg",
|
|
25
|
+
animateTagForward: "animate-tag-forward",
|
|
26
|
+
animateTagBackward: "animate-tag-backward"
|
|
9
27
|
};
|
|
10
28
|
const DesignStates = {
|
|
11
29
|
root: {
|
|
12
|
-
hover: { displayName: "Hover", className: "
|
|
13
|
-
disabled: { displayName: "Disabled", className: "
|
|
14
|
-
|
|
15
|
-
label: {
|
|
16
|
-
hover: { displayName: "Hover", className: "button__label--hover" },
|
|
17
|
-
disabled: { displayName: "Disabled", className: "button__label--disabled" }
|
|
30
|
+
hover: { displayName: "Hover", className: "animated-icon--hover" },
|
|
31
|
+
disabled: { displayName: "Disabled", className: "animated-icon--disabled" },
|
|
32
|
+
selected: { displayName: "Selected", className: "animated-icon--selected" }
|
|
18
33
|
}
|
|
19
34
|
};
|
|
20
35
|
const DisplayNames = {
|
|
21
36
|
root: {
|
|
22
|
-
elementDisplayName: "
|
|
23
|
-
|
|
24
|
-
|
|
37
|
+
elementDisplayName: "Animated Icon",
|
|
38
|
+
customActions: {
|
|
39
|
+
animatedIcon: {
|
|
40
|
+
displayName: "Icon"
|
|
41
|
+
}
|
|
25
42
|
},
|
|
26
|
-
|
|
27
|
-
|
|
43
|
+
data: {
|
|
44
|
+
duration: "Duration"
|
|
28
45
|
},
|
|
29
46
|
cssCustomProperties: {
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
presets: {
|
|
34
|
-
baseButton: "Base Button"
|
|
35
|
-
},
|
|
36
|
-
iconPosition: {
|
|
37
|
-
beforeText: "Before text",
|
|
38
|
-
afterText: "After text",
|
|
39
|
-
belowText: "Below text",
|
|
40
|
-
aboveText: "Above text"
|
|
41
|
-
}
|
|
42
|
-
},
|
|
43
|
-
label: {
|
|
44
|
-
elementDisplayName: "Text",
|
|
45
|
-
cssProperties: {
|
|
46
|
-
font: "Typography"
|
|
47
|
+
size: "Size",
|
|
48
|
+
fill: "Color",
|
|
49
|
+
rotation: "Rotation"
|
|
47
50
|
}
|
|
48
|
-
},
|
|
49
|
-
data: {
|
|
50
|
-
iconCollapsed: "Display icon"
|
|
51
51
|
}
|
|
52
52
|
};
|
|
53
53
|
export {
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
54
|
+
AnimatedSvgIds as A,
|
|
55
|
+
DEFAULT_ANIMATION_DURATION as D,
|
|
56
|
+
TestIds as T,
|
|
57
|
+
AnimatedDataAttributes as a,
|
|
58
|
+
AnimationDirection as b,
|
|
59
|
+
DesignStates as c,
|
|
60
|
+
DisplayNames as d
|
|
59
61
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wix/editor-react-components",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.2529.0",
|
|
4
4
|
"description": "React components for the Wix Editor",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -197,5 +197,5 @@
|
|
|
197
197
|
"registry": "https://registry.npmjs.org/",
|
|
198
198
|
"access": "public"
|
|
199
199
|
},
|
|
200
|
-
"falconPackageHash": "
|
|
200
|
+
"falconPackageHash": "61729e1850309a23091648246790b9c0fb8f4f415912733ba5e1adb6"
|
|
201
201
|
}
|