@total_onion/onion-library 1.0.174 → 1.0.176

package/components/block-accent-image-v3/accent-image-v3.twig

@@ -11,7 +11,7 @@
 		{{sectionStyles}}
 	}
 </style>
-<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{block.className}} {{block.className ~ '-' ~ loop}} {{classNameEntryPoint}} {{block.id}} lazy-fade" {{dataAttributeEntryPoint}} data-blockid="{{block.id}}" data-assetkey="{{blockClassName}}">
+<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{block.className}} {{loop ? block.className.index ~ '-' ~ loop.index : ''}} {{classNameEntryPoint}} {{block.id}} lazy-fade" {{dataAttributeEntryPoint}} data-blockid="{{block.id}}" data-assetkey="{{blockClassName}}">
 	{% if fields.accent_image_v3.enable_accent_image_v3 %}
 		{{ include('components/accent-image-v3.twig', {fields, block, blockClassName, is_preview}, with_context = false, ignore_missing = true) }}
 	{% endif %}

package/components/block-betterreviews-display-v3/betterreviews-display-v3-extra.js

@@ -0,0 +1,13 @@
+export default function (block) {
+	const betterReviewsCta = block.querySelector('.better-reviews__cta');
+	betterReviewsCta.classList.add(
+		'cmpl-cta-style-11',
+		'cmpl-cta-animation-style-1'
+	);
+
+	const span = document.createElement('span');
+	span.className = 'cmpl-cta-span';
+	span.textContent = betterReviewsCta.textContent.trim();
+	betterReviewsCta.textContent = '';
+	betterReviewsCta.appendChild(span);
+}

package/components/block-betterreviews-display-v3/betterreviews-display-v3.js

@@ -1,7 +1,10 @@
-export default function betterreviewsdisplay3Js ( options = {} ) {
+import extraJs from 'Assets/js/blocks/carousel-multi-layout-v3/carousel-multi-layout-v3-extra.js';
+
+export default function betterreviewsdisplay3Js(options = {}) {
 	try {
-		const { block } = options;
-	} catch ( error ) {
-		console.error( error );
+		const {block} = options;
+		extraJs(block);
+	} catch (error) {
+		console.error(error);
 	}
-}
+}

package/components/block-block-interactions-v3/block-interactions-v3.twig

@@ -11,7 +11,7 @@
 		{{sectionStyles}}
 	}
 </style>
-<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{block.className}} {{block.className ~ '-' ~ loop}} {{classNameEntryPoint}} lazy-fade {{block.id}}" {{dataAttributeEntryPoint}} data-blockid="{{block.id}}" data-parentblockid="{{block.videoIdPrefix}}" data-assetkey="{{blockClassName}}">
+<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{block.className}} {{loop ? block.className.index ~ '-' ~ loop.index : ''}} {{classNameEntryPoint}} lazy-fade {{block.id}}" {{dataAttributeEntryPoint}} data-blockid="{{block.id}}" data-parentblockid="{{block.videoIdPrefix}}" data-assetkey="{{blockClassName}}">
 	{% set blockInteractionsEnabled = fields.enable_block_interactions %}
 	{% set enableInteractionsButton = fields.enable_interactions_button %}
 	{% set interactionsButtonType = fields.interactions_button_type %}

package/components/block-carousel-multi-layout-v3/carousel-multi-layout-v3.twig

@@ -104,7 +104,7 @@
 		{{sectionStyles}}
 	}
 </style>
