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

package/package.json

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

package/src/components/faq-component/config.js

@@ -0,0 +1,6 @@
+export const faqComponent = {
+  tag: 'faq-component',
+  category: 'FAQ',
+  src: '@gudhub/ssg-web-components-library/src/components/faq-component/faq-component.js',
+  serverOnly: false
+};

package/src/components/faq-component/faq-component-data.json

@@ -0,0 +1,42 @@
+{
+  "title": "faq-component",
+  "subtitle": "subtitle",
+  "items": [
+    [
+      {
+        "title": "Expandable-vertical",
+        "text": "Be certain that our website development agency will provide only first-rate web-based software and website programming. With constantly advancing progress and great competition in the web development field Quality Assurance (QA) became one of the important traits that clients seek in web development firms, and Atlasiko Inc. enables this feature. We also offer you our testing services to ensure that all developed solutions have functionalities adequate to your initial request. Be certain that our website development agency will provide only first-rate web-based software and website programming. With constantly advancing progress and great competition in the web development field Quality Assurance (QA) became one of the important traits that clients seek in web development firms, and Atlasiko Inc. enables this feature. We also offer you our testing services to ensure that all developed solutions have functionalities adequate to your initial request.",
+        "list": {
+          "tag": "ul",
+          "items": ["List item 1", "List item 2", "List item 3"]
+        }
+      },
+      {
+        "title": "Expandable-vertical",
+        "text": "Be certain that our website development agency will provide only first-rate web-based software and website programming. With constantly advancing progress and great competition in the web development field Quality Assurance (QA) became one of the important traits that clients seek in web development firms, and Atlasiko Inc. enables this feature. We also offer you our testing services to ensure that all developed solutions have functionalities adequate to your initial request. Be certain that our website development agency will provide only first-rate web-based software and website programming. With constantly advancing progress and great competition in the web development field Quality Assurance (QA) became one of the important traits that clients seek in web development firms, and Atlasiko Inc. enables this feature. We also offer you our testing services to ensure that all developed solutions have functionalities adequate to your initial request."
+      },
+      {
+        "title": "Expandable-vertical",
+        "text": "Be certain that our website development agency will provide only first-rate web-based software and website programming. With constantly advancing progress and great competition in the web development field Quality Assurance (QA) became one of the important traits that clients seek in web development firms, and Atlasiko Inc. enables this feature. We also offer you our testing services to ensure that all developed solutions have functionalities adequate to your initial request. Be certain that our website development agency will provide only first-rate web-based software and website programming. With constantly advancing progress and great competition in the web development field Quality Assurance (QA) became one of the important traits that clients seek in web development firms, and Atlasiko Inc. enables this feature. We also offer you our testing services to ensure that all developed solutions have functionalities adequate to your initial request."
+      }
+    ],
+    [
+      {
+        "title": "Expandable-vertical",
+        "text": "Be certain that our website development agency will provide only first-rate web-based software and website programming. With constantly advancing progress and great competition in the web development field Quality Assurance (QA) became one of the important traits that clients seek in web development firms, and Atlasiko Inc. enables this feature. We also offer you our testing services to ensure that all developed solutions have functionalities adequate to your initial request. Be certain that our website development agency will provide only first-rate web-based software and website programming. With constantly advancing progress and great competition in the web development field Quality Assurance (QA) became one of the important traits that clients seek in web development firms, and Atlasiko Inc. enables this feature. We also offer you our testing services to ensure that all developed solutions have functionalities adequate to your initial request.",
+        "list": {
+          "tag": "ol",
+          "items": ["List item 1", "List item 2", "List item 3"]
+        }
+      },
+      {
+        "title": "Expandable-vertical",
+        "text": "Be certain that our website development agency will provide only first-rate web-based software and website programming. With constantly advancing progress and great competition in the web development field Quality Assurance (QA) became one of the important traits that clients seek in web development firms, and Atlasiko Inc. enables this feature. We also offer you our testing services to ensure that all developed solutions have functionalities adequate to your initial request. Be certain that our website development agency will provide only first-rate web-based software and website programming. With constantly advancing progress and great competition in the web development field Quality Assurance (QA) became one of the important traits that clients seek in web development firms, and Atlasiko Inc. enables this feature. We also offer you our testing services to ensure that all developed solutions have functionalities adequate to your initial request."
+      },
+      {
+        "title": "Expandable-vertical",
+        "text": "Be certain that our website development agency will provide only first-rate web-based software and website programming. With constantly advancing progress and great competition in the web development field Quality Assurance (QA) became one of the important traits that clients seek in web development firms, and Atlasiko Inc. enables this feature. We also offer you our testing services to ensure that all developed solutions have functionalities adequate to your initial request. Be certain that our website development agency will provide only first-rate web-based software and website programming. With constantly advancing progress and great competition in the web development field Quality Assurance (QA) became one of the important traits that clients seek in web development firms, and Atlasiko Inc. enables this feature. We also offer you our testing services to ensure that all developed solutions have functionalities adequate to your initial request."
+      }
+    ]
+  ]
+}

