@gudhub/ssg-web-components-library 1.0.117 → 1.0.118

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gudhub/ssg-web-components-library",
-  "version": "1.0.117",
+  "version": "1.0.118",
   "description": "",
   "main": "index.js",
   "type": "module",

package/src/components/get-in-touch-form/get-in-touch-form.html

@@ -10,9 +10,6 @@
             <button type="submit" class="btn">${buttonText ? buttonText : 'Get in touch'}</button>
             <div class="loader"></div>
         </div>
-        <div class="recaptcha-notice">
-            This site is protected by reCAPTCHA.
-        </div>
     </form>
     <div class="overflow success">
         <div class="icon_wrapper">

package/src/components/get-in-touch-form/get-in-touch-form.js

@@ -5,7 +5,6 @@ import defaultConfigs from './get-in-touch-form-data.json';
 import { checkInputsValidations } from './inputsValidation.js';
 
 let recaptchaPromise = null;
-let recaptchaBadgeObserver = null;
 
 function loadRecaptcha(siteKey) {
     if (!siteKey) {
@@ -36,41 +35,16 @@ function loadRecaptcha(siteKey) {
     return recaptchaPromise;
 }
 
-function hideRecaptchaBadge() {
-    const badge = document.querySelector('.grecaptcha-badge');
-
-    if (!badge) return;
-
-    badge.style.setProperty('visibility', 'hidden', 'important');
-    badge.style.setProperty('opacity', '0', 'important');
-    badge.style.setProperty('pointer-events', 'none', 'important');
-}
-
-function observeRecaptchaBadge() {
-    hideRecaptchaBadge();
-
-    if (recaptchaBadgeObserver) return;
-
-    recaptchaBadgeObserver = new MutationObserver(() => {
-        hideRecaptchaBadge();
-    });
-
-    recaptchaBadgeObserver.observe(document.body, {
-        childList: true,
-        subtree: true
-    });
-}
-
 class GetInTouchForm extends GHComponent {
     constructor() {
         super();
 
-        this.formId = this.getAttribute('data-form-id');
+        this.formId = this.getAttribute("data-form-id");
         this.defaultConfigs = defaultConfigs;
 
         this.generateInput = this.generateInput;
         this.isFormSubmitted = false;
-
+        
         this.placement = 'main';
         this.config = window.getConfig()?.componentsConfigs?.formConfig || window.getConfig()?.formConfig;
 
@@ -92,11 +66,7 @@ class GetInTouchForm extends GHComponent {
             this.attachEventListeners();
 
             if (this.recaptcha_site_key) {
-                loadRecaptcha(this.recaptcha_site_key)
-                    .then(() => {
-                        observeRecaptchaBadge();
-                    })
-                    .catch(console.error);
+                loadRecaptcha(this.recaptcha_site_key).catch(console.error);
             }
         }
     }
@@ -106,26 +76,15 @@ class GetInTouchForm extends GHComponent {
         super.render(html);
         this.attachEventListeners();
 
-        if (this.recaptcha_site_key) {
-            loadRecaptcha(this.recaptcha_site_key)
-                .then(() => {
-                    observeRecaptchaBadge();
-                })
-                .catch(console.error);
-        }
+        loadRecaptcha(this.recaptcha_site_key).catch(console.error);
     }
 
     attachEventListeners() {
-        const form = this.getElementsByTagName('form')[0];
-        const restartButton = this.getElementsByClassName('restart_button')[0];
+        this.getElementsByTagName('form')[0]
+            .addEventListener('submit', (e) => this.handleSubmit(e));
 
-        if (form) {
-            form.addEventListener('submit', (e) => this.handleSubmit(e));
-        }
-
-        if (restartButton) {
-            restartButton.addEventListener('click', () => this.hideFail());
-        }
+        this.getElementsByClassName('restart_button')[0]
+            .addEventListener('click', () => this.hideFail());
     }
 
     onParentPopupClose() {
@@ -140,7 +99,7 @@ class GetInTouchForm extends GHComponent {
     initConfig(formConfigs) {
         try {
             this.config = formConfigs.find(({ id }) => id === this.formId);
-            if (!this.config) throw new Error('Config not found');
+            if (!this.config) throw new Error("Config not found");
         } catch {
             const defaultId = this.isInPopup ? 'default popup' : 'default';
             this.config = defaultConfigs.find(({ id }) => id === defaultId);
@@ -148,7 +107,7 @@ class GetInTouchForm extends GHComponent {
 
         this.titleName = this.getAttribute('data-form-title') || this.config.title;
         this.subtitleName = this.getAttribute('data-form-subtitle') || this.config.subtitle;
-        this.placement = this.getAttribute('data-form-placement') || 'main';
+        this.placement = this.getAttribute('data-form-placement') || "main";
         this.buttonText = this.getAttribute('data-form-button-text') || this.config.button_text;
     }
 
@@ -162,8 +121,6 @@ class GetInTouchForm extends GHComponent {
 
         return new Promise((resolve, reject) => {
             grecaptcha.ready(() => {
-                hideRecaptchaBadge();
-
                 grecaptcha.execute(this.recaptcha_site_key, { action })
                     .then(resolve)
                     .catch(reject);
@@ -189,6 +146,7 @@ class GetInTouchForm extends GHComponent {
                 }
 
                 this.handleSuccessFormValidation(form, token);
+
             } catch (error) {
                 console.error(error);
                 this.showFail();
@@ -221,7 +179,7 @@ class GetInTouchForm extends GHComponent {
     inputsValidation = async (form) => {
         const inputs = Array.from(form.querySelectorAll('input'));
         return checkInputsValidations(inputs);
-    };
+    }
 
     verifyRecaptcha = async (recaptchaToken) => {
         const response = await fetch('/api/verify-recaptcha', {
@@ -242,7 +200,7 @@ class GetInTouchForm extends GHComponent {
         }
 
         return data;
-    };
+    }
 
     createDataObject(form, placement, recaptchaToken) {
         const inputs = {};
@@ -272,24 +230,13 @@ class GetInTouchForm extends GHComponent {
 
     addLoader() {
         this.classList.add('loading');
-
-        const btn = this.querySelector('button[type="submit"]');
-
-        if (btn) {
-            btn.disabled = true;
-        }
+        this.querySelector('button[type="submit"]').disabled = true;
     }
 
     removeLoader() {
         this.classList.remove('loading');
-
         const btn = this.querySelector('button[type="submit"]');
-
-        if (btn) {
-            setTimeout(() => {
-                btn.disabled = false;
-            }, 500);
-        }
+        setTimeout(() => btn.disabled = false, 500);
     }
 
     showSuccess({ email, phone }) {
@@ -331,9 +278,6 @@ class GetInTouchForm extends GHComponent {
 
     hideFail() {
         const el = this.querySelector('.overflow.fail');
-
-        if (!el) return;
-
         el.style.opacity = 0;
 
         setTimeout(() => {
@@ -371,4 +315,4 @@ class GetInTouchForm extends GHComponent {
 
 if (!customElements.get('get-in-touch-form')) {
     customElements.define('get-in-touch-form', GetInTouchForm);
-}
+}

package/src/components/get-in-touch-form/get-in-touch-form.scss

@@ -271,12 +271,6 @@ get-in-touch-form {
             }
         }
     }
-    .recaptcha-notice {
-        margin-top: 10px;
-        font-size: 12px;
-        line-height: 1.4;
-        opacity: 0.7;
-    }
     &[data-in-popup] {
         .get-in-touch-form {
             padding-top: 0;
@@ -374,10 +368,4 @@ popup-container[data-position="bottom-right"] {
             }
         }
     }
-}
-
-body .grecaptcha-badge {
-    visibility: hidden !important;
-    opacity: 0 !important;
-    pointer-events: none !important;
 }

package/src/components/video-slider/animations/cascade-strips.js

@@ -0,0 +1,89 @@
+import { drawImageCover } from '../utils/draw-image-cover.js';
+
+export default function cascadeStrips({
+    ctx,
+    canvas,
+    images,
+    progress,
+}) {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    // BASE IMAGE
+    drawImageCover({
+        ctx,
+        canvas,
+        image: images[0],
+    });
+
+    const slidesCount =
+        images.length;
+
+    const sectorWidth =
+        canvas.width / slidesCount;
+
+    // GLOBAL WIPE POSITION
+    const totalTravel =
+        canvas.width
+        + (
+            sectorWidth
+            * (slidesCount - 1)
+        );
+
+    const wipeX =
+        totalTravel * progress;
+
+    for (let i = 1; i < slidesCount; i++) {
+
+        const image =
+            images[i];
+
+        // OFFSET BETWEEN WIPES
+        const offset =
+            sectorWidth * (i - 1);
+
+        // CURRENT WIPE POSITION
+        const currentX =
+            wipeX - offset;
+
+        // NOT YET VISIBLE
+        if (currentX <= 0) {
+            continue;
+        }
+
+        ctx.save();
+
+        ctx.beginPath();
+
+        // LAST SLIDE
+        if (i === slidesCount - 1) {
+
+            // CONTINUES TO FULLSCREEN
+            ctx.rect(
+                0,
+                0,
+                currentX,
+                canvas.height
+            );
+
+        } else {
+
+            // NORMAL STRIP
+            ctx.rect(
+                currentX - sectorWidth,
+                0,
+                sectorWidth,
+                canvas.height
+            );
+        }
+
+        ctx.clip();
+
+        drawImageCover({
+            ctx,
+            canvas,
+            image,
+        });
+
+        ctx.restore();
+    }
+}

package/src/components/video-slider/animations/fade.js

@@ -0,0 +1,31 @@
+import { drawImageCover } from '../utils/draw-image-cover.js';
+
+export default function fade({
+    ctx,
+    canvas,
+    currentImage,
+    nextImage,
+    progress,
+}) {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    // CURRENT IMAGE
+    drawImageCover({
+        ctx,
+        canvas,
+        image: currentImage,
+    });
+
+    // NEXT IMAGE
+    ctx.save();
+
+    ctx.globalAlpha = progress;
+
+    drawImageCover({
+        ctx,
+        canvas,
+        image: nextImage,
+    });
+
+    ctx.restore();
+}

package/src/components/video-slider/animations/multi-strip.js

@@ -0,0 +1,66 @@
+import { drawImageCover } from '../utils/draw-image-cover.js';
+
+export default function multiStrip({
+    ctx,
+    canvas,
+    currentImage,
+    nextImage,
+    progress,
+    isTransitionPhase,
+}) {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    // CURRENT IMAGE
+    drawImageCover({
+        ctx,
+        canvas,
+        image: currentImage,
+    });
+
+    if (!isTransitionPhase) {
+        return;
+    }
+
+    const strips = 8;
+
+    const stripWidth = canvas.width / strips;
+
+    const stagger = 0.08;
+
+    for (let i = 0; i < strips; i++) {
+
+        const delay = i * stagger;
+
+        let localProgress =
+            (progress - delay) / (1 - (stagger * strips));
+
+        localProgress = Math.max(0, Math.min(1, localProgress));
+
+        const revealWidth =
+            stripWidth * localProgress;
+
+        const x =
+            i * stripWidth;
+
+        ctx.save();
+
+        ctx.beginPath();
+
+        ctx.rect(
+            x,
+            0,
+            revealWidth,
+            canvas.height
+        );
+
+        ctx.clip();
+
+        drawImageCover({
+            ctx,
+            canvas,
+            image: nextImage,
+        });
+
+        ctx.restore();
+    }
+}

package/src/components/video-slider/animations/sectors.js

@@ -0,0 +1,104 @@
+import { drawImageCover } from '../utils/draw-image-cover.js';
+
+export default function sectors({
+    ctx,
+    canvas,
+    images,
+    progress,
+}) {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    const slidesCount =
+        images.length;
+
+    const sectorWidth =
+        canvas.width / slidesCount;
+
+    // BASE SLIDE
+    drawImageCover({
+        ctx,
+        canvas,
+        image: images[0],
+    });
+
+    for (let i = 1; i < slidesCount; i++) {
+
+        // START OF THIS SECTOR
+        const start =
+            i / slidesCount;
+
+        // END OF THIS SECTOR
+        const end =
+            (i + 1) / slidesCount;
+
+        // LOCAL PROGRESS
+        let localProgress =
+            (progress - start)
+            / (end - start);
+
+        localProgress =
+            Math.max(
+                0,
+                Math.min(1, localProgress)
+            );
+
+        // NOT STARTED
+        if (localProgress <= 0) {
+            continue;
+        }
+
+        const x =
+            i * sectorWidth;
+
+        ctx.save();
+
+        ctx.beginPath();
+
+        // LAST SECTOR
+        if (i === slidesCount - 1) {
+
+            const expandProgress =
+                Math.max(
+                    0,
+                    (progress - 0.875) / 0.125
+                );
+
+            const dynamicWidth =
+                sectorWidth
+                + (
+                    (canvas.width - sectorWidth)
+                    * expandProgress
+                );
+
+            ctx.rect(
+                x,
+                0,
+                dynamicWidth,
+                canvas.height
+            );
+
+        } else {
+
+            ctx.rect(
+                x,
+                0,
+                sectorWidth,
+                canvas.height
+            );
+        }
+
+        ctx.clip();
+
+        // FADE-IN
+        ctx.globalAlpha =
+            localProgress;
+
+        drawImageCover({
+            ctx,
+            canvas,
+            image: images[i],
+        });
+
+        ctx.restore();
+    }
+}

package/src/components/video-slider/animations/wipe-left.js

@@ -0,0 +1,43 @@
+import { drawImageCover } from '../utils/draw-image-cover.js';
+import { easeInOutCubic } from '../utils/easing.js';
+
+export default function wipeLeft({
+    ctx,
+    canvas,
+    currentImage,
+    nextImage,
+    progress,
+}) {
+    const eased = easeInOutCubic(progress);
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    drawImageCover({
+        ctx,
+        canvas,
+        image: currentImage,
+    });
+
+    const revealWidth = canvas.width * eased;
+
+    ctx.save();
+
+    ctx.beginPath();
+
+    ctx.rect(
+        0,
+        0,
+        revealWidth,
+        canvas.height
+    );
+
+    ctx.clip();
+
+    drawImageCover({
+        ctx,
+        canvas,
+        image: nextImage,
+    });
+
+    ctx.restore();
+}

package/src/components/video-slider/animations/zoom.js

@@ -0,0 +1,51 @@
+import { drawImageCover } from '../utils/draw-image-cover.js';
+
+export default function zoom({
+    ctx,
+    canvas,
+    currentImage,
+    nextImage,
+    progress,
+    isTransitionPhase,
+}) {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    if (!isTransitionPhase) {
+        drawImageCover({
+            ctx,
+            canvas,
+            image: currentImage,
+            scale: 1.05,
+        });
+
+        return;
+    }
+
+    // CURRENT IMAGE
+    ctx.save();
+
+    ctx.globalAlpha = 1 - progress;
+
+    drawImageCover({
+        ctx,
+        canvas,
+        image: currentImage,
+        scale: 1 + (progress * 0.1),
+    });
+
+    ctx.restore();
+
+    // NEXT IMAGE
+    ctx.save();
+
+    ctx.globalAlpha = progress;
+
+    drawImageCover({
+        ctx,
+        canvas,
+        image: nextImage,
+        scale: 1.1 - (progress * 0.1),
+    });
+
+    ctx.restore();
+}

package/src/components/video-slider/config.js

@@ -0,0 +1,6 @@
+export const videoSlider = {
+  tag: 'video-slider',
+  category: 'Media',
+  src: '@gudhub/ssg-web-components-library/src/components/video-slider/video-slider.js',
+  serverOnly: false
+}

package/src/components/video-slider/utils/draw-image-cover.js

@@ -0,0 +1,27 @@
+export function drawImageCover({
+    ctx,
+    canvas,
+    image,
+    scale = 1,
+    offsetX = 0,
+    offsetY = 0,
+}) {
+    const canvasRatio = canvas.width / canvas.height;
+    const imageRatio = image.width / image.height;
+
+    let drawWidth;
+    let drawHeight;
+
+    if (imageRatio > canvasRatio) {
+        drawHeight = canvas.height * scale;
+        drawWidth = drawHeight * imageRatio;
+    } else {
+        drawWidth = canvas.width * scale;
+        drawHeight = drawWidth / imageRatio;
+    }
+
+    const x = ((canvas.width - drawWidth) / 2) + offsetX;
+    const y = ((canvas.height - drawHeight) / 2) + offsetY;
+
+    ctx.drawImage(image, x, y, drawWidth, drawHeight);
+}

package/src/components/video-slider/utils/easing.js

@@ -0,0 +1,5 @@
+export function easeInOutCubic(x) {
+    return x < 0.5
+        ? 4 * x * x * x
+        : 1 - Math.pow(-2 * x + 2, 3) / 2;
+}

package/src/components/video-slider/video-slider.html

@@ -0,0 +1,5 @@
+<section class="video-slider-section">
+    <div class="canvas-wrapper">
+        <canvas></canvas>
+    </div>
+</section>

package/src/components/video-slider/video-slider.js

@@ -0,0 +1,177 @@
+import html from './video-slider.html';
+import './video-slider.scss';
+
+import wipeLeft from './animations/wipe-left.js';
+import fade from './animations/fade.js';
+import zoom from './animations/zoom.js';
+import multiStrip from './animations/multi-strip.js';
+import cascadeStrips from './animations/cascade-strips.js';
+import sectors from './animations/sectors.js';
+
+class VideoSlider extends GHComponent {
+    constructor() {
+        super();
+
+        this.animations = {
+            wipeLeft,
+            fade,
+            zoom,
+            multiStrip,
+            cascadeStrips,
+            sectors
+        };
+    }
+
+    async onServerRender() {
+
+        this.ghId = this.getAttribute('data-gh-id') || null;
+        this.chapter = this.getAttribute('data-chapter') || 'pages';
+        this.json = this.ghId 
+            ? await super.getGhData(this.ghId, this.chapter)
+            : console.error('data-gh-id attribute is required for video-slider component');
+
+        this.setAttribute(
+            'data-animation',
+            this.json.animation
+        );
+
+        this.setAttribute(
+            'data-slide-duration',
+            this.json.slideDuration
+        );
+
+        this.setAttribute(
+            'data-transition-duration',
+            this.json.transitionDuration
+        );
+
+        this.setAttribute(
+            'data-images',
+            JSON.stringify(this.json.images)
+        );
+    
+        super.render(html);
+    }
+
+    async onClientReady() {
+
+        this.config = {
+            animation: this.getAttribute('data-animation'),
+
+            slideDuration:
+                Number(this.getAttribute('data-slide-duration')),
+
+            transitionDuration:
+                Number(this.getAttribute('data-transition-duration'))
+        };
+
+        this.images = JSON.parse(this.getAttribute('data-images'));
+
+        this.canvas = this.querySelector('canvas');
+
+        this.ctx = this.canvas.getContext('2d');
+
+        this.canvas.width = 1280;
+        this.canvas.height = 720;
+
+        this.loadedImages = await this.preloadImages();
+
+        this.startLoop();
+    }
+
+    preloadImages() {
+        return Promise.all(
+            this.images.map((url) => {
+                return new Promise((resolve, reject) => {
+
+                    const image = new Image();
+
+                    image.crossOrigin = 'anonymous';
+
+                    image.onload = () => {
+                        resolve(image);
+                    };
+
+                    image.onerror = () => reject(url);
+
+                    image.src = url;
+                });
+            })
+        );
+    }
+
+    startLoop() {
+        this.startTime = performance.now();
+
+        const render = (time) => {
+            const elapsed = time - this.startTime;
+
+            const totalSlides = this.loadedImages.length;
+
+            const singleSlideTotal =
+                this.config.slideDuration + this.config.transitionDuration;
+
+            const totalDuration =
+                singleSlideTotal * totalSlides;
+
+            const timelineTime =
+                elapsed % totalDuration;
+
+            const currentSlide =
+                Math.floor(timelineTime / singleSlideTotal);
+
+            const nextSlide =
+                (currentSlide + 1) % totalSlides;
+
+            const localTime =
+                timelineTime % singleSlideTotal;
+
+            const isTransitionPhase =
+                localTime >= this.config.slideDuration;
+
+            const transitionTime =
+                localTime - this.config.slideDuration;
+
+            const progress = isTransitionPhase
+                ? transitionTime / this.config.transitionDuration
+                : 0;
+
+            this.renderFrame({
+                currentImage: this.loadedImages[currentSlide],
+                nextImage: this.loadedImages[nextSlide],
+                progress,
+                isTransitionPhase,
+            });
+
+            requestAnimationFrame(render);
+        };
+
+        requestAnimationFrame(render);
+    }
+
+    renderFrame({
+        currentImage,
+        nextImage,
+        progress,
+        isTransitionPhase,
+    }) {
+        if (!currentImage) return;
+
+        const animation =
+            this.animations[this.config.animation];
+
+        if (!animation) return;
+
+        animation({
+            ctx: this.ctx,
+            canvas: this.canvas,
+            currentImage,
+            nextImage,
+            progress,
+            isTransitionPhase,
+            images: this.loadedImages,
+        });
+    }
+}
+
+window.customElements.define('video-slider', VideoSlider);

package/src/components/video-slider/video-slider.readme.md

@@ -0,0 +1,218 @@
+# Video Slider Component
+
+## Description
+
+`video-slider` is a canvas-based animated image slider that supports multiple transition effects between slides.
+
+The component loads configuration and images from GudHub data and automatically starts the animation loop after initialization.
+
+---
+
+# Data Structure
+
+The component expects the following JSON structure:
+
+```json
+{
+  "video-slider": {
+    "animation": "fade",
+    "slideDuration": "100",
+    "transitionDuration": "2000",
+    "images": [
+      "https://app.gudhub.com/userdata/12345/image1.jpg",
+      "https://app.gudhub.com/userdata/12354/image2.jpg",
+      "https://app.gudhub.com/userdata/11345/image3.jpg"
+    ]
+  }
+}
+```
+
+## Configuration Parameters
+
+| Property           | Type          | Required | Description                                            |
+| ------------------ | ------------- | -------- | ------------------------------------------------------ |
+| animation          | string        | Yes      | Animation type used between slides                     |
+| slideDuration      | string/number | Yes      | Duration of static slide display in milliseconds       |
+| transitionDuration | string/number | Yes      | Duration of slide transition animation in milliseconds |
+| images             | array         | Yes      | Ordered list of image URLs                             |
+
+---
+
+## Supported Animations
+
+The following animation values are supported:
+
+```text
+wipeLeft
+fade
+zoom
+multiStrip
+cascadeStrips
+sectors
+```
+
+Example:
+
+```json
+{
+  "animation": "zoom"
+}
+```
+
+---
+
+## Slide Duration
+
+Defines how long a slide remains visible before transition starts.
+
+Example:
+
+```json
+{
+  "slideDuration": "3000"
+}
+```
+
+Result:
+
+```text
+3 seconds display
++
+transition animation
+```
+
+---
+
+## Transition Duration
+
+Defines how long the transition animation lasts.
+
+Example:
+
+```json
+{
+  "transitionDuration": "1500"
+}
+```
+
+Result:
+
+```text
+1.5 second transition
+```
+
+---
+
+## Images
+
+Images must be provided as an ordered array of URLs.
+
+The component displays images in the exact order they appear in the array.
+
+Example:
+
+```json
+{
+  "images": [
+    "image-1.jpg",
+    "image-2.jpg",
+    "image-3.jpg"
+  ]
+}
+```
+
+Display order:
+
+```text
+image-1
+↓
+image-2
+↓
+image-3
+↓
+image-1
+(repeat)
+```
+
+---
+
+# Usage
+
+## Static Pages
+
+For static pages only `data-gh-id` is required.
+
+```html
+<video-slider
+    data-gh-id="video-slider"
+></video-slider>
+```
+
+---
+
+## Dynamic Pages
+
+For dynamic pages an additional `data-chapter` attribute must be specified.
+
+```html
+<video-slider
+    data-gh-id="video-slider"
+    data-chapter="areas"
+></video-slider>
+```
+
+### data-chapter
+
+Defines the chapter from which GudHub should load dynamic page data.
+
+Example:
+
+```html
+data-chapter="areas"
+```
+
+---
+
+# Required Attributes
+
+| Attribute    | Required           | Description                                |
+| ------------ | ------------------ | ------------------------------------------ |
+| data-gh-id   | Yes                | GudHub component identifier                |
+| data-chapter | Dynamic pages only | Chapter used to retrieve current item data |
+
+---
+
+# Example
+
+```html
+<video-slider
+    data-gh-id="video-slider"
+    data-chapter="areas"
+></video-slider>
+```
+
+```json
+{
+  "video-slider": {
+    "animation": "fade",
+    "slideDuration": "3000",
+    "transitionDuration": "1500",
+    "images": [
+      "https://example.com/slide-1.jpg",
+      "https://example.com/slide-2.jpg",
+      "https://example.com/slide-3.jpg"
+    ]
+  }
+}
+```
+
+---
+
+# Notes
+
+* All images should be publicly accessible URLs.
+* Images are preloaded before animation starts.
+* The slider automatically loops through all images.
+* Images are displayed using a cover-fit algorithm similar to CSS `object-fit: cover`.
+* Animation starts automatically after component initialization.
+* If an invalid animation name is provided, no transition animation will be rendered.

package/src/components/video-slider/video-slider.scss

@@ -0,0 +1,16 @@
+.video-slider-section {
+    padding: 0px;
+    width: 100%;
+    height: 100%;
+
+    .canvas-wrapper {
+        width: 100%;
+        height: 100%;
+    }
+
+    canvas {
+        width: 100%;
+        height: 100%;
+        display: block;
+    }
+}

package/src/config.js

@@ -67,9 +67,8 @@ export { GoogleAnalytics } from './components/google-analytics/config.js';
 export { GoogleTag } from './components/google-tag/config.js';
 export { cookiesPopup } from './components/cookies-popup/config.js';
 export { infoTable } from './components/info-table/config.js';
-export { liqpayPaymentButton } from './components/liqpay-payment-button/config.js';
-export { liqpayComponent } from './components/liqpay-component/config.js';
 export { faqComponent } from './components/faq-component/config.js';
+export { videoSlider } from './components/video-slider/config.js';
 
 // export { liqPayComponent } from './components/liqpay-component/config.js';
 // export { htmlTextFromEditorJs } from './components/html-text-from-editor-js/config.js';