-<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{ blockClassName }} lazy-fade {{block.id}} {{block.className}} {{classNameEntryPoint}} {{block.className ~ '-' ~ loop}}" {{sectionDataAttributes}} data-mobileslidesoffsetbefore="{{carousel_slides_offset_before_mobile}}" data-mobileslidesoffsetafter="{{carousel_slides_offset_after_mobile}}" data-tabletslidesoffsetbefore="{{carousel_slides_offset_before_tablet}}" data-tabletslidesoffsetafter="{{carousel_slides_offset_after_tablet}}" data-desktopslidesoffsetbefore="{{carousel_slides_offset_before_desktop}}" data-desktopslidesoffsetafter="{{carousel_slides_offset_after_desktop}}" data-desktopspacebetweenslides="{{fields.carousel_space_between_slides_desktop}}" data-mobilespacebetweenslides="{{fields.carousel_space_between_slides_mobile}}" data-tabletspacebetweenslides="{{fields.carousel_space_between_slides_tablet}}" data-centeractiveslide="{{fields.carousel_center_active_slide}}" data-centeractiveslideportrait="{{fields.center_active_slide_portrait}}" data-centeractiveslidemobile="{{fields.center_active_slide_mobile}}" data-loopslides="{{fields.loop_slides}}" data-loopslidesportrait="{{fields.loop_slides_portrait}}" data-loopslidesmobile="{{fields.loop_slides_mobile}}" data-paginationstyle="{{carouselPaginationStyle}}" data-assetkey="{{ blockClassName }}">
+<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{ blockClassName }} lazy-fade {{block.id}} {{block.className}} {{classNameEntryPoint}} {{loop ? block.className.index ~ '-' ~ loop.index : ''}} " {{sectionDataAttributes}} data-mobileslidesoffsetbefore="{{carousel_slides_offset_before_mobile}}" data-mobileslidesoffsetafter="{{carousel_slides_offset_after_mobile}}" data-tabletslidesoffsetbefore="{{carousel_slides_offset_before_tablet}}" data-tabletslidesoffsetafter="{{carousel_slides_offset_after_tablet}}" data-desktopslidesoffsetbefore="{{carousel_slides_offset_before_desktop}}" data-desktopslidesoffsetafter="{{carousel_slides_offset_after_desktop}}" data-desktopspacebetweenslides="{{fields.carousel_space_between_slides_desktop}}" data-mobilespacebetweenslides="{{fields.carousel_space_between_slides_mobile}}" data-tabletspacebetweenslides="{{fields.carousel_space_between_slides_tablet}}" data-centeractiveslide="{{fields.carousel_center_active_slide}}" data-centeractiveslideportrait="{{fields.center_active_slide_portrait}}" data-centeractiveslidemobile="{{fields.center_active_slide_mobile}}" data-loopslides="{{fields.loop_slides}}" data-loopslidesportrait="{{fields.loop_slides_portrait}}" data-loopslidesmobile="{{fields.loop_slides_mobile}}" data-paginationstyle="{{carouselPaginationStyle}}" data-assetkey="{{ blockClassName }}">
 
 	{% set arrowData = fields %}
 	<div class="{{ blockClassName }}__inner-container">

package/components/block-cover-link-v3/cover-link-v3.twig

@@ -11,6 +11,6 @@
 		{{sectionStyles}}
 	}
 </style>
-<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{block.className}} {{block.className ~ '-' ~ loop}} {{classNameEntryPoint}} {{block.id}} lazy-fade" {{dataAttributeEntryPoint}} data-blockid="{{block.id}}" data-assetkey="{{blockClassName}}">
+<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{block.className}} {{loop ? block.className.index ~ '-' ~ loop.index : ''}} {{classNameEntryPoint}} {{block.id}} lazy-fade" {{dataAttributeEntryPoint}} data-blockid="{{block.id}}" data-assetkey="{{blockClassName}}">
 	{{htmlEntryPoint}}
 </section>

package/components/block-gradient-layer-v3/gradient-layer-v3.twig

@@ -13,7 +13,7 @@
 		{{sectionStyles}}
 	}
 </style>
-<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{block.className}} {{block.className ~ '-' ~ loop}} {{classNameEntryPoint}} lazy-fade {{block.id}}" {{dataAttributeEntryPoint}} data-jsload="false" data-renderdynamic="{{renderDynamic}}" data-pattern-gradient-overlay data-blockid="{{block.id}}" data-assetkey="{{blockClassName}}">
+<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{block.className}} {{loop ? block.className.index ~ '-' ~ loop.index : ''}} {{classNameEntryPoint}} lazy-fade {{block.id}}" {{dataAttributeEntryPoint}} data-jsload="false" data-renderdynamic="{{renderDynamic}}" data-pattern-gradient-overlay data-blockid="{{block.id}}" data-assetkey="{{blockClassName}}">
 
 	{{htmlEntryPoint}}
 </section>

