wini-web-components 2.8.2 → 2.8.5

package/src/component/carousel/carousel.css

@@ -0,0 +1,622 @@
+.awssld__container figure,
+.awssld__content,
+.awssld__box {
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+}
+
+.awssld__controls button,
+.awssld__bullets button {
+    outline-color: 0;
+    outline-style: none;
+    outline-width: 0;
+}
+
+.awssld {
+    --organic-arrow-thickness: 4px;
+    --organic-arrow-height: 40px;
+    --slider-height-percentage: 60%;
+    --loader-bar-color: var(--primary-main-color, #851515);
+    --loader-bar-height: 6px;
+    --control-button-width: 10%;
+    --control-button-height: 25%;
+    --control-button-opacity: 0.5;
+    --control-button-hover-opacity: 0.75;
+    --control-button-background: transparent;
+    --transition-bezier: cubic-bezier(0.5, 0.075, 0.25, 0.95);
+    --slider-transition-duration: 575ms;
+    --organic-arrow-color: #6a6a6a;
+    --organic-arrow-border-radius: 0;
+    --control-bullet-color: #6a6a6a;
+    --control-bullet-active-color: #6a6a6a;
+    --content-background-color: #2f2f2f;
+}
+
+.awssld {
+    display: block;
+    position: relative;
+    width: 100%;
+    max-width: 100%;
+}
+
+.awssld__wrapper {
+    display: block;
+    overflow: hidden;
+    position: relative;
+    height: 100%;
+    width: 100%;
+}
+
+.awssld__container {
+    display: block;
+    width: 100%;
+    height: 0;
+    padding-bottom: var(--slider-height-percentage);
+}
+
+@media all and (max-width: 500px) {
+    .awssld__container {
+        padding-bottom: calc(var(--slider-height-percentage) * 1.25);
+    }
+}
+
+.awssld__startUp {
+    background-color: red;
+    height: 100%;
+    width: 100%;
+}
+
+.awssld__startUp>div {
+    height: 100%;
+    width: 100%;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+}
+
+.awssld__startUp img {
+    width: 35%;
+    height: auto;
+}
+
+.awssld__content {
+    background-color: var(--content-background-color);
+    overflow: hidden;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+}
+
+.awssld__content>img,
+.awssld__content>video {
+    -o-object-fit: cover;
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.awssld__controls button {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    width: var(--control-button-width);
+    height: var(--control-button-height);
+    position: absolute;
+    z-index: 10;
+    top: calc(50% - (0.5 * var(--control-button-height)));
+    border: none;
+    background-color: var(--control-button-background);
+    color: #fff;
+    cursor: pointer;
+}
+
+.awssld__controls button .awssld__controls__arrow-left,
+.awssld__controls button .awssld__controls__arrow-right {
+    opacity: var(--control-button-opacity);
+}
+
+.awssld__controls button:hover .awssld__controls__arrow-left,
+.awssld__controls button:hover .awssld__controls__arrow-right {
+    opacity: var(--control-button-opacity-hover);
+}
+
+.awssld__controls--active .awssld__controls__arrow-left {
+    opacity: var(--control-button-opacity-hover);
+    -webkit-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+}
+
+.awssld__controls--active .awssld__controls__arrow-right {
+    opacity: var(--control-button-opacity-hover);
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+}
+
+.awssld__controls--hidden {
+    display: none;
+}
+
+@media all and (max-width: 520px) {
+    .awssld__controls {
+        visibility: hidden;
+    }
+}
+
+.awssld__bar {
+    display: block;
+    width: 100%;
+    height: var(--loader-bar-height);
+    background-color: var(--loader-bar-color);
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 101;
+    -webkit-transition: -webkit-transform 3000ms var(--transition-bezier);
+    transition: -webkit-transform 3000ms var(--transition-bezier);
+    transition: transform 3000ms var(--transition-bezier);
+    transition: transform 3000ms var(--transition-bezier), -webkit-transform 3000ms var(--transition-bezier);
+    -webkit-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+}
+
+.awssld__bar--active {
+    -webkit-transform: translate3d(-20%, 0, 0);
+    transform: translate3d(-20%, 0, 0);
+}
+
+.awssld__bar--end {
+    -webkit-transition-duration: 300ms;
+    transition-duration: 300ms;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+}
+
+.awssld__next {
+    right: 0;
+}
+
+.awssld__prev {
+    left: 0;
+}
+
+.awssld__box {
+    z-index: 1;
+    visibility: hidden;
+}
+
+.awssld--animated {
+    will-change: transform;
+    visibility: visible;
+}
+
+.awssld--animated-mobile {
+    will-change: transform;
+    -webkit-transition: -webkit-transform 325ms cubic-bezier(0.15, 0.65, 0.1, 1);
+    transition: -webkit-transform 325ms cubic-bezier(0.15, 0.65, 0.1, 1);
+    transition: transform 325ms cubic-bezier(0.15, 0.65, 0.1, 1);
+    transition: transform 325ms cubic-bezier(0.15, 0.65, 0.1, 1), -webkit-transform 325ms cubic-bezier(0.15, 0.65, 0.1, 1);
+}
+
+.awssld--active {
+    visibility: visible;
+    z-index: 2;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+}
+
+.awssld--moveRight,
+.awssld--moveLeft {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+}
+
+.awssld--moveRight {
+    -webkit-animation: slideFromRight var(--slider-transition-duration) both var(--transition-bezier);
+    animation: slideFromRight var(--slider-transition-duration) both var(--transition-bezier);
+}
+
+.awssld--moveLeft {
+    -webkit-animation: slideFromLeft var(--slider-transition-duration) both var(--transition-bezier);
+    animation: slideFromLeft var(--slider-transition-duration) both var(--transition-bezier);
+}
+
+.awssld--exit {
+    z-index: 0;
+}
+
+.awssld--exit.awssld--moveLeft {
+    -webkit-animation: slideToLeft var(--slider-transition-duration) both var(--transition-bezier);
+    animation: slideToLeft var(--slider-transition-duration) both var(--transition-bezier);
+}
+
+.awssld--exit.awssld--moveRight {
+    -webkit-animation: slideToRight var(--slider-transition-duration) both var(--transition-bezier);
+    animation: slideToRight var(--slider-transition-duration) both var(--transition-bezier);
+}
+
+.awssld--first .awssld__prev {
+    visibility: hidden;
+}
+
+.awssld--last .awssld__next {
+    visibility: hidden;
+}
+
+.awssld--fill-parent {
+    position: absolute !important;
+    width: 100% !important;
+    height: 100% !important;
+    top: 0;
+    left: 0;
+}
+
+.awssld--fill-parent .awssld__container {
+    height: 100%;
+    padding: 0;
+}
+
+.awssld__bullets {
+    position: absolute;
+    bottom: -40px;
+    width: 100%;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+}
+
+.awssld__bullets button {
+    padding: 0;
+    display: block;
+    width: 16px;
+    height: 16px;
+    margin: 5px;
+    border-radius: 50%;
+    background: var(--control-bullet-color);
+    text-indent: -9999px;
+    overflow: hidden;
+    cursor: pointer;
+    border: none;
+    -webkit-transition: background-color 0.175s ease-out, -webkit-transform 0.225s cubic-bezier(0.8, 1.35, 0.75, 1.45);
+    transition: background-color 0.175s ease-out, -webkit-transform 0.225s cubic-bezier(0.8, 1.35, 0.75, 1.45);
+    transition: transform 0.225s cubic-bezier(0.8, 1.35, 0.75, 1.45), background-color 0.175s ease-out;
+    transition: transform 0.225s cubic-bezier(0.8, 1.35, 0.75, 1.45), background-color 0.175s ease-out, -webkit-transform 0.225s cubic-bezier(0.8, 1.35, 0.75, 1.45);
+}
+
+.awssld__bullets button:hover {
+    -webkit-transform: scale(1.2);
+    transform: scale(1.2);
+}
+
+.awssld__bullets .awssld__bullets--loading {
+    -webkit-transform: scale(1.2);
+    transform: scale(1.2);
+}
+
+.awssld__bullets .awssld__bullets--active {
+    -webkit-transform: scale(1.5);
+    transform: scale(1.5);
+    background: var(--control-bullet-active-color);
+}
+
+.awssld__bullets .awssld__bullets--active:hover {
+    -webkit-transform: scale(1.5);
+    transform: scale(1.5);
+}
+
+.awssld__controls__arrow-left,
+.awssld__controls__arrow-right {
+    width: 100%;
+    height: var(--organic-arrow-height);
+    position: relative;
+    display: block;
+    -webkit-transition: opacity 0.2s ease-out, -webkit-transform 0.2s ease-out 0.125s;
+    transition: opacity 0.2s ease-out, -webkit-transform 0.2s ease-out 0.125s;
+    transition: transform 0.2s ease-out 0.125s, opacity 0.2s ease-out;
+    transition: transform 0.2s ease-out 0.125s, opacity 0.2s ease-out, -webkit-transform 0.2s ease-out 0.125s;
+}
+
+.awssld__controls__arrow-left:before,
+.awssld__controls__arrow-left:after,
+.awssld__controls__arrow-right:before,
+.awssld__controls__arrow-right:after {
+    content: ' ';
+    position: absolute;
+    right: calc(50% - (0.7071 * (var(--organic-arrow-height) + var(--organic-arrow-thickness))) / 2);
+    height: 100%;
+    border-radius: var(--organic-arrow-border-radius);
+    width: var(--organic-arrow-thickness);
+    background-color: var(--organic-arrow-color);
+    -webkit-transition: background-color 0.15s ease-out, -webkit-transform 0.15s ease-out;
+    transition: background-color 0.15s ease-out, -webkit-transform 0.15s ease-out;
+    transition: transform 0.15s ease-out, background-color 0.15s ease-out;
+    transition: transform 0.15s ease-out, background-color 0.15s ease-out, -webkit-transform 0.15s ease-out;
+}
+
+.awssld__controls__arrow-left:before,
+.awssld__controls__arrow-right:before {
+    -webkit-transform-origin: 100% 100% 0;
+    transform-origin: 100% 100% 0;
+    top: -50%;
+    -webkit-transform: rotate(-45deg);
+    transform: rotate(-45deg);
+}
+
+.awssld__controls__arrow-left:after,
+.awssld__controls__arrow-right:after {
+    -webkit-transform-origin: 100% 0% 0;
+    transform-origin: 100% 0% 0;
+    top: 50%;
+    -webkit-transform: rotate(45deg);
+    transform: rotate(45deg);
+}
+
+.awssld__controls__arrow-right--active {
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+}
+
+.awssld__controls__arrow-right--active:after {
+    -webkit-transform: rotate(90deg) translate3d(50%, 0, 0) !important;
+    transform: rotate(90deg) translate3d(50%, 0, 0) !important;
+}
+
+.awssld__controls__arrow-right--active:before {
+    -webkit-transform: rotate(-90deg) translate3d(50%, 0, 0) !important;
+    transform: rotate(-90deg) translate3d(50%, 0, 0) !important;
+}
+
+.awssld__controls__arrow-left:before,
+.awssld__controls__arrow-left:after {
+    right: auto;
+    left: calc(50% - (0.7071 * (var(--organic-arrow-height) + var(--organic-arrow-thickness))) / 2);
+}
+
+.awssld__controls__arrow-left:before {
+    -webkit-transform-origin: 0 100% 0;
+    transform-origin: 0 100% 0;
+    top: -50%;
+    -webkit-transform: rotate(45deg);
+    transform: rotate(45deg);
+}
+
+.awssld__controls__arrow-left:after {
+    -webkit-transform-origin: 0 0 0;
+    transform-origin: 0 0 0;
+    top: 50%;
+    -webkit-transform: rotate(-45deg);
+    transform: rotate(-45deg);
+}
+
+.awssld__controls__arrow-left--active {
+    -webkit-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+}
+
+.awssld__controls__arrow-left--active:after {
+    -webkit-transform: rotate(-90deg) translate3d(-50%, 0, 0) !important;
+    transform: rotate(-90deg) translate3d(-50%, 0, 0) !important;
+}
+
+.awssld__controls__arrow-left--active:before {
+    -webkit-transform: rotate(90deg) translate3d(-50%, 0, 0) !important;
+    transform: rotate(90deg) translate3d(-50%, 0, 0) !important;
+}
+
+.awssld__controls button:hover .awssld__controls__arrow-left:before {
+    opacity: 1;
+    -webkit-transform: rotate(30deg);
+    transform: rotate(30deg);
+}
+
+.awssld__controls button:hover .awssld__controls__arrow-left:after {
+    opacity: 1;
+    -webkit-transform: rotate(-30deg);
+    transform: rotate(-30deg);
+}
+
+.awssld__controls button:hover .awssld__controls__arrow-right:before {
+    opacity: 1;
+    -webkit-transform: rotate(-30deg);
+    transform: rotate(-30deg);
+}
+
+.awssld__controls button:hover .awssld__controls__arrow-right:after {
+    opacity: 1;
+    -webkit-transform: rotate(30deg);
+    transform: rotate(30deg);
+}
+
+.awssld__timer {
+    --timer-delay: 2000ms;
+    --timer-release: 200ms;
+    --timer-height: 4px;
+    --timer-background-color: rgba(0, 0, 0, 0.15);
+    width: 100%;
+    height: var(--timer-height);
+    background-color: var(--timer-background-color);
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 100;
+    -webkit-transform: translateX(-100%);
+    transform: translateX(-100%);
+}
+
+.awssld__timer--animated {
+    will-change: transform;
+    -webkit-transition: -webkit-transform var(--timer-delay) linear;
+    transition: -webkit-transform var(--timer-delay) linear;
+    transition: transform var(--timer-delay) linear;
+    transition: transform var(--timer-delay) linear, -webkit-transform var(--timer-delay) linear;
+}
+
+.awssld__timer--run {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+}
+
+.awssld__timer--fast {
+    -webkit-transition: -webkit-transform calc(var(--timer-release) / 2) linear;
+    transition: -webkit-transform calc(var(--timer-release) / 2) linear;
+    transition: transform calc(var(--timer-release) / 2) linear;
+    transition: transform calc(var(--timer-release) / 2) linear, -webkit-transform calc(var(--timer-release) / 2) linear;
+    -webkit-transform: translateX(-0.00001px);
+    transform: translateX(-0.00001px);
+}
+
+.awssld__timer--end {
+    -webkit-transform: translateX(-0.0001px);
+    transform: translateX(-0.0001px);
+    -webkit-transition: -webkit-transform var(--timer-release) linear;
+    transition: -webkit-transform var(--timer-release) linear;
+    transition: transform var(--timer-release) linear;
+    transition: transform var(--timer-release) linear, -webkit-transform var(--timer-release) linear;
+}
+
+.awssld__timer--hidden {
+    display: none;
+}
+
+@-webkit-keyframes slideFromLeft {
+    from {
+        -webkit-transform: translate3d(-100%, 0, 0);
+        transform: translate3d(-100%, 0, 0);
+    }
+
+    to {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+@keyframes slideFromLeft {
+    from {
+        -webkit-transform: translate3d(-100%, 0, 0);
+        transform: translate3d(-100%, 0, 0);
+    }
+
+    to {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+@-webkit-keyframes slideFromRight {
+    from {
+        -webkit-transform: translate3d(100%, 0, 0);
+        transform: translate3d(100%, 0, 0);
+    }
+
+    to {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+@keyframes slideFromRight {
+    from {
+        -webkit-transform: translate3d(100%, 0, 0);
+        transform: translate3d(100%, 0, 0);
+    }
+
+    to {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+@-webkit-keyframes slideToLeft {
+    from {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+
+    to {
+        -webkit-transform: translate3d(-100%, 0, 0);
+        transform: translate3d(-100%, 0, 0);
+    }
+}
+
+@keyframes slideToLeft {
+    from {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+
+    to {
+        -webkit-transform: translate3d(-100%, 0, 0);
+        transform: translate3d(-100%, 0, 0);
+    }
+}
+
+@-webkit-keyframes slideToRight {
+    from {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+
+    to {
+        -webkit-transform: translate3d(100%, 0, 0);
+        transform: translate3d(100%, 0, 0);
+    }
+}
+
+@keyframes slideToRight {
+    from {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+
+    to {
+        -webkit-transform: translate3d(100%, 0, 0);
+        transform: translate3d(100%, 0, 0);
+    }
+}
+
+.custom-slider-container {
+    --content-background-color: #00000000 !important;
+}
+
+.custom-slider-container .awssld__content>* {
+    width: 100%;
+    height: 100%;
+}
+
+.custom-slider-container .awssld__controls button {
+    padding: 2.4rem;
+    width: fit-content;
+    height: fit-content;
+    top: 50%;
+    transform: translateY(-50%);
+}

package/src/component/carousel/carousel.tsx

@@ -0,0 +1,91 @@
+import React, { CSSProperties, ReactNode } from 'react';
+import AwesomeSlider from "react-awesome-slider";
+import "react-awesome-slider/dist/styles.css";
+import "react-awesome-slider/dist/custom-animations/scale-out-animation.css";
+import "react-awesome-slider/dist/custom-animations/fold-out-animation.css";
+import "react-awesome-slider/dist/custom-animations/cube-animation.css";
+import "react-awesome-slider/dist/custom-animations/fall-animation.css";
+import { Winicon } from '../wini-icon/winicon';
+
+interface CarouselProps {
+    id?: string,
+    children?: Array<ReactNode>,
+    autoPlay?: boolean,
+    /** default: 2000ms */
+    duration?: number,
+    className?: string,
+    iconSize?: number | string,
+    iconColor?: string,
+    prevButton?: ReactNode,
+    nextButton?: ReactNode,
+    style?: CSSProperties,
+    buttons?: boolean,
+    onChage?: (i: number) => void,
+    animation?: "scaleOut" | "cubeAnimation" | "foldOut" | "fall";
+}
+
+interface SliderState {
+    page: number
+}
+
+export class Carousel extends React.Component<CarouselProps, SliderState> {
+    private intervalPlay: any
+    constructor(props: CarouselProps) {
+        super(props)
+        props.buttons ??= true
+        this.state = {
+            page: 0
+        }
+        this.autoPlay = this.autoPlay.bind(this)
+        this.nextPage = this.nextPage.bind(this)
+        this.previousPage = this.previousPage.bind(this)
+    }
+
+    nextPage = () => {
+        let index = this.state?.page ?? 0;
+        if (this.props?.children && (index + 1) < this.props.children.length) {
+            this.setState({ page: index + 1 })
+            if (this.props.onChage) this.props.onChage(index + 1)
+        }
+    }
+
+    previousPage = () => {
+        let index = this.state?.page ?? 0;
+        if (this.props?.children && index > 0) {
+            this.setState({ page: index - 1 })
+            if (this.props.onChage) this.props.onChage(index - 1)
+        }
+    }
+
+    private autoPlay = () => {
+        let index = this.state?.page ?? 0;
+        if (this.props?.children && (index + 1) === this.props.children.length)
+            index = -1
+        this.setState({ page: index + 1 })
+        if (this.props.onChage) this.props.onChage(index + 1)
+    }
+
+    componentDidMount(): void {
+        if (this.props.autoPlay) this.intervalPlay = setInterval(this.autoPlay, this.props.duration ?? 2000)
+    }
+
+    componentDidUpdate(prevProps: Readonly<CarouselProps>): void {
+        if (this.props.autoPlay !== prevProps.autoPlay && !this.props.autoPlay) clearInterval(this.intervalPlay)
+    }
+
+    render() {
+        return <AwesomeSlider
+            animation={this.props.animation}
+            style={this.props.style}
+            className={`custom-slider-container ${this.props.className ?? ''}`}
+            selected={this.state.page}
+            bullets={false}
+            buttons={this.props.buttons ? (this.props.children && this.props.children?.length > 1) : false}
+            organicArrows={false}
+            buttonContentLeft={this.props.prevButton ?? <Winicon src={"fill/arrows/circle-ctrl-left"} size={"2.4rem"} color={this.props.iconColor ?? "var(--neutral-absolute-background-color)"} />}
+            buttonContentRight={this.props.nextButton ?? <Winicon src={"fill/arrows/circle-ctrl-right"} size={"2.4rem"} color={this.props.iconColor ?? "var(--neutral-absolute-background-color)"} />}
+        >
+            {this.props.children}
+        </AwesomeSlider>
+    }
+}