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

package/src/components/liqpay-component/liqpay-component.scss

@@ -0,0 +1,337 @@
+body {
+    padding-top: 0;
+}
+
+liqpay-component {
+    display: block;
+
+    .liqpay-component {
+        position: relative;
+        min-height: 100vh;
+        padding: 48px 20px 80px;
+        background:
+            radial-gradient(ellipse 80% 60% at 15% 50%, rgba(29, 78, 216, 0.18) 0%, transparent 70%),
+            radial-gradient(ellipse 60% 50% at 85% 50%, rgba(109, 40, 217, 0.14) 0%, transparent 70%),
+            linear-gradient(135deg, #0a1628 0%, #0d1f3c 40%, #0e1a35 60%, #0c1525 100%);
+        background-attachment: fixed;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        // &__logo {
+        //     display: flex;
+        //     align-items: center;
+        //     gap: 8px;
+        //     margin-bottom: 28px;
+        // }
+
+        // &__logo-badge {
+        //     background: #1e3a5f;
+        //     border: 1px solid #2a4f7c;
+        //     border-radius: 8px;
+        //     padding: 6px 10px;
+        //     display: flex;
+        //     align-items: center;
+        // }
+
+        // &__logo-badge-text {
+        //     display: flex;
+        //     flex-direction: column;
+        //     line-height: 1;
+        // }
+
+        // &__logo-gud {
+        //     font-size: 17px;
+        //     font-weight: 700;
+        //     color: #4a9eff;
+        //     letter-spacing: 0.02em;
+        // }
+
+        // &__logo-hub {
+        //     font-size: 17px;
+        //     font-weight: 700;
+        //     color: #4a9eff;
+        //     letter-spacing: 0.04em;
+        // }
+
+        // &__logo-crm {
+        //     font-size: 46px;
+        //     font-weight: 700;
+        //     color: #ffffff;
+        //     letter-spacing: -0.3px;
+        // }
+
+        &__title {
+            margin: 0;
+            color: #ffffff;
+            font-size: 32px;
+            font-weight: 700;
+            letter-spacing: -0.5px;
+            line-height: 1.2;
+            text-align: center;
+        }
+
+        &__subtitle {
+            margin: 10px 0 32px;
+            color: #8599b5;
+            font-size: 15px;
+            font-weight: 400;
+            text-align: center;
+            line-height: 1.5;
+        }
+
+        &__card {
+            width: 100%;
+            max-width: 420px;
+            background: #eef0f4;
+            border-radius: 20px;
+            padding: 28px 28px 24px;
+            border: none;
+            box-shadow: none;
+        }
+
+        &__amount-row {
+            display: flex;
+            align-items: flex-start;
+            justify-content: space-between;
+            gap: 12px;
+        }
+
+        &__amount-label {
+            margin: 0 0 4px;
+            font-size: 13px;
+            font-weight: 500;
+            color: #6b7280;
+        }
+
+        &__amount {
+            margin: 0;
+            font-size: 38px;
+            font-weight: 700;
+            color: #111827;
+            letter-spacing: -1px;
+            line-height: 1;
+        }
+
+        &__secured-badge {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            flex-shrink: 0;
+            margin-top: 6px;
+            background: #ffffff;
+            border: 1.5px solid #16a34a;
+            border-radius: 100px;
+            padding: 5px 12px 5px 7px;
+        }
+
+        &__secured-icon {
+            width: 18px;
+            height: 18px;
+            border-radius: 50%;
+            background: #16a34a;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+
+            svg {
+                width: 10px;
+                height: 10px;
+                display: block;
+            }
+        }
+
+        &__secured-text {
+            font-size: 12px;
+            font-weight: 600;
+            color: #16a34a;
+            line-height: 1;
+        }
+
+        &__divider {
+            height: 1px;
+            background: #d4d7de;
+            margin: 20px 0;
+        }
+
+        &__summary {
+            display: flex;
+            flex-direction: column;
+            gap: 14px;
+            margin: 0;
+            padding: 0;
+            border-radius: 0;
+            background: transparent;
+        }
+
+        &__summary-row {
+            display: flex;
+            align-items: flex-start;
+            justify-content: space-between;
+            gap: 16px;
+        }
+
+        &__summary-label {
+            font-size: 14px;
+            font-weight: 500;
+            color: #6b7280;
+            flex-shrink: 0;
+        }
+
+        &__summary-value {
+            font-size: 14px;
+            font-weight: 600;
+            color: #111827;
+            text-align: right;
+            max-width: 60%;
+            word-break: break-word;
+        }
+
+        &__text {
+            margin: 16px 0 0;
+            color: #6b7280;
+            font-size: 13px;
+            line-height: 1.6;
+
+            &:empty {
+                display: none;
+            }
+        }
+
+        &__form {
+            margin: 0;
+        }
+
+        &__button {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: 10px;
+            width: 100%;
+            min-height: 52px;
+            margin-top: 22px;
+            padding: 0 24px;
+            border: none;
+            border-radius: 12px;
+            background: #2563eb;
+            color: #ffffff;
+            font-size: 16px;
+            font-weight: 700;
+            letter-spacing: -0.2px;
+            cursor: pointer;
+            transition:
+                background 0.18s ease,
+                transform 0.1s ease;
+
+            &:hover {
+                background: #1d4ed8;
+            }
+
+            &:active {
+                background: #1e40af;
+                transform: scale(0.98);
+            }
+
+            &:disabled {
+                cursor: not-allowed;
+                opacity: 0.6;
+                transform: none;
+            }
+        }
+
+        &__button-icon {
+            width: 18px;
+            height: 18px;
+            flex-shrink: 0;
+        }
+
+        &__error {
+            margin: 14px 0 0;
+            color: #dc2626;
+            font-size: 13px;
+            line-height: 1.5;
+        }
+
+        &__powered {
+            margin: 16px 0 0;
+            text-align: center;
+            font-size: 13px;
+            color: #9ca3af;
+            font-weight: 400;
+        }
+
+        &__powered-brand {
+            color: #16a34a;
+            font-weight: 700;
+        }
+
+        &__security {
+            display: flex;
+            align-items: center;
+            gap: 24px;
+            margin-top: 24px;
+        }
+
+        &__security-item {
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            font-size: 13px;
+            color: #8599b5;
+            font-weight: 500;
+        }
+
+        &__security-icon {
+            width: 18px;
+            height: 18px;
+            border-radius: 50%;
+            border: 1.5px solid #16a34a;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+
+            svg {
+                width: 10px;
+                height: 10px;
+                display: block;
+            }
+        }
+    }
+
+    @media (max-width: 480px) {
+        .liqpay-component {
+            padding: 40px 16px 72px;
+
+            &__title {
+                font-size: 26px;
+            }
+
+            &__card {
+                padding: 22px 18px 20px;
+            }
+
+            &__amount {
+                font-size: 30px;
+            }
+
+            &__summary-row {
+                flex-direction: column;
+                gap: 4px;
+            }
+
+            &__summary-value {
+                max-width: 100%;
+                text-align: left;
+            }
+
+            &__security {
+                flex-direction: column;
+                gap: 10px;
+                align-items: flex-start;
+            }
+        }
+    }
+}

package/src/components/liqpay-payment-button/config.js

@@ -0,0 +1,6 @@
+export const liqpayPaymentButton = {
+  tag: 'liqpay-payment-button',
+  category: 'Payment',
+  src: '@gudhub/ssg-web-components-library/src/components/liqpay-payment-button/liqpay-payment-button.js',
+  serverOnly: false
+};

package/src/components/liqpay-payment-button/liqpay-payment-button.html

@@ -0,0 +1,5 @@
+<section class="liqpay-payment-button">
+    <div class="container">
+        
+    </div>
+</section>

package/src/components/liqpay-payment-button/liqpay-payment-button.js

@@ -0,0 +1,23 @@
+import html from './liqpay-payment-button.html';
+import './liqpay-payment-button.scss';
+import jsonTemplate from './liqpay-payment-button.json';
+
+class liqpayPaymentButton extends window.GHComponent {
+    constructor() {
+        super();
+        super.setDefaultData(jsonTemplate);
+    }
+
+    async onServerRender() {
+        this.ghId = this.getAttribute('data-gh-id') || null;
+        this.json = await super.getGhData(this.ghId, 'areas');
+
+        console.log("AAAAAAAAAAAAAAAAAAAAAAAA", this.json);
+
+        if (this.json) {
+            super.render(html);
+        }
+    }
+}
+
+window.customElements.define('liqpay-payment-button', liqpayPaymentButton);

package/src/components/liqpay-payment-button/liqpay-payment-button.json

@@ -0,0 +1,4 @@
+{
+    "title": "Lorem Ipsum Pricing",
+    "subtitle": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+}

package/src/components/liqpay-payment-button/liqpay-payment-button.scss

@@ -0,0 +1,7 @@
+liqpay-payment-button {
+    section { 
+        padding: 0 375px 80px 375px;
+    }
+
+    
+}

package/src/components/masonry-gallery/masonry-gallery.js

@@ -19,6 +19,9 @@ class MasonryGallery extends GHComponent {
         this.fitWidthValue = !!this.columnWidthValue;
         this.contactUsButton = this.hasAttribute('data-modal-button') ? this.getAttribute('data-modal-button') : null;
         this.contactUsButtonId = this.hasAttribute('data-modal-button-id') ? this.getAttribute('data-modal-button-id') : null;
+        this.showCount = this.hasAttribute('data-show-count')
+            ? +this.getAttribute('data-show-count')
+            : 10;
     }
 
     async onServerRender() {
@@ -28,6 +31,20 @@ class MasonryGallery extends GHComponent {
         this.ghId = this.getAttribute('data-gh-id') || null;
         this.json = await super.getGhData(this.ghId, this.application);
 
+        if (
+            typeof this.json.items === 'object' &&
+            this.json.items !== null &&
+            this.json.items.url
+        ) {
+            const response = await fetch(this.json.items.url);
+            const data = await response.json();
+
+            this.setCacheGhData(
+                'masonry-images',
+                data.images
+            );
+        }
+
         if (Array.isArray(this.json.items)) {
             const isMoreItems = this.json.moreItems ? this.json.moreItems : null;
 
@@ -55,32 +72,25 @@ class MasonryGallery extends GHComponent {
         const modal = document.getElementById('modal');
 
         if (this.hasAttribute('images-url')) {
-            try {
-                const url = this.getAttribute('images-url');
+            const images = await this.getCacheGhData(
+                'masonry-images'
+            );
 
-                const response = await fetch(url);
-                const data = await response.json();
+            const isInitImagesEqualNull =
+                this.getAttribute('init-count') === 'null';
 
-                const { images } = data;
+            const initCountImages = this.contactUsButton
+                ? this.showCount
+                : images.length;
 
-                const isInitImagesEqualNull = this.getAttribute('init-count') === 'null';
-                
-                const initCountImages = this.hasAttribute('init-count') && !isInitImagesEqualNull ? this.getAttribute('init-count') : images.length;
+            const initImages = images.slice(0, initCountImages);
+            const initMoreImages = images.slice(initCountImages);
 
-                const initImages = images.slice(0, initCountImages);
-                const initMoreImages = images.slice(initCountImages);
+            this.allImagesArrayLength = images.length;
+            this.initCountImages = initCountImages;
 
-                this.allImagesArrayLength = images.length;
-                this.initCountImages = initCountImages;
-
-                this.initImages = initImages;
-                this.moreImages = initMoreImages;
-            } catch (error) {
-                console.error(error);
-            }
-        } else {
-            this.initImages = JSON.parse(this.getAttribute('init-images'));
-            this.moreImages = JSON.parse(this.getAttribute('add-array'));
+            this.initImages = initImages;
+            this.moreImages = initMoreImages;
         }
 
         const grid = this.imagesContainer;
@@ -200,9 +210,35 @@ class MasonryGallery extends GHComponent {
         const promise = new Promise(async (res, rej) => {
             const img = document.createElement('img');
 
-            const tempoImageSrc = await this.temporaryImage(imageSrc);
+            const fileName = imageSrc.split('/').pop();
+
+            const pathToJpg = `/assets/images/masonry/${fileName}`;
+            const pathToWebp = `${pathToJpg}.webp`;
+
+            const response = await fetch(pathToWebp, {
+                method: 'HEAD'
+            });
+
+            if (!response.ok) {
+                await fetch('/upload-image-path', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        imageSrc: pathToJpg,
+                        imageUrl: imageSrc,
+                        isCrop: true
+                    })
+                });
+            }
+
+            img.src = `/assets/images/masonry/${fileName}`;
 
-            img.setAttribute('src', tempoImageSrc);
+            img.setAttribute(
+                'src',
+                `/assets/images/masonry/${fileName}`
+            );
             img.setAttribute('alt', imageAlt);
             img.setAttribute('title', imageTitle);
 
@@ -252,6 +288,14 @@ class MasonryGallery extends GHComponent {
         const button = buttonWrapper.querySelector('#grid-add-items');
         const addImages = this.addImages;
 
+        if (!this.contactUsButton) {
+            if (button) {
+                button.remove();
+            }
+
+            return;
+        }
+
         const isInitCountEqualAllLength = this.initCountImages === this.allImagesArrayLength;
         
         if (!masonryGrid || !button || !buttonWrapper || !this.moreImages || isInitCountEqualAllLength) {
@@ -263,7 +307,7 @@ class MasonryGallery extends GHComponent {
         let images = [...this.moreImages];
 
         // Get more-count attribute value
-        const moreCountImages = parseInt(this.getAttribute('more-count')) || images.length;
+        const moreCountImages = this.showCount;
 
         button.addEventListener('click', async () => {
             // If we set max-height for block, this code removes styles which hide content, when we click show more

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();
+}