package/components/block-modal-form-v3/modal-form-v3.js

@@ -0,0 +1,57 @@
+export default function modalformv3Js ( options = {} ) {
+	try {
+		const { block } = options;
+
+		// form logic
+		function validateFormFields(block) {
+			const inputs = block.querySelectorAll(
+				'.cdb_form_field input, .cdb_form_field select, .cdb_form_gdpr_information input, .cdb_form_privacypolicy_information input'
+			);
+
+			inputs.forEach((input) => {
+				const wrapper = input.closest('.cdb_form_field, .cdb_form_gdpr_information, .cdb_form_privacypolicy_information');
+
+				if (!wrapper) return;
+
+				wrapper.classList.remove('invalid');
+
+				if (!input.hasAttribute('required')) return;
+
+				if (input.type === 'checkbox') {
+					if (!input.checked) {
+						wrapper.classList.add('invalid');
+					}
+
+					input.addEventListener('change', () => {
+						if (input.checked) {
+							wrapper.classList.remove('invalid');
+						}
+					});
+				} else {
+					if (!input.value.trim()) {
+						wrapper.classList.add('invalid');
+					}
+
+					input.addEventListener('input', () => {
+						if (input.value.trim()) {
+							wrapper.classList.remove('invalid');
+						}
+					});
+				}
+			});
+		}
+
+		const submit = block.querySelector(
+			'.cdb-submit'
+		);
+
+		submit.classList.add('cmpl-cta-style-11', 'cmpl-cta-animation-style-1');
+
+		submit.addEventListener('click', (e) => {
+			validateFormFields(block);
+		});
+
+	} catch ( error ) {
+		console.error( error );
+	}
+}

package/components/block-modal-form-v3/modal-form-v3.php

@@ -0,0 +1,14 @@
+<?php
+
+acf_register_block_type(
+	array(
+		'name'            => 'modal-form-v3',
+		'title'           => __( 'Modal form v3', 'Global-theme Admin' ),
+		'render_callback' => 'athena_block_render_post_object',
+		'category'        => 'common',
+		'icon'            => get_svg_icon_content('brick.svg'),
+		'keywords'        => array('content', 'text' ),
+		'mode'            => 'preview',
+		'supports'        => array( 'align' => false, 'anchor' => true ),
+	)
+);

package/components/block-modal-form-v3/modal-form-v3.scss