package/src/components/faq-component/faq-component.html

@@ -0,0 +1,53 @@
+<section itemscope="" itemtype="https://schema.org/FAQPage">
+    <div class="container">
+        <div class="top-wrapper">
+            ${json.title ? `
+                <h2 gh-id="${ghId}.title"> TITLE </h2>
+            ` : ''}
+            ${json.subtitle ? `
+                <p class="subtitle" gh-id="${ghId}.subtitle"> SUBTITLE </p>
+            ` : ''}
+        </div>
+        <div class="flex-wrapper">
+            ${json.items.reduce((acc, itemsColumn, indexColumn) => acc + `
+                <div class="accordion-column">
+                    ${itemsColumn.reduce((acc, item, index) => acc + `
+                        <div class="primary-block" itemscope="" itemprop="mainEntity" itemtype="https://schema.org/Question">
+                            <div class="visible-content">
+                                ${item.title ? `<h3 class="title" gh-id="${ghId}.items.${indexColumn}.${index}.title" itemprop="name"></h3>` : ''}
+                                <div class="icon">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17" fill="none"><path d="M1 8.33333L8.5 14.8148L16 8.33333M8.5 15L8.5 0" stroke="none" stroke-width="2"></path></svg>
+                                </div>
+                            </div>
+                            <div class="expandable-wrapper" itemscope="" itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
+                                <div class="content" itemprop="text">
+                                    ${item.text ? `<p class="text" gh-id="${ghId}.items.${indexColumn}.${index}.text"></p>` : ''}
+                                    ${item.list ? `
+                                        <div class="list">
+                                            ${(() => {
+                                                let tag = 'ul';
+                                                if (item.list.tag === 'ul' || item.list.tag === 'ol') {
+                                                    tag = item.list.tag;
+                                                }
+                                                return `
+                                                    <${tag}>
+                                                        ${item.list.items.reduce((acc, listItem, itemIndex) => acc + `
+                                                            <li gh-id="${ghId}.items.${indexColumn}.${index}.list.items.${itemIndex}"></li>
+                                                        `, '')}
+                                                    </${tag}>
+                                                `
+                                            })()}
+                                        </div>
+                                    ` : ''}
+                                    ${item.button ? `
+                                        <button-component class="btn" data-link="${item.button.link}" data-popup-id="${item.button.popupId}" data-placement="${item.button.placement}">${item.button.text}</button-component>    
+                                    ` : ''}
+                                </div>
+                            </div>
+                        </div>
+                    `, '')}
+                </div>
+            `, '')}
+        </div>
+    </div>
+</section>

package/src/components/faq-component/faq-component.js

