@wix/editor-react-components 1.2288.0 → 1.2289.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/AccordionComponent/component.js +1 -1
- package/dist/site/components/AccordionComponent/manifest.js +1 -1
- package/dist/site/components/AudioPlayer/component.js +5 -1105
- package/dist/site/components/AudioPlayer/manifest.js +1 -1
- package/dist/site/components/Breadcrumbs/component.js +3 -117
- package/dist/site/components/Breadcrumbs/manifest.js +1 -1
- package/dist/site/components/CollapsibleText/component.js +1 -1
- package/dist/site/components/CollapsibleText/manifest.js +1 -1
- package/dist/site/components/DatePicker/DatePicker.d.ts +3 -0
- package/dist/site/components/DatePicker/DatePicker.types.d.ts +91 -0
- package/dist/site/components/DatePicker/component.d.ts +2 -0
- package/dist/site/components/DatePicker/component.js +12181 -0
- package/dist/site/components/DatePicker/component.preview.d.ts +2 -0
- package/dist/site/components/DatePicker/components/DatePickerCalendar.d.ts +5 -0
- package/dist/site/components/DatePicker/components/DatePickerField.d.ts +6 -0
- package/dist/site/components/DatePicker/components/DatePickerLabel.d.ts +6 -0
- package/dist/site/components/DatePicker/components/DatePickerTooltip.d.ts +5 -0
- package/dist/site/components/DatePicker/constants.d.ts +177 -0
- package/dist/site/components/DatePicker/css.css +349 -0
- package/dist/site/components/DatePicker/datePickerUtils.d.ts +26 -0
- package/dist/site/components/DatePicker/hooks/useDateConstraints.d.ts +12 -0
- package/dist/site/components/DatePicker/hooks/useDatePickerValue.d.ts +15 -0
- package/dist/site/components/DatePicker/hooks/useUnavailableDates.d.ts +3 -0
- package/dist/site/components/DatePicker/index.d.ts +2 -0
- package/dist/site/components/DatePicker/index.js +6 -0
- package/dist/site/components/DatePicker/manifest.d.ts +5 -0
- package/dist/site/components/DatePicker/manifest.js +370 -0
- package/dist/site/components/Dropdown/component.js +1 -3
- package/dist/site/components/TextBox/component.js +1 -4
- package/dist/site/components/TextInput/component.js +4 -297
- package/dist/site/components/chunks/Button2.js +1118 -0
- package/dist/site/components/chunks/DismissSmall.js +7 -0
- package/dist/site/components/chunks/Group.js +108 -36
- package/dist/site/components/chunks/I18nProvider.js +32 -2
- package/dist/site/components/chunks/InfoCircleSmall.js +7 -0
- package/dist/site/components/chunks/Input.js +341 -0
- package/dist/site/components/chunks/constants32.js +152 -49
- package/dist/site/components/chunks/constants33.js +53 -71
- package/dist/site/components/chunks/constants34.js +73 -77
- package/dist/site/components/chunks/constants35.js +76 -57
- package/dist/site/components/chunks/constants36.js +72 -0
- package/dist/site/components/chunks/filterDOMProps.js +14 -8
- package/dist/site/components/chunks/useLocalizedStringFormatter.js +122 -0
- package/dist/site/components/extensions.js +53 -48
- package/package.json +3 -2
|
@@ -1,69 +1,172 @@
|
|
|
1
|
-
const manifestClasses = {
|
|
2
|
-
root: "collapsible-text",
|
|
3
|
-
text: "text",
|
|
4
|
-
expandControl: "expand-control"
|
|
5
|
-
};
|
|
6
1
|
const DisplayNames = {
|
|
7
2
|
root: {
|
|
8
|
-
elementDisplayName: "
|
|
9
|
-
actions: {
|
|
10
|
-
settings: "Settings",
|
|
11
|
-
design: "Design"
|
|
12
|
-
},
|
|
3
|
+
elementDisplayName: "Date Picker",
|
|
13
4
|
data: {
|
|
14
|
-
|
|
15
|
-
|
|
5
|
+
value: "Selected date",
|
|
6
|
+
endValue: "Selected end date",
|
|
7
|
+
onEndChange: "On End Change",
|
|
8
|
+
selectionMode: {
|
|
9
|
+
displayName: "Selection",
|
|
10
|
+
options: {
|
|
11
|
+
single: "Single date",
|
|
12
|
+
range: "Date range"
|
|
13
|
+
}
|
|
14
|
+
},
|
|
15
|
+
granularity: {
|
|
16
|
+
displayName: "Time precision",
|
|
16
17
|
options: {
|
|
17
|
-
|
|
18
|
-
|
|
18
|
+
day: "Date only",
|
|
19
|
+
hour: "Date and hour",
|
|
20
|
+
minute: "Date and time"
|
|
19
21
|
}
|
|
20
22
|
},
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
23
|
+
tooltip: "Tooltip",
|
|
24
|
+
label: "Label",
|
|
25
|
+
description: "Helper text",
|
|
26
|
+
minDate: "Earliest date",
|
|
27
|
+
maxDate: "Latest date",
|
|
28
|
+
unavailableDates: "Unavailable dates",
|
|
29
|
+
unavailableFrom: "From",
|
|
30
|
+
unavailableTo: "To",
|
|
31
|
+
allowPastDates: "Allow past dates",
|
|
32
|
+
allowFutureDates: "Allow future dates",
|
|
33
|
+
required: "Required",
|
|
34
|
+
readOnly: "Read only",
|
|
35
|
+
disabled: "Disabled",
|
|
36
|
+
clearable: "Show clear button"
|
|
25
37
|
},
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
38
|
+
designStates: {
|
|
39
|
+
hover: "Hover",
|
|
40
|
+
focus: "Focus",
|
|
41
|
+
disabled: "Disabled",
|
|
42
|
+
selected: "Selected"
|
|
29
43
|
},
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
textTextTransform: "Case"
|
|
44
|
+
elements: {
|
|
45
|
+
label: "Label",
|
|
46
|
+
dateInput: "Date input",
|
|
47
|
+
calendarButton: "Calendar button",
|
|
48
|
+
popover: "Popover",
|
|
49
|
+
calendar: "Calendar",
|
|
50
|
+
calendarDay: "Calendar day",
|
|
51
|
+
today: "Today"
|
|
39
52
|
}
|
|
40
53
|
}
|
|
41
54
|
};
|
|
42
55
|
const defaultValues = {
|
|
43
|
-
|
|
56
|
+
selectionMode: "single",
|
|
57
|
+
granularity: "day",
|
|
58
|
+
tooltip: "",
|
|
59
|
+
label: "",
|
|
60
|
+
description: "",
|
|
61
|
+
allowPastDates: true,
|
|
62
|
+
allowFutureDates: true,
|
|
63
|
+
required: false,
|
|
64
|
+
readOnly: false,
|
|
65
|
+
disabled: false,
|
|
66
|
+
clearable: false
|
|
67
|
+
};
|
|
68
|
+
var SelectionModeValues = /* @__PURE__ */ ((SelectionModeValues2) => {
|
|
69
|
+
SelectionModeValues2["Single"] = "single";
|
|
70
|
+
SelectionModeValues2["Range"] = "range";
|
|
71
|
+
return SelectionModeValues2;
|
|
72
|
+
})(SelectionModeValues || {});
|
|
73
|
+
var GranularityValues = /* @__PURE__ */ ((GranularityValues2) => {
|
|
74
|
+
GranularityValues2["Day"] = "day";
|
|
75
|
+
GranularityValues2["Hour"] = "hour";
|
|
76
|
+
GranularityValues2["Minute"] = "minute";
|
|
77
|
+
return GranularityValues2;
|
|
78
|
+
})(GranularityValues || {});
|
|
79
|
+
const DesignStates = {
|
|
80
|
+
root: {
|
|
81
|
+
hover: {
|
|
82
|
+
displayName: DisplayNames.root.designStates.hover,
|
|
83
|
+
className: "datePicker--hover"
|
|
84
|
+
},
|
|
85
|
+
focus: {
|
|
86
|
+
displayName: DisplayNames.root.designStates.focus,
|
|
87
|
+
className: "datePicker--focus"
|
|
88
|
+
},
|
|
89
|
+
disabled: {
|
|
90
|
+
displayName: DisplayNames.root.designStates.disabled,
|
|
91
|
+
className: "datePicker--disabled"
|
|
92
|
+
}
|
|
93
|
+
},
|
|
94
|
+
dateInput: {
|
|
95
|
+
hover: {
|
|
96
|
+
displayName: DisplayNames.root.designStates.hover,
|
|
97
|
+
className: "datePicker__group--hover"
|
|
98
|
+
},
|
|
99
|
+
focus: {
|
|
100
|
+
displayName: DisplayNames.root.designStates.focus,
|
|
101
|
+
className: "datePicker__group--focus"
|
|
102
|
+
},
|
|
103
|
+
disabled: {
|
|
104
|
+
displayName: DisplayNames.root.designStates.disabled,
|
|
105
|
+
className: "datePicker__group--disabled"
|
|
106
|
+
}
|
|
107
|
+
},
|
|
108
|
+
calendarButton: {
|
|
109
|
+
hover: {
|
|
110
|
+
displayName: DisplayNames.root.designStates.hover,
|
|
111
|
+
className: "datePicker__calendar-button--hover"
|
|
112
|
+
},
|
|
113
|
+
selected: {
|
|
114
|
+
displayName: DisplayNames.root.designStates.selected,
|
|
115
|
+
className: "datePicker__calendar-button--selected"
|
|
116
|
+
}
|
|
117
|
+
},
|
|
118
|
+
calendarDay: {
|
|
119
|
+
hover: {
|
|
120
|
+
displayName: DisplayNames.root.designStates.hover,
|
|
121
|
+
className: "datePicker__day--hover"
|
|
122
|
+
},
|
|
123
|
+
selected: {
|
|
124
|
+
displayName: DisplayNames.root.designStates.selected,
|
|
125
|
+
className: "datePicker__day--selected"
|
|
126
|
+
},
|
|
127
|
+
disabled: {
|
|
128
|
+
displayName: DisplayNames.root.designStates.disabled,
|
|
129
|
+
className: "datePicker__day--disabled"
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
};
|
|
133
|
+
const PREVIEW_CALENDAR_OPEN = "previewCalendarOpen";
|
|
134
|
+
const EMPTY_VALUE = "";
|
|
135
|
+
const ARIA_LABEL_NAMESPACE = "ariaLabels";
|
|
136
|
+
const AriaLabels = {
|
|
137
|
+
root: { key: "datePicker_aria_label", default: "Date picker" },
|
|
138
|
+
clear: { key: "datePicker_clear_button", default: "Clear" },
|
|
139
|
+
openCalendar: { key: "datePicker_open_calendar", default: "Open calendar" }
|
|
44
140
|
};
|
|
45
|
-
var ExpandModeValues = /* @__PURE__ */ ((ExpandModeValues2) => {
|
|
46
|
-
ExpandModeValues2["Link"] = "link";
|
|
47
|
-
ExpandModeValues2["Expand"] = "button";
|
|
48
|
-
return ExpandModeValues2;
|
|
49
|
-
})(ExpandModeValues || {});
|
|
50
141
|
const TestIds = {
|
|
51
|
-
root: "
|
|
52
|
-
|
|
142
|
+
root: "datepicker-root",
|
|
143
|
+
group: "datepicker-group",
|
|
144
|
+
field: "datepicker-field",
|
|
145
|
+
endField: "datepicker-end-field",
|
|
146
|
+
calendarButton: "datepicker-calendar-button",
|
|
147
|
+
clearButton: "datepicker-clear-button",
|
|
148
|
+
calendar: "datepicker-calendar",
|
|
149
|
+
tooltipButton: "datepicker-tooltip-button"
|
|
53
150
|
};
|
|
54
|
-
const
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
151
|
+
const selectors = {
|
|
152
|
+
root: "datePicker",
|
|
153
|
+
label: "datePicker__label",
|
|
154
|
+
group: "datePicker__group",
|
|
155
|
+
calendarButton: "datePicker__calendar-button",
|
|
156
|
+
popover: "datePicker__popover",
|
|
157
|
+
calendar: "datePicker__calendar",
|
|
158
|
+
day: "datePicker__day"
|
|
59
159
|
};
|
|
60
160
|
export {
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
161
|
+
ARIA_LABEL_NAMESPACE as A,
|
|
162
|
+
DesignStates as D,
|
|
163
|
+
EMPTY_VALUE as E,
|
|
164
|
+
GranularityValues as G,
|
|
165
|
+
PREVIEW_CALENDAR_OPEN as P,
|
|
166
|
+
SelectionModeValues as S,
|
|
65
167
|
TestIds as T,
|
|
168
|
+
AriaLabels as a,
|
|
169
|
+
DisplayNames as b,
|
|
66
170
|
defaultValues as d,
|
|
67
|
-
|
|
68
|
-
semanticClassNames as s
|
|
171
|
+
selectors as s
|
|
69
172
|
};
|
|
@@ -1,87 +1,69 @@
|
|
|
1
|
-
const
|
|
2
|
-
root: "
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
animatedHomeIcon: "animated-icon"
|
|
1
|
+
const manifestClasses = {
|
|
2
|
+
root: "collapsible-text",
|
|
3
|
+
text: "text",
|
|
4
|
+
expandControl: "expand-control"
|
|
6
5
|
};
|
|
7
6
|
const DisplayNames = {
|
|
8
7
|
root: {
|
|
9
|
-
elementDisplayName: "
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
},
|
|
14
|
-
item: {
|
|
15
|
-
elementDisplayName: "Items"
|
|
16
|
-
},
|
|
17
|
-
separator: {
|
|
18
|
-
elementDisplayName: "Separators"
|
|
19
|
-
},
|
|
20
|
-
homeIcon: {
|
|
21
|
-
elementDisplayName: "Home"
|
|
22
|
-
},
|
|
23
|
-
data: {
|
|
24
|
-
separator: "Separator",
|
|
25
|
-
displayHomepageAs: "Display homepage as",
|
|
26
|
-
horizontalSpacing: "Space between items",
|
|
27
|
-
verticalSpacing: "Space between rows",
|
|
28
|
-
alignment: "Alignment",
|
|
29
|
-
separatorOptions: {
|
|
30
|
-
slash: "Forward slash",
|
|
31
|
-
arrow: "Arrow"
|
|
8
|
+
elementDisplayName: "Collapsible Text",
|
|
9
|
+
actions: {
|
|
10
|
+
settings: "Settings",
|
|
11
|
+
design: "Design"
|
|
32
12
|
},
|
|
33
|
-
|
|
13
|
+
data: {
|
|
14
|
+
expandMode: {
|
|
15
|
+
displayName: "Choose what the button does",
|
|
16
|
+
options: {
|
|
17
|
+
button: "Expands",
|
|
18
|
+
link: "Links"
|
|
19
|
+
}
|
|
20
|
+
},
|
|
34
21
|
text: "Text",
|
|
35
|
-
|
|
22
|
+
readMoreText: "Expand button text",
|
|
23
|
+
readLessText: "Collapse button text",
|
|
24
|
+
linkText: "Link text"
|
|
36
25
|
},
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
hideHomepage: "Hide homepage",
|
|
41
|
-
hideCurrentPage: "Hide current page"
|
|
42
|
-
},
|
|
43
|
-
overflowItems: "Overflow items",
|
|
44
|
-
overflowItemsOptions: {
|
|
45
|
-
wrap: "Wrap",
|
|
46
|
-
collapse: "Collapse (with ellipses)"
|
|
26
|
+
elements: {
|
|
27
|
+
text: "Text",
|
|
28
|
+
button: "Button"
|
|
47
29
|
},
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
className: "breadcrumbs__item--selected"
|
|
30
|
+
cssCustomProperties: {
|
|
31
|
+
maxLines: "Lines displayed",
|
|
32
|
+
expandControlSpacing: "Space between text and button",
|
|
33
|
+
paragraphAlign: "Paragraph Alignment",
|
|
34
|
+
textColor: "Text color",
|
|
35
|
+
textFont: "Font",
|
|
36
|
+
textLineHeight: "Line spacing",
|
|
37
|
+
textTextDecoration: "Text Decoration",
|
|
38
|
+
textTextTransform: "Case"
|
|
58
39
|
}
|
|
59
40
|
}
|
|
60
41
|
};
|
|
61
|
-
const
|
|
62
|
-
|
|
63
|
-
type: "wixEditorElements.Breadcrumbs",
|
|
64
|
-
description: "A navigation component that displays the user's location within a site's hierarchy as a trail of links, allowing navigation back to any ancestor page."
|
|
42
|
+
const defaultValues = {
|
|
43
|
+
expandMode: "button"
|
|
65
44
|
};
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
45
|
+
var ExpandModeValues = /* @__PURE__ */ ((ExpandModeValues2) => {
|
|
46
|
+
ExpandModeValues2["Link"] = "link";
|
|
47
|
+
ExpandModeValues2["Expand"] = "button";
|
|
48
|
+
return ExpandModeValues2;
|
|
49
|
+
})(ExpandModeValues || {});
|
|
50
|
+
const TestIds = {
|
|
51
|
+
root: "collapsible-text-root",
|
|
52
|
+
textWrapper: "collapsible-text-text-wrapper"
|
|
69
53
|
};
|
|
70
|
-
const
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
fullTrail: "fullTrail",
|
|
76
|
-
hideHomepage: "hideHomepage",
|
|
77
|
-
hideCurrentPage: "hideCurrentPage"
|
|
54
|
+
const FALLBACK_LINE_HEIGHT = 22.4;
|
|
55
|
+
const LINE_HEIGHT_ROUNDING_ERROR_TOLERANCE = 1;
|
|
56
|
+
const semanticClassNames = {
|
|
57
|
+
root: "collapsible-text",
|
|
58
|
+
text: "collapsible-text__text"
|
|
78
59
|
};
|
|
79
60
|
export {
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
61
|
+
DisplayNames as D,
|
|
62
|
+
ExpandModeValues as E,
|
|
63
|
+
FALLBACK_LINE_HEIGHT as F,
|
|
64
|
+
LINE_HEIGHT_ROUNDING_ERROR_TOLERANCE as L,
|
|
65
|
+
TestIds as T,
|
|
66
|
+
defaultValues as d,
|
|
67
|
+
manifestClasses as m,
|
|
86
68
|
semanticClassNames as s
|
|
87
69
|
};
|
|
@@ -1,91 +1,87 @@
|
|
|
1
|
-
const
|
|
2
|
-
root: "
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
progressBar: "progressBar",
|
|
7
|
-
progressTrack: "progressTrack",
|
|
8
|
-
volumeControls: "volumeControls",
|
|
9
|
-
muteButton: "muteButton",
|
|
10
|
-
volumeSlider: "volumeSlider",
|
|
11
|
-
volumeTrack: "volumeTrack",
|
|
12
|
-
timeDisplay: "timeDisplay",
|
|
13
|
-
audioTitle: "audioTitle",
|
|
14
|
-
title: "title",
|
|
15
|
-
artistName: "artistName",
|
|
16
|
-
coverMedia: "coverMedia"
|
|
17
|
-
};
|
|
18
|
-
const dataDefaults = {
|
|
19
|
-
loop: false,
|
|
20
|
-
volume: 100
|
|
21
|
-
};
|
|
22
|
-
const borderDefaultValue = "0px none rgba(0, 0, 0, 1)";
|
|
23
|
-
const ARIA_LABELS = {
|
|
24
|
-
playButton: "Play",
|
|
25
|
-
pauseButton: "Pause",
|
|
26
|
-
muteButton: "Mute",
|
|
27
|
-
unmuteButton: "Unmute",
|
|
28
|
-
progressBar: "Seek",
|
|
29
|
-
volumeSlider: "Volume",
|
|
30
|
-
volumeControls: "Volume controls"
|
|
31
|
-
};
|
|
32
|
-
const DesignStates = {
|
|
33
|
-
controls: {
|
|
34
|
-
hover: {
|
|
35
|
-
displayName: "Hover",
|
|
36
|
-
className: "audio-player__controls--hover"
|
|
37
|
-
}
|
|
38
|
-
}
|
|
1
|
+
const semanticClassNames = {
|
|
2
|
+
root: "breadcrumbs",
|
|
3
|
+
itemLabel: "breadcrumbs-item-label",
|
|
4
|
+
separator: "breadcrumbs-separator",
|
|
5
|
+
animatedHomeIcon: "animated-icon"
|
|
39
6
|
};
|
|
40
7
|
const DisplayNames = {
|
|
41
8
|
root: {
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
},
|
|
46
|
-
cssCustomProperties: {
|
|
47
|
-
"content-horizontal-alignment": "Alignment",
|
|
48
|
-
"vertical-spacing": "Vertical spacing",
|
|
49
|
-
"audio-title-gap": "Space between track details"
|
|
9
|
+
elementDisplayName: "Breadcrumbs",
|
|
10
|
+
customActions: {
|
|
11
|
+
replaceHomeIcon: "Customize Icon"
|
|
50
12
|
}
|
|
51
13
|
},
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
cssCustomProperties: {
|
|
55
|
-
"progress-fill-color": "Progress bar color",
|
|
56
|
-
"volume-control-color": "Volume control color",
|
|
57
|
-
"time-display-color": "Time display",
|
|
58
|
-
"play-icon-color": "Play icon color",
|
|
59
|
-
"play-icon-size": "Play icon size"
|
|
60
|
-
},
|
|
61
|
-
displayGroups: {
|
|
62
|
-
fillColors: "Fill colors",
|
|
63
|
-
icon: "Icon"
|
|
64
|
-
}
|
|
14
|
+
item: {
|
|
15
|
+
elementDisplayName: "Items"
|
|
65
16
|
},
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
audioTitle: "Audio title",
|
|
69
|
-
artistName: "Artist name",
|
|
70
|
-
progressBar: "Progress bar",
|
|
71
|
-
timeDisplay: "Time display",
|
|
72
|
-
volumeControls: "Volume control"
|
|
17
|
+
separator: {
|
|
18
|
+
elementDisplayName: "Separators"
|
|
73
19
|
},
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
displayMode: "Display mode",
|
|
77
|
-
loop: "Plays in a loop",
|
|
78
|
-
volume: "Volume"
|
|
20
|
+
homeIcon: {
|
|
21
|
+
elementDisplayName: "Home"
|
|
79
22
|
},
|
|
80
|
-
|
|
81
|
-
|
|
23
|
+
data: {
|
|
24
|
+
separator: "Separator",
|
|
25
|
+
displayHomepageAs: "Display homepage as",
|
|
26
|
+
horizontalSpacing: "Space between items",
|
|
27
|
+
verticalSpacing: "Space between rows",
|
|
28
|
+
alignment: "Alignment",
|
|
29
|
+
separatorOptions: {
|
|
30
|
+
slash: "Forward slash",
|
|
31
|
+
arrow: "Arrow"
|
|
32
|
+
},
|
|
33
|
+
homepageModeOptions: {
|
|
34
|
+
text: "Text",
|
|
35
|
+
icon: "Icon"
|
|
36
|
+
},
|
|
37
|
+
defaultState: "Default state",
|
|
38
|
+
defaultStateOptions: {
|
|
39
|
+
fullTrail: "Full trail",
|
|
40
|
+
hideHomepage: "Hide homepage",
|
|
41
|
+
hideCurrentPage: "Hide current page"
|
|
42
|
+
},
|
|
43
|
+
overflowItems: "Overflow items",
|
|
44
|
+
overflowItemsOptions: {
|
|
45
|
+
wrap: "Wrap",
|
|
46
|
+
collapse: "Collapse (with ellipses)"
|
|
47
|
+
},
|
|
48
|
+
beforeEllipsis: "Items before ellipses",
|
|
49
|
+
afterEllipsis: "Items after ellipses"
|
|
50
|
+
}
|
|
51
|
+
};
|
|
52
|
+
const DesignStates = {
|
|
53
|
+
item: {
|
|
54
|
+
hover: { displayName: "Hover", className: "breadcrumbs__item--hover" },
|
|
55
|
+
selected: {
|
|
56
|
+
displayName: "Selected",
|
|
57
|
+
className: "breadcrumbs__item--selected"
|
|
58
|
+
}
|
|
82
59
|
}
|
|
83
60
|
};
|
|
61
|
+
const componentMetadata = {
|
|
62
|
+
id: "992fd74f-46fe-4cc3-b803-d70f75a11fbc",
|
|
63
|
+
type: "wixEditorElements.Breadcrumbs",
|
|
64
|
+
description: "A navigation component that displays the user's location within a site's hierarchy as a trail of links, allowing navigation back to any ancestor page."
|
|
65
|
+
};
|
|
66
|
+
const separatorValues = {
|
|
67
|
+
slash: "slash",
|
|
68
|
+
arrow: "arrow"
|
|
69
|
+
};
|
|
70
|
+
const homepageModeValues = {
|
|
71
|
+
text: "text",
|
|
72
|
+
icon: "icon"
|
|
73
|
+
};
|
|
74
|
+
const defaultStateValues = {
|
|
75
|
+
fullTrail: "fullTrail",
|
|
76
|
+
hideHomepage: "hideHomepage",
|
|
77
|
+
hideCurrentPage: "hideCurrentPage"
|
|
78
|
+
};
|
|
84
79
|
export {
|
|
85
|
-
ARIA_LABELS as A,
|
|
86
80
|
DesignStates as D,
|
|
87
81
|
DisplayNames as a,
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
82
|
+
separatorValues as b,
|
|
83
|
+
componentMetadata as c,
|
|
84
|
+
defaultStateValues as d,
|
|
85
|
+
homepageModeValues as h,
|
|
86
|
+
semanticClassNames as s
|
|
91
87
|
};
|
|
@@ -1,72 +1,91 @@
|
|
|
1
|
-
const
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
defaultState: "Choose the default state"
|
|
18
|
-
},
|
|
19
|
-
defaultStateOptions: {
|
|
20
|
-
allClosed: "All items closed",
|
|
21
|
-
firstOpened: "First item opened",
|
|
22
|
-
allOpened: "All items opened"
|
|
23
|
-
},
|
|
24
|
-
displayGroups: {
|
|
25
|
-
accordionItems: "Accordion Items"
|
|
26
|
-
},
|
|
27
|
-
layout: {
|
|
28
|
-
itemsGap: "Space between items"
|
|
29
|
-
}
|
|
1
|
+
const selectors = {
|
|
2
|
+
root: "audioPlayer",
|
|
3
|
+
controls: "controls",
|
|
4
|
+
playButton: "playButton",
|
|
5
|
+
playIcon: "playIcon",
|
|
6
|
+
progressBar: "progressBar",
|
|
7
|
+
progressTrack: "progressTrack",
|
|
8
|
+
volumeControls: "volumeControls",
|
|
9
|
+
muteButton: "muteButton",
|
|
10
|
+
volumeSlider: "volumeSlider",
|
|
11
|
+
volumeTrack: "volumeTrack",
|
|
12
|
+
timeDisplay: "timeDisplay",
|
|
13
|
+
audioTitle: "audioTitle",
|
|
14
|
+
title: "title",
|
|
15
|
+
artistName: "artistName",
|
|
16
|
+
coverMedia: "coverMedia"
|
|
30
17
|
};
|
|
31
|
-
const
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
allowMultipleOpen: false,
|
|
35
|
-
titleHtmlTag: "h3"
|
|
18
|
+
const dataDefaults = {
|
|
19
|
+
loop: false,
|
|
20
|
+
volume: 100
|
|
36
21
|
};
|
|
37
|
-
const
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
22
|
+
const borderDefaultValue = "0px none rgba(0, 0, 0, 1)";
|
|
23
|
+
const ARIA_LABELS = {
|
|
24
|
+
playButton: "Play",
|
|
25
|
+
pauseButton: "Pause",
|
|
26
|
+
muteButton: "Mute",
|
|
27
|
+
unmuteButton: "Unmute",
|
|
28
|
+
progressBar: "Seek",
|
|
29
|
+
volumeSlider: "Volume",
|
|
30
|
+
volumeControls: "Volume controls"
|
|
42
31
|
};
|
|
43
|
-
const CONTAINER_INITIAL_HEIGHT = 240;
|
|
44
32
|
const DesignStates = {
|
|
45
|
-
|
|
33
|
+
controls: {
|
|
46
34
|
hover: {
|
|
47
35
|
displayName: "Hover",
|
|
48
|
-
className: "
|
|
36
|
+
className: "audio-player__controls--hover"
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
};
|
|
40
|
+
const DisplayNames = {
|
|
41
|
+
root: {
|
|
42
|
+
displayName: "Audio Player",
|
|
43
|
+
cssProperties: {
|
|
44
|
+
color: "Background color"
|
|
49
45
|
},
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
46
|
+
cssCustomProperties: {
|
|
47
|
+
"content-horizontal-alignment": "Alignment",
|
|
48
|
+
"vertical-spacing": "Vertical spacing",
|
|
49
|
+
"audio-title-gap": "Space between track details"
|
|
53
50
|
}
|
|
54
51
|
},
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
52
|
+
controls: {
|
|
53
|
+
displayName: "Playback controls",
|
|
54
|
+
cssCustomProperties: {
|
|
55
|
+
"progress-fill-color": "Progress bar color",
|
|
56
|
+
"volume-control-color": "Volume control color",
|
|
57
|
+
"time-display-color": "Time display",
|
|
58
|
+
"play-icon-color": "Play icon color",
|
|
59
|
+
"play-icon-size": "Play icon size"
|
|
59
60
|
},
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
61
|
+
displayGroups: {
|
|
62
|
+
fillColors: "Fill colors",
|
|
63
|
+
icon: "Icon"
|
|
63
64
|
}
|
|
65
|
+
},
|
|
66
|
+
elements: {
|
|
67
|
+
coverMedia: "Cover art",
|
|
68
|
+
audioTitle: "Audio title",
|
|
69
|
+
artistName: "Artist name",
|
|
70
|
+
progressBar: "Progress bar",
|
|
71
|
+
timeDisplay: "Time display",
|
|
72
|
+
volumeControls: "Volume control"
|
|
73
|
+
},
|
|
74
|
+
data: {
|
|
75
|
+
coverImage: "Image",
|
|
76
|
+
displayMode: "Display mode",
|
|
77
|
+
loop: "Plays in a loop",
|
|
78
|
+
volume: "Volume"
|
|
79
|
+
},
|
|
80
|
+
displayGroups: {
|
|
81
|
+
playbackOptions: "Playback"
|
|
64
82
|
}
|
|
65
83
|
};
|
|
66
84
|
export {
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
85
|
+
ARIA_LABELS as A,
|
|
86
|
+
DesignStates as D,
|
|
87
|
+
DisplayNames as a,
|
|
88
|
+
borderDefaultValue as b,
|
|
89
|
+
dataDefaults as d,
|
|
90
|
+
selectors as s
|
|
72
91
|
};
|