@@ -0,0 +1,241 @@
+@use 'Assets/scss/modules/library-modules/core-mixins-v3/core-mixins-v3';
+@use 'Assets/scss/modules/library-modules/core-functions-v3/core-functions-v3';
+@use 'Assets/scss/theme/breakpoints';
+
+.modal-form-v3 {
+	pointer-events: all;
+
+	&__container-modal {
+		display: none;
+		position: fixed;
+		inset: 0;
+		z-index: 9998;
+		background-color: rgba(0, 0, 0, 0.4);
+	}
+
+	&__inner {
+		padding: core-functions-v3.fluidSize(80) 0;
+
+		@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+			padding: core-functions-v3.fluidSize(90);
+		}
+	}
+
+	&__modal-open {
+		&--icon {
+			cursor: pointer;
+			appearance: none;
+			border: none;
+			background: transparent;
+		}
+	}
+
+	&__modal-close {
+		position: absolute;
+		top: core-functions-v3.fluidSize(20);
+		right: core-functions-v3.fluidSize(20);
+	}
+
+}
+
+  .form__content {
+	display: flex;
+	flex-direction: column;
+	max-width: core-functions-v3.fluidSize(920);
+	height: 100%;
+
+	@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+		height: 80vh;
+	}
+
+  	.cdb_form_container {
+		margin-top: core-functions-v3.fluidSize(50);
+
+		.cdb_form_input_container {
+			form {
+				display: flex;
+				flex-direction: column;
+				gap: core-functions-v3.fluidSize(40, 'static');
+			}
+		}
+
+		.cdb_form_field {
+			input,
+			select {
+				font-size: core-functions-v3.fontSize(14, 'mobile');
+				font-family: var(--primary-font-family);
+				width: 100%;
+				font-weight: 200;
+				border: 1px solid #2d292633;
+				border-radius: 0;
+				padding: core-functions-v3.fluidSize(20, 'static');
+				outline: unset;
+				background: transparent;
+
+				@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+					font-size: core-functions-v3.fontSize(14, 'portrait');
+				}
+				@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+					font-size: core-functions-v3.fontSize(14, 'desktop');
+				}
+
+				&::placeholder {
+					color: #2d2926;
+				}
+			}
+
+			select {
+				padding-left: core-functions-v3.fluidSize(20, 'static');
+				appearance: none;
+			}
+		}
+
+		._block_country_for_optin {
+			position: relative;
+
+			&::after {
+				content: '';
+				position: absolute;
+				background-image: url('Assets/images/icon/arrow-down-teal.svg');
+				background-size: cover;
+				top: 26px;
+				right: 12px;
+				width: 14px;
+				height: 8px;
+			}
+		}
+
+		.optin,
+		.cdb_form_privacypolicy_information {
+			label {
+				display: flex;
+
+				input[type='checkbox'] {
+					width: auto;
+					appearance: none;
+					border: unset;
+					padding: unset;
+					margin: unset;
+					position: relative;
+
+					&::before {
+						content: ' ';
+						cursor: pointer;
+						display: block;
+						width: 35px !important;
+						height: 35px !important;
+						border-radius: 0 !important;
+						border: 1px solid #2d292633 !important;
+						background-color: #f6f6f0 !important;
+					}
+
+					&::after {
+						content: ' ';
+						cursor: pointer;
+						background-image: url('Assets/images/icon/tick.svg');
+						background-size: cover;
+						width: 35px !important;
+						height: 35px !important;
+						display: none;
+					}
+
+					&:checked::after {
+						display: block;
+					}
+
+					&:checked::before {
+						display: none;
+					}
+				}
+
+				span {
+					margin-left: core-functions-v3.fluidSize(30, 'static');
+				}
+
+				p {
+					text-transform: initial;
+					color: black;
+					font-size: core-functions-v3.fluidSize(14, 'static');
+					font-weight: 200;
+
+					a {
+						font-weight: 400;
+					}
+				}
+			}
+		}
+
+		.cdb_form_privacypolicy_information {
+			p {
+				margin-left: core-functions-v3.fluidSize(30, 'static');
+			}
+		}
+
+		.cdb_form_gdpr_information {
+			p {
+				font-size: core-functions-v3.fluidSize(14, 'static');
+				font-weight: 200;
+
+				a {
+					font-weight: 400;
+				}
+			}
+		}
+
+		.cdb-submit {
+			cursor: pointer;
+			width: max-content;
+			margin: auto;
+			padding: core-functions-v3.fluidSize(12, 'static')
+				core-functions-v3.fluidSize(20, 'static');
+			border: 2px solid black;
+			text-transform: uppercase;
+			font-weight: 800;
+			background: transparent;
+			z-index: 2;
+
+			&::before {
+				z-index: -1;
+			}
+		}
+
+		.cdb_form_field.invalid {
+			position: relative;
+
+			&::before {
+				content: 'Please fill in this field.';
+				position: absolute;
+				left: 0;
+				bottom: -25px;
+				color: #dc1919;
+				font-weight: 200;
+				font-size: core-functions-v3.fontSize(16, 'static');
+			}
+
+			&::after {
+				content: '';
+				position: absolute;
+				background-image: url('Assets/images/icon/warning.svg');
+				background-size: cover;
+				top: 19px;
+				right: 10px;
+				width: 20px;
+				height: 20px;
+			}
+
+			input {
+				border: 1px solid #dc1919;
+			}
+		}
+
+		.optin.invalid {
+			&::after {
+				position: unset;
+			}
+		}
+
+		.cdb_form_field.invalid input[type='checkbox']::before {
+			border-color: #dc1919 !important;
+		}
+	}
+  }