@@ -0,0 +1,83 @@
+import html from './faq-component.html';
+import './faq-component.scss';
+import jsonTemplate from './faq-component-data.json';
+
+class FaqComponent extends GHComponent {
+    constructor() {
+        super();
+        super.setDefaultData(jsonTemplate);
+        this.openedElement = null;
+    }
+    
+    async onServerRender() {
+        this.ghId = this.getAttribute('data-gh-id') || null;
+
+        const getCurrentChapter = await window?.getCurrentChapter();
+        this.chapter = getCurrentChapter ? getCurrentChapter : 'pages';
+
+        this.json = await super.getGhData(this.ghId, this.chapter);
+
+        if (this.ghId) {
+            await super.render(html);
+        }
+    }
+    
+    onClientReady() {
+        this.attachEventListeners();
+    }
+    
+    getBindedCallback(element) {
+        const expandableFunction = (event) => {
+            event.preventDefault();
+
+            const checkIsTargetInteractive = (target) => {
+                const preventedTagsForInteractive = ['button', 'a'];
+                const checkInteractiveTagNames = (target) => preventedTagsForInteractive.includes(target.tagName.toLowerCase());
+                const checkClassNames = (target) => target.classList.contains('btn');
+    
+                const checkers = [checkInteractiveTagNames, checkClassNames];
+                const result = checkers.some((checker) => checker(target));
+    
+                return result;
+            }
+    
+            if (checkIsTargetInteractive(event.target)) {
+                return;
+            }
+    
+            const isOpening = element.classList.toggle('expand');
+
+            const toggleOverflow = (element, bool) => {
+                const action = bool ? 'add' : 'remove';
+                element.classList[action]('overflow');
+            };
+            if (isOpening) {
+                if (this.openedElement && this.openedElement !== element) {
+                    this.openedElement.classList.remove('expand');
+                    toggleOverflow(this.openedElement, false);
+                }
+    
+                this.openedElement = element;
+    
+                setTimeout(() => toggleOverflow(element, true), 0);
+            } else {
+                toggleOverflow(element, false);
+                if (this.openedElement === element) {
+                    this.openedElement = null;
+                }
+            }
+        }
+    
+        return expandableFunction;
+    }
+    
+    attachEventListeners() {
+        const items = this.querySelectorAll('.primary-block');
+        for (const item of items) {
+            const boundCallback = this.getBindedCallback(item);
+            item.addEventListener('click', boundCallback);
+        }
+    }
+}
+
+window.customElements.define('faq-component', FaqComponent);

package/src/components/faq-component/faq-component.md

@@ -0,0 +1,48 @@
+# Attributes:
+
+None
+
+# Component data-object:
+
+("?" means "unnecessary")
+
+```json
+{
+  "title?": "string",
+  "subtitle?": "string",
+  "items": [
+    [
+      {
+        "title": "string",
+        "text": "string",
+        "button?": {
+          "link": "/link/",
+          "popupId": "form",
+          "placement": "faq-component",
+          "text": "Button Text"
+        },
+        "list?": {
+          "tag?": "string", // "ol" or "ul"
+          "items": ["string", "string", "string"]
+        }
+      }
+    ],
+    [
+      {
+        "title": "string",
+        "text": "string",
+        "button?": {
+          "link": "/link/",
+          "popupId": "form",
+          "placement": "faq-component",
+          "text": "Button Text"
+        },
+        "list?": {
+          "tag?": "string", // "ol" or "ul"
+          "items": ["string", "string", "string"]
+        }
+      }
+    ]
+  ]
+}
+```

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

@@ -0,0 +1,123 @@
+faq-component {
+    --hover-transition-duration: .2s;
+    --expand-transition-duration: .5s;
+    --gap: 20px;
+    background: var(--bg-color);
+    .subtitle {
+        max-width: 940px;
+        margin-left: auto;
+        margin-right: auto;
+        text-align: center;
+    }
+    .flex-wrapper {
+        display: flex;
+        gap: var(--gap);
+    }
+    .accordion-column {
+        width: calc(50% - (var(--gap) / 2));
+        & > *:not(:last-child) {
+            margin-bottom: 20px;
+        }
+    }
+    .primary-block {
+        width: 100%;
+        background: var(--block-primary-bg-color);
+        border-radius: var(--block-primary-border-radius);
+        box-shadow: var(--block-primary-box-shadow);
+        cursor: pointer;
+        transition: all var(--hover-transition-duration) ease;
+        &:hover, &.expand {
+            background-color: var(--block-primary-bg-hover-color);
+        }
+        .visible-content {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 16px;
+            .title {
+                margin-bottom: 0;
+                transition: color var(--hover-transition-duration) ease;
+            }
+            .icon {
+                width: 24px;
+                height: 24px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                svg {
+                    width: 16px;
+                    height: auto;
+                    transition: transform var(--hover-transition-duration) linear;
+                    path {
+                        stroke: var(--h-color);
+                        transition: stroke var(--hover-transition-duration) ease;
+                    }
+                }
+            }
+        }
+        .expandable-wrapper {
+            max-height: 0;
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+            overflow: hidden;
+            transition: max-height var(--expand-transition-duration) ease;
+            .content {
+                padding: 20px 15px;
+                .text, li {
+                    font-size: var(--text-font-size);
+                    font-weight: var(--text-font-weight);
+                    color: var(--block-primary-text-color);
+                    line-height: 140%;
+                    letter-spacing: 0.01em;
+                    text-align: inherit;
+                }
+                ul {
+                    padding-top: 10px;
+                    padding-left: 18px;
+                    list-style: disc;
+                }
+                ol {
+                    padding-top: 10px;
+                    padding-left: 18px;
+                    list-style: decimal;
+                }
+            }
+        }
+        &.expand {
+            .expandable-wrapper {
+                max-height: 200px;
+            }
+            .icon {
+                svg {
+                    transform: rotate(180deg);
+                }
+            }
+        }
+        &.overflow {
+            .expandable-wrapper {
+                overflow: auto;
+            }
+        }
+        &:hover, &.expand {
+            .title {
+                color: var(--block-primary-accent-color);
+            }
+            .icon {
+                svg {
+                    path {
+                        stroke: var(--block-primary-accent-color);
+                    }
+                }
+            }
+        }
+    }
+    @media screen and (max-width: 800px) {
+        .flex-wrapper {
+            flex-direction: column;
+        }
+        .accordion-column {
+            width: 100%;
+        }
+    }
+}

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

