wex-ui-lib 1.0.4 → 1.0.6
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/index.cjs.js +125 -26
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +27 -2
- package/dist/index.esm.js +125 -28
- package/dist/index.esm.js.map +1 -1
- package/dist/types/components/Button/index.types.d.ts +1 -1
- package/dist/types/components/Icon/Icon.d.ts +3 -0
- package/dist/types/components/Icon/Icon.types.d.ts +9 -0
- package/dist/types/components/Icon/index.d.ts +3 -0
- package/dist/types/components/Showcase/Showcase.d.ts +3 -0
- package/dist/types/components/Showcase/Showcase.stories.d.ts +7 -0
- package/dist/types/components/Showcase/Showcase.types.d.ts +10 -0
- package/dist/types/components/Showcase/index.d.ts +3 -3
- package/dist/types/components/Slider/Slider.d.ts +3 -0
- package/dist/types/components/Slider/Slider.stories.d.ts +8 -0
- package/dist/types/components/Slider/Slider.types.d.ts +13 -0
- package/dist/types/components/Slider/index.d.ts +3 -0
- package/dist/types/index.d.ts +3 -1
- package/dist/types/samples/Holik/CustomerComments.d.ts +14 -0
- package/dist/types/samples/Holik/index.stories.d.ts +1 -0
- package/package.json +1 -1
package/dist/index.cjs.js
CHANGED
|
@@ -38,6 +38,16 @@ PERFORMANCE OF THIS SOFTWARE.
|
|
|
38
38
|
/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
|
|
39
39
|
|
|
40
40
|
|
|
41
|
+
function __spreadArray(to, from, pack) {
|
|
42
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
43
|
+
if (ar || !(i in from)) {
|
|
44
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
45
|
+
ar[i] = from[i];
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
49
|
+
}
|
|
50
|
+
|
|
41
51
|
function __makeTemplateObject(cooked, raw) {
|
|
42
52
|
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
43
53
|
return cooked;
|
|
@@ -1940,8 +1950,8 @@ tags.forEach(function (tagName) {
|
|
|
1940
1950
|
});
|
|
1941
1951
|
|
|
1942
1952
|
function Icon(props) {
|
|
1943
|
-
var _a = props.color, color = _a === undefined ? 'white' : _a, icon = props.icon, size = props.size, withBorder = props.withBorder,
|
|
1944
|
-
return (React.createElement(IconContainer, { color: color, size: size, withBorder: withBorder, onClick: function () { return
|
|
1953
|
+
var _a = props.color, color = _a === undefined ? 'white' : _a, icon = props.icon, size = props.size, withBorder = props.withBorder, callback = props.callback;
|
|
1954
|
+
return (React.createElement(IconContainer, { color: color, size: size, withBorder: withBorder, onClick: function () { return callback(); } },
|
|
1945
1955
|
icon === "twitter" && (React.createElement("svg", { width: "22", height: "19", viewBox: "0 0 22 19", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
1946
1956
|
React.createElement("path", { d: "M7.22838 0H0.34375L8.46766 10.4263L0.786371 18.9328H3.3926L9.67543 11.9759L15.0966 18.9328H21.9812L13.515 8.06725L20.801 0H18.1946L12.3072 6.51855L7.22838 0ZM16.0801 17.0395L4.27784 1.89327H6.24482L18.0471 17.0395H16.0801Z" }))),
|
|
1947
1957
|
icon === "instagram" && (React.createElement("svg", { width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
@@ -1957,8 +1967,8 @@ function Icon(props) {
|
|
|
1957
1967
|
icon === "arrow-caret" && (React.createElement("svg", { width: "8", height: "10", viewBox: "0 0 8 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
1958
1968
|
React.createElement("path", { d: "M1 1L6 5L1 9", stroke: "white", "stroke-width": "1.5" })))));
|
|
1959
1969
|
}
|
|
1960
|
-
var IconContainer = newStyled.
|
|
1961
|
-
var templateObject_1$
|
|
1970
|
+
var IconContainer = newStyled.button(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n all: unset;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-top: 1px;\n width: ", ";\n height: ", ";\n border: ", ";\n border-radius: 4px;\n transition: all 0.2s;\n cursor: pointer;\n svg {\n transition: all 0.2s;\n height: ", ";\n fill: ", ";\n path{\n fill: ", "\n }\n }\n"], ["\n all: unset;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-top: 1px;\n width: ", ";\n height: ", ";\n border: ", ";\n border-radius: 4px;\n transition: all 0.2s;\n cursor: pointer;\n svg {\n transition: all 0.2s;\n height: ", ";\n fill: ", ";\n path{\n fill: ", "\n }\n }\n"])), function (props) { return props.withBorder ? props.size : "unset"; }, function (props) { return props.withBorder ? props.size : "unset"; }, function (props) { return props.withBorder ? "2px solid ".concat(props.color) : "unset"; }, function (props) { return props.withBorder ? "53%" : props.size; }, function (props) { return props.color; }, function (props) { return props.color; });
|
|
1971
|
+
var templateObject_1$6;
|
|
1962
1972
|
|
|
1963
1973
|
var theme = {
|
|
1964
1974
|
primary: "#DC3737",
|
|
@@ -2008,11 +2018,11 @@ function Button(props) {
|
|
|
2008
2018
|
React.createElement(Icon, { icon: arrow, color: (colors === null || colors === undefined ? undefined : colors.text) || theme.primary })));
|
|
2009
2019
|
}
|
|
2010
2020
|
}
|
|
2011
|
-
var DefaultButton = newStyled.button(templateObject_1$
|
|
2012
|
-
var UnderlinedButton = newStyled(DefaultButton)(templateObject_2$
|
|
2013
|
-
var PillButton = newStyled(DefaultButton)(templateObject_3$
|
|
2021
|
+
var DefaultButton = newStyled.button(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n all: unset; \n grid-area: button;\n display: flex;\n align-items: center;\n padding: 10px 14px;\n letter-spacing: 1px;\n font-size: ", ";\n font-weight: ", ";\n cursor: pointer;\n width: fit-content;\n grid-area: button;\n transition: filter 0.3s, background-color 0.3s;\n gap: 11px;\n background-color: ", ";\n color: ", ";\n position: relative;\n svg {\n fill: ", ";\n transition: all 0.3s;\n }\n &:hover{\n ", ";\n color: ", ";\n svg {\n fill: ", ";\n transform: translateX(5px);\n }\n &::after{\n transform: translateX(4px);\n }\n }\n &::after{\n display: ", ";\n content: \"\";\n width: 100%;\n height: 100%;\n position: absolute;\n transition: all 0.3s;\n background-color: ", ";\n left: 0;\n top: 0;\n z-index: -1;\n border-radius: inherit;\n transform-origin: left;\n }\n"], ["\n all: unset; \n grid-area: button;\n display: flex;\n align-items: center;\n padding: 10px 14px;\n letter-spacing: 1px;\n font-size: ", ";\n font-weight: ", ";\n cursor: pointer;\n width: fit-content;\n grid-area: button;\n transition: filter 0.3s, background-color 0.3s;\n gap: 11px;\n background-color: ", ";\n color: ", ";\n position: relative;\n svg {\n fill: ", ";\n transition: all 0.3s;\n }\n &:hover{\n ", ";\n color: ", ";\n svg {\n fill: ", ";\n transform: translateX(5px);\n }\n &::after{\n transform: translateX(4px);\n }\n }\n &::after{\n display: ", ";\n content: \"\";\n width: 100%;\n height: 100%;\n position: absolute;\n transition: all 0.3s;\n background-color: ", ";\n left: 0;\n top: 0;\n z-index: -1;\n border-radius: inherit;\n transform-origin: left;\n }\n"])), function (props) { var _a; return (_a = props.font) === null || _a === undefined ? undefined : _a.size; }, function (props) { var _a; return (_a = props.font) === null || _a === undefined ? undefined : _a.weight; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.background) || theme.primary; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.text) || theme.white; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.text) || theme.white; }, function (props) { var _a, _b; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.backgroundHover) ? "background-color: ".concat((_b = props.colors) === null || _b === undefined ? undefined : _b.backgroundHover) : "filter: brightness(1.4)"; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.textHover) || theme.white; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.textHover) || theme.white; }, function (props) { return props.hasArrow ? "unset" : "none"; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.background) || theme.primary; });
|
|
2022
|
+
var UnderlinedButton = newStyled(DefaultButton)(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n padding: 10px 0px;\n letter-spacing: 2px;\n &::before{\n content: \"\";\n position: absolute;\n left: 0;\n bottom: 0;\n width: 99%;\n height: 2.5px;\n background-color: ", ";\n transition: 0.2s;\n }\n svg{\n fill: ", ";\n path {\n fill: ", ";\n }\n }\n &::after{\n display: none;\n }\n &:hover{\n color: ", ";\n transform: translateY(-1px);\n svg{\n transform: translateX(6px);\n fill: ", ";\n path {\n fill: ", ";\n }\n }\n &::before{\n transform: translateY(4px);\n }\n }\n"], ["\n background-color: ", ";\n color: ", ";\n padding: 10px 0px;\n letter-spacing: 2px;\n &::before{\n content: \"\";\n position: absolute;\n left: 0;\n bottom: 0;\n width: 99%;\n height: 2.5px;\n background-color: ", ";\n transition: 0.2s;\n }\n svg{\n fill: ", ";\n path {\n fill: ", ";\n }\n }\n &::after{\n display: none;\n }\n &:hover{\n color: ", ";\n transform: translateY(-1px);\n svg{\n transform: translateX(6px);\n fill: ", ";\n path {\n fill: ", ";\n }\n }\n &::before{\n transform: translateY(4px);\n }\n }\n"])), function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.background) || 'transparent'; }, function (props) { return props.color || theme.black; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.border) || theme.primary; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.border) || theme.primary; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.border) || theme.primary; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.textHover) || theme.black; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.borderHover) || theme.primary; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.borderHover) || theme.primary; });
|
|
2023
|
+
var PillButton = newStyled(DefaultButton)(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n border-radius: 30px;\n letter-spacing: 1px;\n text-transform: uppercase;\n "], ["\n border-radius: 30px;\n letter-spacing: 1px;\n text-transform: uppercase;\n "])));
|
|
2014
2024
|
var RoundedButton = newStyled(DefaultButton)(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n border-radius: 4px;\n"], ["\n border-radius: 4px;\n"])));
|
|
2015
|
-
var templateObject_1$
|
|
2025
|
+
var templateObject_1$5, templateObject_2$4, templateObject_3$4, templateObject_4$1;
|
|
2016
2026
|
|
|
2017
2027
|
function insertWithoutScoping(cache, serialized) {
|
|
2018
2028
|
if (cache.inserted[serialized.name] === undefined) {
|
|
@@ -2154,13 +2164,13 @@ var _createEmotion = createEmotion({
|
|
|
2154
2164
|
}),
|
|
2155
2165
|
keyframes = _createEmotion.keyframes;
|
|
2156
2166
|
|
|
2157
|
-
var appearAnimation = keyframes(templateObject_1$
|
|
2158
|
-
var disappearAnimation = keyframes(templateObject_2$
|
|
2159
|
-
var fadeInFromLeft = keyframes(templateObject_3$
|
|
2167
|
+
var appearAnimation = keyframes(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n 0% {\n display: none;\n opacity: 0%;\n transform: translateY(-6px);\n }\n 1% {\n display: flex;\n opacity: 0%;\n }\n 100% {\n display: flex;\n opacity: 100%;\n transform: translateY(0px);\n }\n"], ["\n 0% {\n display: none;\n opacity: 0%;\n transform: translateY(-6px);\n }\n 1% {\n display: flex;\n opacity: 0%;\n }\n 100% {\n display: flex;\n opacity: 100%;\n transform: translateY(0px);\n }\n"])));
|
|
2168
|
+
var disappearAnimation = keyframes(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n 0% {\n transform: translateY(0px);\n display: flex;\n opacity: 100%;\n }\n 99% {\n display: flex;\n opacity: 0%;\n }\n 100% {\n transform: translateY(-6px);\n display: none;\n opacity: 0%;\n }\n"], ["\n 0% {\n transform: translateY(0px);\n display: flex;\n opacity: 100%;\n }\n 99% {\n display: flex;\n opacity: 0%;\n }\n 100% {\n transform: translateY(-6px);\n display: none;\n opacity: 0%;\n }\n"])));
|
|
2169
|
+
var fadeInFromLeft = keyframes(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n from {\n opacity: 0;\n transform: translateX(-20px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n"], ["\n from {\n opacity: 0;\n transform: translateX(-20px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n"])));
|
|
2160
2170
|
var fadeInFromRight = keyframes(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n from {\n opacity: 0;\n transform: translateX(20px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n"], ["\n from {\n opacity: 0;\n transform: translateX(20px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n"])));
|
|
2161
2171
|
var fadeInFromTop = keyframes(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n from {\n opacity: 0;\n transform: translateY(-20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n"], ["\n from {\n opacity: 0;\n transform: translateY(-20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n"])));
|
|
2162
2172
|
var fadeInFromBottom = keyframes(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n"], ["\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n"])));
|
|
2163
|
-
var templateObject_1$
|
|
2173
|
+
var templateObject_1$4, templateObject_2$3, templateObject_3$3, templateObject_4, templateObject_5, templateObject_6;
|
|
2164
2174
|
|
|
2165
2175
|
function Navbar(props) {
|
|
2166
2176
|
var logo = props.logo, items = props.items, button = props.button, config = props.config;
|
|
@@ -2184,26 +2194,25 @@ function Navbar(props) {
|
|
|
2184
2194
|
} }, subitem.label)));
|
|
2185
2195
|
}))))));
|
|
2186
2196
|
})),
|
|
2187
|
-
button
|
|
2188
|
-
React.createElement(Button, { colors: button.colors, type: button.type, font: button.font, onClick: button.onClick, arrow: button.arrow }, button.label))));
|
|
2197
|
+
button ? (React.createElement(Button, { colors: button.colors, type: button.type, font: button.font, onClick: button.onClick, arrow: button.arrow }, button.label)) : React.createElement(React.Fragment, null))));
|
|
2189
2198
|
}
|
|
2190
|
-
var NavbarContainer = newStyled.div(templateObject_1$
|
|
2191
|
-
var Logo = newStyled.img(templateObject_2$
|
|
2192
|
-
var ControlledNavItem = newStyled.div(templateObject_3$
|
|
2193
|
-
var templateObject_1$
|
|
2199
|
+
var NavbarContainer = newStyled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n background-color: ", ";\n width: 100vw;\n height: ", ";\n display: grid;\n grid-template-columns: 1fr auto 1fr;\n grid-template-rows: 100%;\n grid-template-areas: \"logo items button\";\n position: fixed;\n top: 0;\n left: 0;\n align-items: center;\n justify-content: space-between;\n padding: 0 4vw;\n z-index: 99;\n backdrop-filter: blur(4px);\n & > button {\n margin-left: auto;\n }\n * {\n -webkit-user-drag: none;\n -khtml-user-drag: none;\n -moz-user-drag: none;\n -o-user-drag: none;\n }\n @media only screen and (max-width: 800px) {\n height: 80px;\n padding: 0 6vw;\n }\n & > div {\n display: flex;\n align-items: center;\n height: 100%;\n margin-left: ", ";\n & > a {\n color: ", ";\n position: relative;\n display: flex;\n gap: 5px;\n align-items: center;\n justify-content: center;\n height: 100%;\n font-size: 12px;\n letter-spacing: 2px;\n font-weight: 500;\n text-transform: uppercase;\n text-decoration: none;\n padding: 6px 22px 0;\n transition: 0.3s;\n border-bottom: 4px solid transparent;\n svg {\n margin-bottom: 1px;\n transform: rotateZ(90deg);\n }\n & > div {\n z-index: 10;\n position: absolute;\n display: none;\n flex-direction: column;\n align-items: flex-start;\n width: max-content;\n gap: 12px;\n top: 88%;\n left: 0;\n background-color: black;\n padding: 16px 14px;\n animation-name: ", ";\n animation-duration: 0.3s;\n animation-fill-mode: forwards;\n a {\n color: ", ";\n padding: 0;\n }\n &:hover {\n animation-name: ", ";\n display: flex;\n }\n }\n &:hover {\n border-color: white;\n svg {\n transform: rotateZ(90deg) rotateY(-180deg) translateX(1px);\n }\n & > div{\n animation-name: ", ";\n display: flex;\n }\n }\n }\n @media only screen and (max-width: 800px) {\n display: none;\n }\n }\n"], ["\n background-color: ", ";\n width: 100vw;\n height: ", ";\n display: grid;\n grid-template-columns: 1fr auto 1fr;\n grid-template-rows: 100%;\n grid-template-areas: \"logo items button\";\n position: fixed;\n top: 0;\n left: 0;\n align-items: center;\n justify-content: space-between;\n padding: 0 4vw;\n z-index: 99;\n backdrop-filter: blur(4px);\n & > button {\n margin-left: auto;\n }\n * {\n -webkit-user-drag: none;\n -khtml-user-drag: none;\n -moz-user-drag: none;\n -o-user-drag: none;\n }\n @media only screen and (max-width: 800px) {\n height: 80px;\n padding: 0 6vw;\n }\n & > div {\n display: flex;\n align-items: center;\n height: 100%;\n margin-left: ", ";\n & > a {\n color: ", ";\n position: relative;\n display: flex;\n gap: 5px;\n align-items: center;\n justify-content: center;\n height: 100%;\n font-size: 12px;\n letter-spacing: 2px;\n font-weight: 500;\n text-transform: uppercase;\n text-decoration: none;\n padding: 6px 22px 0;\n transition: 0.3s;\n border-bottom: 4px solid transparent;\n svg {\n margin-bottom: 1px;\n transform: rotateZ(90deg);\n }\n & > div {\n z-index: 10;\n position: absolute;\n display: none;\n flex-direction: column;\n align-items: flex-start;\n width: max-content;\n gap: 12px;\n top: 88%;\n left: 0;\n background-color: black;\n padding: 16px 14px;\n animation-name: ", ";\n animation-duration: 0.3s;\n animation-fill-mode: forwards;\n a {\n color: ", ";\n padding: 0;\n }\n &:hover {\n animation-name: ", ";\n display: flex;\n }\n }\n &:hover {\n border-color: white;\n svg {\n transform: rotateZ(90deg) rotateY(-180deg) translateX(1px);\n }\n & > div{\n animation-name: ", ";\n display: flex;\n }\n }\n }\n @media only screen and (max-width: 800px) {\n display: none;\n }\n }\n"])), function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.background) || theme.black; }, function (props) { return props.height || '80px'; }, function (props) { return props.centeredItems ? 'unset' : 'auto'; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.text) || theme.white; }, disappearAnimation, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.text) || theme.white; }, appearAnimation, appearAnimation);
|
|
2200
|
+
var Logo = newStyled.img(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n cursor: pointer;\n height: 56%;\n transition: all 0.2s;\n &:hover {\n filter: brightness(1.2);\n }\n"], ["\n cursor: pointer;\n height: 56%;\n transition: all 0.2s;\n &:hover {\n filter: brightness(1.2);\n }\n"])));
|
|
2201
|
+
var ControlledNavItem = newStyled.div(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n cursor: pointer;\n height: 100%;\n max-height: 90px;\n text-transform: uppercase;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: 0.3s;\n a {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n padding: 0 22px;\n font-size: 12px;\n letter-spacing: 2px;\n font-weight: 500;\n text-decoration: none;\n }\n &:hover {\n & > div{\n display: flex;\n }\n }\n "], ["\n cursor: pointer;\n height: 100%;\n max-height: 90px;\n text-transform: uppercase;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: 0.3s;\n a {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n padding: 0 22px;\n font-size: 12px;\n letter-spacing: 2px;\n font-weight: 500;\n text-decoration: none;\n }\n &:hover {\n & > div{\n display: flex;\n }\n }\n "])));
|
|
2202
|
+
var templateObject_1$3, templateObject_2$2, templateObject_3$2;
|
|
2194
2203
|
|
|
2195
2204
|
function Hero(props) {
|
|
2196
2205
|
var children = props.children, _a = props.imageUrls, imageUrls = _a === undefined ? [""] : _a, overlay = props.overlay, marginTop = props.marginTop, height = props.height;
|
|
2197
2206
|
var _b = React.useState(imageUrls && imageUrls[0] ? imageUrls[0] : ""), activeBackgroundUrl = _b[0]; _b[1];
|
|
2198
2207
|
return (React.createElement(React.Fragment, null,
|
|
2199
|
-
React.createElement(Container$
|
|
2208
|
+
React.createElement(Container$2, { backgroundUrl: activeBackgroundUrl, marginTop: marginTop, height: height },
|
|
2200
2209
|
overlay && (React.createElement(Overlay, { color: overlay.color, opacity: overlay.opacity })),
|
|
2201
2210
|
React.createElement(HeroContent, null, children))));
|
|
2202
2211
|
}
|
|
2203
|
-
var Container$
|
|
2204
|
-
var Overlay = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n z-index: 1;\n background-color: ", ";\n opacity: ", ";\n"], ["\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n z-index: 1;\n background-color: ", ";\n opacity: ", ";\n"])), function (props) { return props.color; }, function (props) { return props.opacity; });
|
|
2205
|
-
var HeroContent = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: 100%;\n z-index: 2;\n"], ["\n width: 100%;\n z-index: 2;\n"])));
|
|
2206
|
-
var templateObject_1$
|
|
2212
|
+
var Container$2 = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n position: relative;\n width: 100vw;\n height: 100vh;\n height: ", ";\n margin-top: ", ";\n background-image: url(", ");\n /* background-color: rgba(76, 88, 97, 0.7);\n background-blend-mode: luminosity; */\n background-position-y: 69%;\n background-size: cover;\n padding: 0 8vw;\n @media only screen and (max-width: 800px) {\n padding: 80px 10px;\n svg {\n max-height: 300px;\n transform: translateX(20px);\n }\n }\n"], ["\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n position: relative;\n width: 100vw;\n height: 100vh;\n height: ", ";\n margin-top: ", ";\n background-image: url(", ");\n /* background-color: rgba(76, 88, 97, 0.7);\n background-blend-mode: luminosity; */\n background-position-y: 69%;\n background-size: cover;\n padding: 0 8vw;\n @media only screen and (max-width: 800px) {\n padding: 80px 10px;\n svg {\n max-height: 300px;\n transform: translateX(20px);\n }\n }\n"])), function (props) { return "calc(".concat(props.height, " - ").concat(props.marginTop, ")"); }, function (props) { return props.marginTop; }, function (props) { return props.backgroundUrl; });
|
|
2213
|
+
var Overlay = newStyled.div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n z-index: 1;\n background-color: ", ";\n opacity: ", ";\n"], ["\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n z-index: 1;\n background-color: ", ";\n opacity: ", ";\n"])), function (props) { return props.color; }, function (props) { return props.opacity; });
|
|
2214
|
+
var HeroContent = newStyled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n width: 100%;\n z-index: 2;\n"], ["\n width: 100%;\n z-index: 2;\n"])));
|
|
2215
|
+
var templateObject_1$2, templateObject_2$1, templateObject_3$1;
|
|
2207
2216
|
|
|
2208
2217
|
function useIntObs(_a) {
|
|
2209
2218
|
var _b;
|
|
@@ -2273,7 +2282,7 @@ function Fade(props) {
|
|
|
2273
2282
|
root: document,
|
|
2274
2283
|
rootMargin: "-10% 0% -10% 0%"
|
|
2275
2284
|
}), isIntersecting = _b.isIntersecting, ref = _b.ref;
|
|
2276
|
-
return (React.createElement(Container, { ref: ref, isVisible: isIntersecting, animation: function () {
|
|
2285
|
+
return (React.createElement(Container$1, { ref: ref, isVisible: isIntersecting, animation: function () {
|
|
2277
2286
|
switch (type) {
|
|
2278
2287
|
case 'bottom-to-top':
|
|
2279
2288
|
return fadeInFromBottom;
|
|
@@ -2286,11 +2295,101 @@ function Fade(props) {
|
|
|
2286
2295
|
}
|
|
2287
2296
|
} }, children));
|
|
2288
2297
|
}
|
|
2289
|
-
var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n opacity: 0;\n ", ";\n"], ["\n opacity: 0;\n ", ";\n"])), function (props) { return props.isVisible ? "animation: ".concat(props.animation(), " 0.8s ease forwards") : ''; });
|
|
2290
|
-
var templateObject_1;
|
|
2298
|
+
var Container$1 = newStyled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n opacity: 0;\n ", ";\n"], ["\n opacity: 0;\n ", ";\n"])), function (props) { return props.isVisible ? "animation: ".concat(props.animation(), " 0.8s ease forwards") : ''; });
|
|
2299
|
+
var templateObject_1$1;
|
|
2300
|
+
|
|
2301
|
+
function Slider(props) {
|
|
2302
|
+
var children = props.children, forwardedRef = props.forwardedRef, autoplayTicTime = props.autoplayTicTime, _a = props.visibleInactiveSlides, visibleInactiveSlides = _a === undefined ? false : _a, _b = props.showArrowKeys, showArrowKeys = _b === undefined ? false : _b, onSlideChange = props.onSlideChange;
|
|
2303
|
+
var wrapperRef = React.useRef(null);
|
|
2304
|
+
var _c = React.useState(1), currentSlide = _c[0], setCurrentSlide = _c[1];
|
|
2305
|
+
var _d = React.useState(0), translateX = _d[0], setTranslateX = _d[1];
|
|
2306
|
+
React.useImperativeHandle(forwardedRef, function () {
|
|
2307
|
+
return {
|
|
2308
|
+
goTo: function (option) { return goTo(option); },
|
|
2309
|
+
};
|
|
2310
|
+
}, [children, currentSlide]);
|
|
2311
|
+
var items = React.useMemo(function () {
|
|
2312
|
+
if (children.length > 1) {
|
|
2313
|
+
var slides = React.Children.map(children, function (child, index) { return (React.createElement(Slide, { key: index }, child)); });
|
|
2314
|
+
return __spreadArray(__spreadArray([
|
|
2315
|
+
React.createElement(Slide, { key: children.length + 1, style: { backgroundColor: "red" } }, children[children.length - 1])
|
|
2316
|
+
], slides, true), [
|
|
2317
|
+
React.createElement(Slide, { key: children.length + 2, style: { backgroundColor: "red" } }, children[0])
|
|
2318
|
+
], false);
|
|
2319
|
+
}
|
|
2320
|
+
return React.createElement(Slide, null, children[0]);
|
|
2321
|
+
}, []);
|
|
2322
|
+
React.useLayoutEffect(function () {
|
|
2323
|
+
setTranslateX(wrapperRef.current.clientWidth * currentSlide);
|
|
2324
|
+
}, []);
|
|
2325
|
+
React.useEffect(function () {
|
|
2326
|
+
if (onSlideChange) {
|
|
2327
|
+
onSlideChange(currentSlide);
|
|
2328
|
+
}
|
|
2329
|
+
}, [currentSlide, onSlideChange]);
|
|
2330
|
+
var goTo = React.useCallback(function (option) {
|
|
2331
|
+
wrapperRef.current.style.transitionDuration = '400ms';
|
|
2332
|
+
switch (option) {
|
|
2333
|
+
case 'prev':
|
|
2334
|
+
if (currentSlide <= 1) {
|
|
2335
|
+
setTranslateX(0);
|
|
2336
|
+
setCurrentSlide(children.length);
|
|
2337
|
+
}
|
|
2338
|
+
else {
|
|
2339
|
+
setTranslateX(wrapperRef.current.clientWidth * (currentSlide - 1));
|
|
2340
|
+
setCurrentSlide(function (prev) { return --prev; });
|
|
2341
|
+
}
|
|
2342
|
+
break;
|
|
2343
|
+
case 'next':
|
|
2344
|
+
if (currentSlide >= children.length) {
|
|
2345
|
+
setTranslateX(wrapperRef.current.clientWidth * (children.length + 1));
|
|
2346
|
+
setCurrentSlide(1);
|
|
2347
|
+
}
|
|
2348
|
+
else {
|
|
2349
|
+
setTranslateX(wrapperRef.current.clientWidth * (currentSlide + 1));
|
|
2350
|
+
setCurrentSlide(function (next) { return ++next; });
|
|
2351
|
+
}
|
|
2352
|
+
break;
|
|
2353
|
+
}
|
|
2354
|
+
}, [children, currentSlide]);
|
|
2355
|
+
React.useEffect(function () {
|
|
2356
|
+
var transitionEnd = function () {
|
|
2357
|
+
if (currentSlide <= 1) {
|
|
2358
|
+
wrapperRef.current.style.transitionDuration = '0ms';
|
|
2359
|
+
setTranslateX(wrapperRef.current.clientWidth * currentSlide);
|
|
2360
|
+
}
|
|
2361
|
+
if (currentSlide >= children.length) {
|
|
2362
|
+
wrapperRef.current.style.transitionDuration = '0ms';
|
|
2363
|
+
setTranslateX(wrapperRef.current.clientWidth * children.length);
|
|
2364
|
+
}
|
|
2365
|
+
};
|
|
2366
|
+
document.addEventListener("transitionend", transitionEnd);
|
|
2367
|
+
return function () {
|
|
2368
|
+
document.removeEventListener("transitionend", transitionEnd);
|
|
2369
|
+
};
|
|
2370
|
+
}, [currentSlide, children]);
|
|
2371
|
+
React.useEffect(function () {
|
|
2372
|
+
if (autoplayTicTime) {
|
|
2373
|
+
window.setInterval(function () {
|
|
2374
|
+
goTo('next');
|
|
2375
|
+
}, autoplayTicTime);
|
|
2376
|
+
}
|
|
2377
|
+
}, [goTo, autoplayTicTime]);
|
|
2378
|
+
return (React.createElement(Container, { visibleInactiveSlides: visibleInactiveSlides },
|
|
2379
|
+
React.createElement(SlidesWrapper, { ref: wrapperRef, translateX: translateX }, items),
|
|
2380
|
+
showArrowKeys && (React.createElement(React.Fragment, null,
|
|
2381
|
+
React.createElement(Icon, { callback: function () { return goTo('prev'); }, color: 'black', icon: 'arrow-long' }),
|
|
2382
|
+
React.createElement(Icon, { callback: function () { return goTo('next'); }, color: 'black', icon: 'arrow-long' })))));
|
|
2383
|
+
}
|
|
2384
|
+
var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: #eee;\n display: flex;\n position: relative;\n overflow: ", ";\n width: 100%;\n button {\n position: absolute;\n top: 50%;\n &:nth-of-type(2){\n right: 0;\n }\n &:nth-of-type(1){\n transform: rotateY(180deg);\n }\n }\n"], ["\n background-color: #eee;\n display: flex;\n position: relative;\n overflow: ", ";\n width: 100%;\n button {\n position: absolute;\n top: 50%;\n &:nth-of-type(2){\n right: 0;\n }\n &:nth-of-type(1){\n transform: rotateY(180deg);\n }\n }\n"])), function (props) { return props.visibleInactiveSlides ? 'visible' : 'hidden'; });
|
|
2385
|
+
var SlidesWrapper = newStyled.ul(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n list-style: none;\n display: flex;\n width: 100%;\n height: 100%;\n transform: translateX(", "px);\n"], ["\n list-style: none;\n display: flex;\n width: 100%;\n height: 100%;\n transform: translateX(", "px);\n"])), function (props) { return -props.translateX; });
|
|
2386
|
+
var Slide = newStyled.li(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex-shrink: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n flex-shrink: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n"])));
|
|
2387
|
+
var templateObject_1, templateObject_2, templateObject_3;
|
|
2291
2388
|
|
|
2292
2389
|
exports.Button = Button;
|
|
2293
2390
|
exports.Fade = Fade;
|
|
2294
2391
|
exports.Hero = Hero;
|
|
2392
|
+
exports.Icon = Icon;
|
|
2295
2393
|
exports.Navbar = Navbar;
|
|
2394
|
+
exports.Slider = Slider;
|
|
2296
2395
|
//# sourceMappingURL=index.cjs.js.map
|