package/components/block-modal-form-v3/modal-form-v3.twig

@@ -0,0 +1,28 @@
+{% set blockClassName = "modal-form-v3" %}
+{% set classNameEntryPoint = include('entry-points/entry-point-classes.twig', { fields: fields, block: block }, with_context = false) %}
+{% set htmlEntryPoint = include('entry-points/entry-point-html-v3.twig', { fields: fields, block: block, blockClassName, blockClassName }, with_context = false) %}
+{% set dataAttributeEntryPoint = include('entry-points/entry-point-data-attribute.twig', { fields: fields, block: block }, with_context = false) %}
+{% set styleEntryPoint = include('entry-points/entry-point-style.twig', { fields: fields, block: block, is_preview }, with_context = false) %}
+{% set previewEntryPoint = include('entry-points/entry-point-preview-info.twig', { fields, block, displaytype, is_preview }, with_context = false) %}
+
+{% set sectionStyles =  styleEntryPoint %}
+
+{{previewEntryPoint}}
+
+<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{block.className}} {{classNameEntryPoint}} lazy-fade" {{dataAttributeEntryPoint}} data-blockid="{{block.id}}" style="{{sectionStyles}}" data-pattern-form-selection data-renderdynamic={{renderDynamic}} data-formid="{{fields.form}}" data-assetkey="{{blockClassName}}">
+
+		<div class="{{ blockClassName }}__container-inline">
+			<div class="{{ blockClassName }}__inner">
+				<div class="{{ blockClassName }}__wrapper">
+					{% if fields.title %}
+						{{ fields.title }}
+					{% endif %}
+					<!-- inline-form -->
+					{{function('do_shortcode', '[cdbform id=' ~ fields.form ~ ']')}}
+					<!-- end-inline-form -->
+				</div>
+			</div>
+		</div>
+
+	{{htmlEntryPoint}}
+</section>

package/components/block-nav-menu-container-v3/nav-menu-container-v3.twig

@@ -11,7 +11,8 @@
 		{{sectionStyles}}
 	}
 </style>
-<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{block.className}} {{classNameEntryPoint}} lazy-fade" {{dataAttributeEntryPoint}} data-pattern-nav-menu-container data-blockid="{{block.id}}" data-assetkey="{{blockClassName}}" data-navtype="{{menuType}}">
+<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{block.className}} {{loop ? block.className.index ~ '-' ~ loop.index : ''}} {{classNameEntryPoint}} lazy-fade" {{dataAttributeEntryPoint}} data-pattern-nav-menu-container data-blockid="{{block.id}}" data-assetkey="{{blockClassName}}" data-navtype="{{menuType}}">
+
 	{% if menuType == 'classic_nav_items_center' %}
 		{{ include( 'components/classic-nav-items-center.twig', { fields, block, blockClassName, options, nav_menus, current_post}, with_context = false, ignore_missing = true) }}
 	{% elseif menuType == 'slide_in_nav_panel'%}

package/components/block-post-info-v3/post-info-v3.twig

@@ -26,7 +26,7 @@
 		{{sectionStyles}}
 	}
 </style>
-<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{block.className}} {{block.className ~ '-' ~ loop}} {{postType}}-type {{classNameEntryPoint}} {{block.className}} lazy-fade {{block.id}}" {{dataAttributeEntryPoint}} data-assetkey="post-info-v3">
+<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{block.className}} {{loop ? block.className.index ~ '-' ~ loop.index : ''}} {{postType}}-type {{classNameEntryPoint}} {{block.className}} lazy-fade {{block.id}}" {{dataAttributeEntryPoint}} data-assetkey="post-info-v3">
 
 	{% for field in postTypeFields %}
 		{% if block %}

package/components/block-product-info-v3/product-info-v3.twig

@@ -21,7 +21,8 @@
 		{{sectionStyles}}
 	}
 </style>