@@ -10,6 +10,9 @@
             <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,6 +5,7 @@ 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) {
@@ -35,16 +36,41 @@ 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;
 
@@ -66,7 +92,11 @@ class GetInTouchForm extends GHComponent {
             this.attachEventListeners();
 
             if (this.recaptcha_site_key) {
-                loadRecaptcha(this.recaptcha_site_key).catch(console.error);
+                loadRecaptcha(this.recaptcha_site_key)
+                    .then(() => {
+                        observeRecaptchaBadge();
+                    })
+                    .catch(console.error);
             }
         }
     }
@@ -76,15 +106,26 @@ class GetInTouchForm extends GHComponent {
         super.render(html);
         this.attachEventListeners();
 
-        loadRecaptcha(this.recaptcha_site_key).catch(console.error);
+        if (this.recaptcha_site_key) {
+            loadRecaptcha(this.recaptcha_site_key)
+                .then(() => {
+                    observeRecaptchaBadge();
+                })
+                .catch(console.error);
+        }
     }
 
     attachEventListeners() {
-        this.getElementsByTagName('form')[0]
-            .addEventListener('submit', (e) => this.handleSubmit(e));
+        const form = this.getElementsByTagName('form')[0];
+        const restartButton = this.getElementsByClassName('restart_button')[0];
 
-        this.getElementsByClassName('restart_button')[0]
-            .addEventListener('click', () => this.hideFail());
+        if (form) {
+            form.addEventListener('submit', (e) => this.handleSubmit(e));
+        }
+
+        if (restartButton) {
+            restartButton.addEventListener('click', () => this.hideFail());
+        }
     }
 
     onParentPopupClose() {
@@ -99,7 +140,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);
@@ -107,7 +148,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;
     }
 