-<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{blockClassName}} {{postType}}-type {{classNameEntryPoint}} {{block.className}} lazy-fade {{block.id}}" {{dataAttributeEntryPoint}} data-assetkey="product-info-v3">
+<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{postType}}-type {{classNameEntryPoint}} {{block.className}} {{loop ? block.className.index ~ '-' ~ loop.index : ''}} lazy-fade {{block.id}}" {{dataAttributeEntryPoint}} data-assetkey="product-info-v3">
+
 	{% for field in postTypeFields %}
 		{% if block %}
 			{% set block = block|merge({'anchor' : '','className' : '', 'id': block.id ~ '-' ~ loop.index }) %}

package/components/block-site-logo-container-v3/site-logo-container-v3.twig

@@ -4,19 +4,16 @@
 {% set dataAttributeEntryPoint = include('entry-points/entry-point-data-attribute.twig', { fields, block }, with_context = false) %}
 {% set styleEntryPoint = include('entry-points/entry-point-style.twig', { fields, block, displaytype, is_preview }, with_context = false) %}
 {% set previewEntryPoint = include('entry-points/entry-point-preview-info.twig', { fields, block, displaytype, is_preview }, with_context = false) %}
-
 {% set logoMaxWidthDesktop = '--site-logo-max-width-desktop: ' ~ fields.site_logo_max_width_desktop ~ ';'%}
 {% set logoMaxWidthPortrait = '--site-logo-max-width-portrait: ' ~ fields.site_logo_max_width_portrait ~ ';' %}
 {% set logoMaxWidthMobile = '--site-logo-max-width-mobile: ' ~ fields.site_logo_max_width_mobile ~ ';' %}
-
 {% set sectionStyles =  styleEntryPoint ~ logoMaxWidthDesktop ~ logoMaxWidthPortrait ~ logoMaxWidthMobile %}
 <style>
 	.{{blockClassName}}.{{block.id}}{
 		{{sectionStyles}}
 	}
 </style>
-<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{block.className}} {{block.className ~ '-' ~ loop}} {{classNameEntryPoint}} {{block.id}} lazy-fade" data-jsload="false" {{dataAttributeEntryPoint}} data-blockid="{{block.id}}" data-assetkey="{{blockClassName}}">
-
+<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{block.className}} {{loop ? block.className.index ~ '-' ~ loop.index : ''}} {{classNameEntryPoint}} {{block.id}} lazy-fade" data-jsload="false" {{dataAttributeEntryPoint}} data-blockid="{{block.id}}" data-assetkey="{{blockClassName}}">
 	<a class="{{blockClassName}}__site-logo-link" href="/{{ market_slug ? market_slug ~ '/' : '' }}" aria-label="site-logo-link">
 		{% if fields.logo_type|ru == 'site-header' %}
 			{% set siteLogo = get_image(options.header_logo_desktop) %}

package/components/block-standard-content-v3/standard-content-v3.twig

@@ -15,7 +15,7 @@
 		{{sectionStyles}}
 	}
 </style>
-<section {{ block.anchor ? 'id=' ~ block.anchor : '' }} data-assetkey="{{blockClassName}}" class="{{blockClassName}} {{block.className}} {{block.className ~ '-' ~ loop}} {{classNameEntryPoint}} {{ block.id }} lazy-fade" {{dataAttributeEntryPoint}}>
+<section {{ block.anchor ? 'id=' ~ block.anchor : '' }} data-assetkey="{{blockClassName}}" class="{{blockClassName}} {{block.className}} {{loop ? block.className.index ~ '-' ~ loop.index : ''}} {{classNameEntryPoint}} {{ block.id }} lazy-fade" {{dataAttributeEntryPoint}}>
 
 
 	{{htmlEntryPoint}}

package/components/block-sub-group-container-v3/sub-group-container-v3.twig

@@ -4,9 +4,7 @@
 {% set dataAttributeEntryPoint = include('entry-points/entry-point-data-attribute.twig', { fields, block }, with_context = false) %}
 {% set styleEntryPoint = include('entry-points/entry-point-style.twig', { fields, block, displaytype, is_preview }, with_context = false) %}
 {% set previewEntryPoint = include('entry-points/entry-point-preview-info.twig', { fields: fields, block: block, displaytype: displaytype, is_preview: is_preview }, with_context = false) %}