@@ -121,6 +162,8 @@ class GetInTouchForm extends GHComponent {
 
         return new Promise((resolve, reject) => {
             grecaptcha.ready(() => {
+                hideRecaptchaBadge();
+
                 grecaptcha.execute(this.recaptcha_site_key, { action })
                     .then(resolve)
                     .catch(reject);
@@ -146,7 +189,6 @@ class GetInTouchForm extends GHComponent {
                 }
 
                 this.handleSuccessFormValidation(form, token);
-
             } catch (error) {
                 console.error(error);
                 this.showFail();
@@ -179,7 +221,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', {
@@ -200,7 +242,7 @@ class GetInTouchForm extends GHComponent {
         }
 
         return data;
-    }
+    };
 
     createDataObject(form, placement, recaptchaToken) {
         const inputs = {};
@@ -230,13 +272,24 @@ class GetInTouchForm extends GHComponent {
 
     addLoader() {
         this.classList.add('loading');
-        this.querySelector('button[type="submit"]').disabled = true;
+
+        const btn = this.querySelector('button[type="submit"]');
+
+        if (btn) {
+            btn.disabled = true;
+        }
     }
 
     removeLoader() {
         this.classList.remove('loading');
+
         const btn = this.querySelector('button[type="submit"]');
-        setTimeout(() => btn.disabled = false, 500);
+
+        if (btn) {
+            setTimeout(() => {
+                btn.disabled = false;
+            }, 500);
+        }
     }
 
     showSuccess({ email, phone }) {
@@ -278,6 +331,9 @@ class GetInTouchForm extends GHComponent {
 
     hideFail() {
         const el = this.querySelector('.overflow.fail');
+
+        if (!el) return;
+
         el.style.opacity = 0;
 
         setTimeout(() => {
@@ -315,4 +371,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,6 +271,12 @@ 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;
@@ -368,4 +374,10 @@ popup-container[data-position="bottom-right"] {
             }
         }
     }
+}
+
+body .grecaptcha-badge {
+    visibility: hidden !important;
+    opacity: 0 !important;
+    pointer-events: none !important;
 }

package/src/components/info-table/config.js

@@ -0,0 +1,6 @@
+export const infoTable = {
+  tag: 'info-table',
+  category: 'Table',
+  src: '@gudhub/ssg-web-components-library/src/components/info-table/info-table.js',
+  serverOnly: false
+};

package/src/components/info-table/info-table.html

@@ -0,0 +1,79 @@
+<section class="info-table">
+    <div class="container">
+        <div class="top-wrapper">
+            ${json.title ? `<h2 class="title" gh-id="${ghId}.title"></h2>` : ''}
+            ${json.subtitle ? `<p class="subtitle" gh-id="${ghId}.subtitle"></p>` : ''}
+        </div>
+
+        <div class="blocks-wrapper">
+            <table
+                class="block"
+                itemscope
+                itemtype="${json.schema?.tableType || 'https://schema.org/Table'}"
+            >
+                ${json.headers?.length ? `
+                    <thead>
+                        <tr class="table-head" gh-array="${ghId}.headers">
+                            ${json.headers.reduce((acc, item, index) => {
+                                return acc + `
+                                    <th gh-item>
+                                        <span gh-id="${ghId}.headers.${index}"></span>
+                                    </th>
+                                `
+                            }, '')}
+                        </tr>
+                    </thead>
+                ` : ''}
+
+                <tbody gh-array="${ghId}.items">
+                    ${json.items.reduce((acc, item, index) => {
+                        return acc + `
+                            <tr
+                                class="item"
+                                gh-item
+                                itemprop="${json.schema?.rowProp || 'about'}"
+                                itemscope
+                                itemtype="${json.schema?.rowType || 'https://schema.org/Thing'}"
+                            >
+                                <td>
+                                    <p
+                                        class="item-title"
+                                        gh-id="${ghId}.items.${index}.title"
+                                        itemprop="${json.schema?.titleProp || 'name'}"
+                                    ></p>
+                                </td>
+
+                                ${json.schema?.valueType === 'offer' ? `
+                                    <td
+                                        itemprop="${json.schema?.offerProp || 'offers'}"
+                                        itemscope
+                                        itemtype="${json.schema?.offerType || 'https://schema.org/Offer'}"
+                                    >
+                                        <p class="item-price">
+                                            $<span
+                                                gh-id="${ghId}.items.${index}.price"
+                                                itemprop="${json.schema?.priceProp || 'price'}"
+                                            ></span>
+                                            <span
+                                                gh-id="${ghId}.items.${index}.currency"
+                                                itemprop="${json.schema?.currencyProp || 'priceCurrency'}"
+                                            ></span>
+                                        </p>
+                                    </td>
+                                ` : `
+                                    <td>
+                                        <p
+                                            class="item-price"
+                                            gh-id="${ghId}.items.${index}.price"
+                                            itemprop="${json.schema?.valueProp || 'description'}"
+                                        ></p>
+                                    </td>
+                                `}
+                            </tr>
+                        `
+                    }, '')}
+                </tbody>
+            </table>
+        </div>
+    </div>
+</section>

package/src/components/info-table/info-table.js

@@ -0,0 +1,23 @@
+import html from './info-table.html';
+import './info-table.scss';
+import jsonTemplate from './info-table.json';
+
+class InfoTable 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('info-table', InfoTable);

package/src/components/info-table/info-table.json

@@ -0,0 +1,41 @@
+{
+    "title": "Lorem Ipsum Pricing",
+    "subtitle": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+    "schema": {
+        "tableType": "https://schema.org/Table",
+        "rowProp": "about",
+        "rowType": "https://schema.org/Service",
+        "titleProp": "name",
+        "valueType": "offer",
+        "offerProp": "offers",
+        "offerType": "https://schema.org/Offer",
+        "priceProp": "price",
+        "currencyProp": "priceCurrency"
+    },
+    "headers": [
+        "Service Name",
+        "Price Starts at"
+    ],
+    "items": [
+        {
+            "title": "Lorem Ipsum Service",
+            "price": "120",
+            "currency": "USD"
+        },
+        {
+            "title": "Dolor Sit Service",
+            "price": "240",
+            "currency": "USD"
+        },
+        {
+            "title": "Consectetur Service",
+            "price": "360",
+            "currency": "USD"
+        },
+        {
+            "title": "Adipiscing Service",
+            "price": "480",
+            "currency": "USD"
+        }
+    ]
+}

package/src/components/info-table/info-table.readme.md

@@ -0,0 +1,176 @@
+Ось оновлений README під твій новий динамічний компонент з `headers` та `schema`.
+
+````md
+# Component data-object
+
+`("?": means "unnecessary")`
+
+```json
+{
+    "title?": "Lorem Ipsum Overview",
+    "subtitle?": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+    "schema?": {
+        "tableType": "https://schema.org/Table",
+        "rowProp": "about",
+        "rowType": "https://schema.org/Thing",
+        "titleProp": "name",
+        "valueProp": "description"
+    },
+    "headers?": [
+        "Feature Name",
+        "Description"
+    ],
+    "items": [
+        {
+            "title": "Lorem Ipsum Feature",
+            "price": "Lorem ipsum dolor sit amet"
+        },
+        {
+            "title": "Dolor Sit Amet",
+            "price": "Consectetur adipiscing elit"
+        },
+        {
+            "title": "Sed Do Eiusmod",
+            "price": "Tempor incididunt ut labore"
+        },
+        {
+            "title": "Ut Enim Ad Minim",
+            "price": "Veniam quis nostrud exercitation"
+        }
+    ]
+}
+````
+
+## Fields description
+
+`title` - component title. If the field does not exist, the title will not be rendered.
+
+`subtitle` - component subtitle. If the field does not exist, the subtitle will not be rendered.
+
+`schema` - optional object for configuring microdata markup.
+
+`schema.tableType` - Schema.org type for the table. Default value is `https://schema.org/Table`.
+
+`schema.rowProp` - item property used for each table row. Default value is `about`.
+
+`schema.rowType` - Schema.org type for each table row. Default value is `https://schema.org/Thing`.
+
+`schema.titleProp` - item property for the first column value. Default value is `name`.
+
+`schema.valueProp` - item property for the second column value. Default value is `description`.
+
+`headers` - optional array of table header labels. If the field does not exist or is empty, the table header will not be rendered.
+
+`items` - array of table rows.
+
+`items.title` - item title. Usually rendered in the first table column.
+
+`items.price` - item price/value/description. Usually rendered in the second table column.
+
+---
+
+# Pricing table example
+
+Use this structure when the table contains services and prices.
+
+```json
+{
+    "title": "3D Rendering Services Pricing",
+    "subtitle": "Explore starting prices for different 3D rendering services.",
+    "schema": {
+        "tableType": "https://schema.org/Table",
+        "rowProp": "about",
+        "rowType": "https://schema.org/Service",
+        "titleProp": "name",
+        "valueType": "offer",
+        "offerProp": "offers",
+        "offerType": "https://schema.org/Offer",
+        "priceProp": "price",
+        "currencyProp": "priceCurrency"
+    },
+    "headers": [
+        "Service Name",
+        "Price Starts at"
+    ],
+    "items": [
+        {
+            "title": "Interior 3D Rendering",
+            "price": "547",
+            "currency": "CAD"
+        },
+        {
+            "title": "Exterior 3D Rendering",
+            "price": "683",
+            "currency": "CAD"
+        },
+        {
+            "title": "Commercial Interior 3D Rendering",
+            "price": "820",
+            "currency": "CAD"
+        },
+        {
+            "title": "Commercial Exterior 3D Rendering",
+            "price": "957",
+            "currency": "CAD"
+        }
+    ]
+}
+```
+
+## Additional fields for pricing table
+
+`schema.valueType` - defines how the second column should be rendered. If the value is `offer`, the component renders the second column as a Schema.org `Offer`.
+
+`schema.offerProp` - item property for the offer object. Default value is `offers`.
+
+`schema.offerType` - Schema.org type for the offer. Default value is `https://schema.org/Offer`.
+
+`schema.priceProp` - item property for the price value. Default value is `price`.
+
+`schema.currencyProp` - item property for the currency value. Default value is `priceCurrency`.
+
+`items.currency` - price currency. Required when `schema.valueType` is set to `offer`.
+
+---
+
+# Explanation
+
+The component supports two table formats.
+
+The first format is a regular informational table. In this case, each row is marked as a Schema.org `Thing`, the first column is marked as `name`, and the second column is marked as `description`.
+
+Example output structure:
+
+```text
+Table
+ └── about: Thing
+      ├── name: Lorem Ipsum Feature
+      └── description: Lorem ipsum dolor sit amet
+```
+
+The second format is a pricing table. In this case, each row is marked as a Schema.org `Service`, and the second column is rendered as an `Offer` with separate `price` and `priceCurrency` values.
+
+Example output structure:
+
+```text
+Table
+ └── about: Service
+      ├── name: Interior 3D Rendering
+      └── offers: Offer
+           ├── price: 547
+           └── priceCurrency: CAD
+```
+
+For regular text tables, use:
+
+```json
+"valueProp": "description"
+```
+
+For pricing tables, use:
+
+```json
+"valueType": "offer"
+```
+
+This allows the same component to be reused for simple informational tables and for service pricing tables with more correct microdata markup.

package/src/components/info-table/info-table.scss

@@ -0,0 +1,144 @@
+info-table {
+    section { 
+        padding: 0 375px 80px 375px;
+    }
+
+    .top-wrapper {
+        margin-bottom: 30px;
+
+        .title {
+            color: #05183A;
+            font-weight: 700;
+            font-size: 30px;
+            line-height: 136%;
+            letter-spacing: 0%;
+            text-align: center;
+            text-transform: uppercase;
+            margin-bottom: 12px;
+        }
+
+        .subtitle {
+            font-weight: 400;
+            font-size: 18px;
+            line-height: 136%;
+            letter-spacing: 0%;
+            text-align: justify;
+            color: #63636F;
+            text-align: center;
+        }
+    }
+
+    .block {
+        width: 100%;
+        margin-bottom: 25px;
+        border: 1px solid #C8C8C8;
+        border-collapse: collapse;
+        table-layout: fixed;
+    }
+
+    .table-head {
+        th {
+            width: 50%;
+            height: 52px;
+            padding: 0 15px;
+            border-bottom: 1px solid #C8C8C8;
+            vertical-align: middle;
+            text-align: center;
+            font-size: 18px;
+            font-weight: 700;
+            color: black;
+            line-height: 120%;
+        }
+
+        th:not(:last-child) {
+            border-right: 1px solid #C8C8C8;
+        }
+    }
+
+    .item {
+        &:nth-child(even) {
+            background-color: #F6F6F6;
+        }
+
+        td {
+            width: 50%;
+            height: 48px;
+            padding: 0 15px;
+            border-bottom: 1px solid #C8C8C8;
+            vertical-align: middle;
+            text-align: center;
+        }
+
+        td:not(:last-child) {
+            border-right: 1px solid #C8C8C8;
+        }
+
+        &:last-child {
+            td {
+                border-bottom: none;
+            }
+        }
+
+        &-title,
+        &-price {
+            width: 100%;
+            margin: 0;
+            font-size: 16px;
+            font-weight: 400;
+            color: black;
+            line-height: 140%;
+            text-align: center;
+        }
+    }
+
+    @media (max-width: 1900px) {
+        section {
+            padding-left: calc(100vw / 15);
+            padding-right: calc(100vw / 15);
+        }
+    }
+
+    @media (max-width: 1000px) {
+        section {
+            padding-bottom: 70px;
+        }
+    }
+
+    @media (max-width: 700px) {
+        section {
+            padding-bottom: 40px;
+        }
+
+        .top-wrapper {
+            margin-bottom: 24px;
+
+            .title {
+                font-size: 26px;
+            }
+
+            .subtitle {
+                font-size: 16px;
+            }
+        }
+
+        .table-head {
+            th {
+                height: 48px;
+                padding: 0 10px;
+                font-size: 16px;
+            }
+        }
+
+        .item {
+            td {
+                height: 46px;
+                padding: 0 10px;
+            }
+
+            &-title,
+            &-price {
+                font-size: 15px;
+            }
+        }
+    }
+}

package/src/config.js

@@ -66,6 +66,8 @@ export { PageBannerImageAndMenu } from './components/page-banner-image-and-menu/
 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 { faqComponent } from './components/faq-component/config.js';
 
 // export { liqPayComponent } from './components/liqpay-component/config.js';
 // export { htmlTextFromEditorJs } from './components/html-text-from-editor-js/config.js';