-
 {% set imageSizes = '(min-width: 1440px) ' ~ (100 / fields.grid_layout.grid_columns_desktop|default(1))|round ~ 'vw, (min-width: 1024px) ' ~ (100 / fields.grid_layout.grid_columns_desktop|default(1))|round ~ 'vw, (min-width: 768px) ' ~ (100 / fields.grid_layout.grid_columns_portrait|default(1))|round ~ 'vw, (min-width: 300px) ' ~(100 / fields.grid_layout.grid_columns_mobile|default(1))|round ~ 'vw, 100vw' %}
-
 {% set layoutType = fields.layout_type|ru|default('grid') %}
 {% set layoutStyles = '' %}
 {% if layoutType == 'flex' %}
@@ -18,7 +16,6 @@
 {% endif %}
 {% set blockElementType = fields.block_element_type|default('section')|ru %}
 
-
 {% set sectionStyles =  styleEntryPoint ~ backgroundColour ~ gridLayoutContainer ~ containerOverflowType ~ blockPosition %}
 
 {{previewEntryPoint}}
@@ -27,19 +24,15 @@
 		{{sectionStyles}}
 	}
 </style>
-<{{blockElementType}} {{block.anchor ? "id=" ~ block.anchor : ''}} class="sub-group-container-v3 {{blockClassName}} {{block.className}} {{block.className ~ '-' ~ loop}} {{classNameEntryPoint}} {{block.id}} lazy-fade" {{dataAttributeEntryPoint}} data-jsload="false" data-assetkey="sub-group-container-v3">
-
-
+<{{blockElementType}} {{block.anchor ? "id=" ~ block.anchor : ''}} class="sub-group-container-v3 {{blockClassName}} {{block.className}} {{loop ? block.className.index ~ '-' ~ loop.index : ''}} {{classNameEntryPoint}} {{block.id}} lazy-fade" {{dataAttributeEntryPoint}} data-jsload="false" data-assetkey="sub-group-container-v3">
 	{% if block %}
 		{% set block = block|merge({'videoIdPrefix' : block.id }) %}
 	{% endif %}
-
 	<style>
 		.{{blockClassName}}__grid-container.{{block.id}}{
 			{{layoutStyles}}
 		}
 	</style>
-
 	<div class="{{blockClassName}}__grid-container {{layoutClass}} {{block.id}}">
 		{% for section in fields.sections %}
 			{% set gridLayoutElement = include('components/grid-layout-element-v3.twig', { fields: section, block: block }, with_context = false) %}
@@ -52,7 +45,7 @@
 				}
 			</style>
 			<div class="{{blockClassName}}__block-container {{block.id}}">
-				{{ include('blocks/' ~ (section.acf_fc_layout|replace({ '_': '-' })) ~ '.twig', { fields: section, options, block, is_preview, current, nav_menus, site, cta_styles, market_settings, languages, imageSizes }, with_context = false, ignore_missing = true) }}
+				{{ include('blocks/' ~ (section.acf_fc_layout|replace({ '_': '-' })) ~ '.twig', { fields: section, options, block, is_preview, current, nav_menus, site, cta_styles, market_settings, languages, imageSizes, loop: loop.index }, with_context = false, ignore_missing = true) }}
 			</div>
 		{% endfor %}
 	</div>

package/components/component-modal-popup-content/modal-popup-content.twig

@@ -6,7 +6,8 @@
 				{{item.raw_html}}
 			{% endif %}
 			{% if item.acf_fc_layout == 'form_selection' %}
-				{{function('do_shortcode', '[cdbform id=' ~ item.form.ID ~ ']')}}
+			{% set data = {'title' : item.title, 'form' : item.form.ID} %}
+				{{ include('blocks/modal-form-v3.twig', { fields: data, options, block, is_preview, current_post, nav_menus, site, market_settings, market_slug, cta_styles, languages, imageSizes}, with_context = false, ignore_missing = true) }}
 			{% endif %}
 		</div>
 	</div>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@total_onion/onion-library",
-    "version": "1.0.174",
+    "version": "1.0.176",
     "description": "Component library",
     "main": "index.js",
     "scripts": {