@total_onion/onion-library 3.2.0 → 3.2.2

package/components/block-lottie-content-v3/group_687197027216d.json

@@ -0,0 +1,177 @@
+{
+    "key": "group_687197027216d",
+    "title": "Block: Lottie Content v3",
+    "fields": [
+        {
+            "key": "field_6871972729d8f",
+            "label": "Lottie",
+            "name": "",
+            "aria-label": "",
+            "type": "tab",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "placement": "top",
+            "endpoint": 0,
+            "no_preference": 0,
+            "selected": 0
+        },
+        {
+            "key": "field_6871970429d8e",
+            "label": "lottie fields",
+            "name": "lottie_fields",
+            "aria-label": "",
+            "type": "clone",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "clone": [
+                "group_65cb36d6cb82e"
+            ],
+            "display": "seamless",
+            "layout": "block",
+            "prefix_label": 0,
+            "prefix_name": 0,
+            "acfe_seamless_style": 0,
+            "acfe_clone_modal": 0,
+            "acfe_clone_modal_close": 0,
+            "acfe_clone_modal_button": "",
+            "acfe_clone_modal_size": "large"
+        },
+        {
+            "key": "field_6871972e29d90",
+            "label": "Block Padding",
+            "name": "",
+            "aria-label": "",
+            "type": "tab",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "placement": "top",
+            "endpoint": 0,
+            "no_preference": 0,
+            "selected": 0
+        },
+        {
+            "key": "field_6871973729d91",
+            "label": "block padding fields",
+            "name": "block_padding_fields",
+            "aria-label": "",
+            "type": "clone",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "clone": [
+                "group_638f4148bc10b"
+            ],
+            "display": "seamless",
+            "layout": "block",
+            "prefix_label": 0,
+            "prefix_name": 0,
+            "acfe_seamless_style": 0,
+            "acfe_clone_modal": 0,
+            "acfe_clone_modal_close": 0,
+            "acfe_clone_modal_button": "",
+            "acfe_clone_modal_size": "large"
+        },
+        {
+            "key": "field_6871975329d92",
+            "label": "Block Settings",
+            "name": "",
+            "aria-label": "",
+            "type": "tab",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "placement": "top",
+            "endpoint": 0,
+            "no_preference": 0,
+            "selected": 0
+        },
+        {
+            "key": "field_6871975c29d93",
+            "label": "block settings fields",
+            "name": "block_settings_fields",
+            "aria-label": "",
+            "type": "clone",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "clone": [
+                "group_638f4148bc10b"
+            ],
+            "display": "seamless",
+            "layout": "block",
+            "prefix_label": 0,
+            "prefix_name": 0,
+            "acfe_seamless_style": 0,
+            "acfe_clone_modal": 0,
+            "acfe_clone_modal_close": 0,
+            "acfe_clone_modal_button": "",
+            "acfe_clone_modal_size": "large"
+        }
+    ],
+    "location": [
+        [
+            {
+                "param": "block",
+                "operator": "==",
+                "value": "all"
+            }
+        ]
+    ],
+    "menu_order": 0,
+    "position": "normal",
+    "style": "default",
+    "label_placement": "left",
+    "instruction_placement": "label",
+    "hide_on_screen": "",
+    "active": false,
+    "description": "",
+    "show_in_rest": 0,
+    "display_title": "",
+    "acfe_autosync": [
+        "json"
+    ],
+    "acfe_form": 0,
+    "acfe_display_title": "",
+    "acfe_meta": "",
+    "acfe_note": "",
+    "modified": 1762794581
+}

package/components/block-lottie-content-v3/lottie-content-v3.js

@@ -0,0 +1,25 @@
+import lottie from 'lottie-web';
+export default function lottiecontentv3Js(block) {
+	const lottieElement = block.querySelector('.lottie-animations');
+	if (!lottieElement) {
+		return;
+	}
+	const lottieData = lottieElement.dataset;
+	const filePath = lottieData.lottiefile;
+	if (!filePath) {
+		return;
+	}
+	const loop = parseInt(lottieData.loop) ? true : false;
+	const autoplay = parseInt(lottieData.autoplay) ? true : false;
+	lottie.loadAnimation({
+		container: lottieElement,
+		renderer: 'svg',
+		loop: loop,
+		autoplay: autoplay,
+		path: filePath,
+		rendererSettings: {
+			preserveAspectRatio: 'xMidYMid slice',
+			progressiveLoad: true
+		}
+	});
+}

package/components/block-lottie-content-v3/lottie-content-v3.scss

@@ -0,0 +1,2 @@
+.lottie-content-v3 {
+}

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

@@ -0,0 +1,15 @@
+{% set blockClassName = "lottie-content-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-v3', { 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-v3.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-assetkey="{{blockClassName}}">
+
+
+	{{htmlEntryPoint}}
+</section>

package/components/block-market-selector-v3/group_68752075dd831.json

@@ -0,0 +1,129 @@
+{
+    "key": "group_68752075dd831",
+    "title": "Block: Market Selector v3",
+    "fields": [
+        {
+            "key": "field_68762d4f6632f",
+            "label": "Block Settings",
+            "name": "",
+            "aria-label": "",
+            "type": "tab",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "placement": "top",
+            "endpoint": 0,
+            "no_preference": 0,
+            "selected": 0
+        },
+        {
+            "key": "field_6875207709d8d",
+            "label": "Selector Type",
+            "name": "selector_type",
+            "aria-label": "",
+            "type": "radio",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "choices": {
+                "__pop-up": "Pop Up",
+                "__inline": "Inline"
+            },
+            "default_value": "__pop-up : Pop Up",
+            "return_format": "value",
+            "allow_null": 0,
+            "other_choice": 0,
+            "layout": "vertical",
+            "save_other_choice": 0
+        },
+        {
+            "key": "field_6877b0a54f3eb",
+            "label": "Heading Text",
+            "name": "heading_text",
+            "aria-label": "",
+            "type": "text",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 2,
+            "default_value": "",
+            "maxlength": "",
+            "placeholder": "",
+            "prepend": "",
+            "append": ""
+        },
+        {
+            "key": "field_687910f6aa776",
+            "label": "Logo",
+            "name": "logo",
+            "aria-label": "",
+            "type": "image",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "uploader": "",
+            "return_format": "id",
+            "library": "all",
+            "upload_folder": "",
+            "acfe_thumbnail": 0,
+            "min_width": "",
+            "min_height": "",
+            "min_size": "",
+            "max_width": "",
+            "max_height": "",
+            "max_size": "",
+            "mime_types": "",
+            "preview_size": "medium"
+        }
+    ],
+    "location": [
+        [
+            {
+                "param": "block",
+                "operator": "==",
+                "value": "all"
+            }
+        ]
+    ],
+    "menu_order": 0,
+    "position": "normal",
+    "style": "default",
+    "label_placement": "left",
+    "instruction_placement": "label",
+    "hide_on_screen": "",
+    "active": false,
+    "description": "",
+    "show_in_rest": 0,
+    "display_title": "",
+    "acfe_autosync": [
+        "json"
+    ],
+    "acfe_form": 0,
+    "acfe_display_title": "",
+    "acfe_meta": "",
+    "acfe_note": "",
+    "modified": 1762794584
+}

package/components/block-market-selector-v3/market-selector-v3.js

@@ -0,0 +1,7 @@
+export default function marketselectorv3Js(options = {}) {
+	try {
+		const {block} = options;
+	} catch (error) {
+		console.error(error);
+	}
+}

package/components/block-market-selector-v3/market-selector-v3.scss

@@ -0,0 +1,120 @@
+@use '../fields-core-mixins-v3/core-mixins-v3';
+@use '../fields-core-functions-v3/core-functions-v3';
+@use '../../breakpoints';
+
+.market-selector-v3 {
+	pointer-events: all;
+	display: grid;
+	background: #f6f6f0;
+	width: 100%;
+	height: 100%;
+	max-width: core-functions-v3.fluidSize(345);
+	max-height: core-functions-v3.fluidSize(500);
+	@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+		max-width: core-functions-v3.fluidSize(725);
+		max-height: core-functions-v3.fluidSize(528);
+	}
+	@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+		max-width: core-functions-v3.fluidSize(1102);
+		max-height: core-functions-v3.fluidSize(528);
+	}
+	grid-template:
+		'header'
+		'markets'
+		'markets'
+		'logo' / 1fr;
+
+	&__modal-header-container {
+		grid-area: header;
+		display: grid;
+		grid-auto-flow: column;
+		align-items: center;
+		height: min-content;
+		padding: core-functions-v3.fluidSize(15, 'mobile')
+			core-functions-v3.fluidSize(20, 'mobile');
+		@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+			padding: core-functions-v3.fluidSize(30, 'portrait');
+		}
+		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+			padding: core-functions-v3.fluidSize(30, 'desktop');
+		}
+		border-bottom: solid 1px #00968f;
+	}
+	&__modal-heading {
+		color: #00968f;
+		font-weight: 700;
+		text-transform: uppercase;
+		font-size: core-functions-v3.fluidSize(20, 'mobile');
+		line-height: core-functions-v3.fluidSize(20, 'mobile');
+		@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+			font-size: core-functions-v3.fluidSize(20, 'portrait');
+			line-height: core-functions-v3.fluidSize(20, 'portrait');
+		}
+		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+			font-size: core-functions-v3.fluidSize(24, 'desktop');
+			line-height: core-functions-v3.fluidSize(24, 'desktop');
+		}
+	}
+	&__modal-markets-container {
+		grid-area: markets;
+		display: grid;
+		grid-template-columns: repeat(2, 1fr);
+		grid-auto-rows: auto;
+		text-transform: uppercase;
+		place-items: flex-start;
+		gap: core-functions-v3.fluidSize(10);
+		padding: 0px core-functions-v3.fluidSize(15);
+		@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+			padding: 0px core-functions-v3.fluidSize(35);
+			gap: core-functions-v3.fluidSize(10);
+		}
+		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+			padding: 0px core-functions-v3.fluidSize(100);
+			gap: core-functions-v3.fluidSize(20);
+			grid-auto-flow: column;
+			grid-template-columns: repeat(3, 1fr);
+			grid-template-rows: repeat(4, 1fr);
+		}
+	}
+	a.market-selector-v3__market-link,
+	a.market-selector-v3__market-link--active {
+		text-decoration: none;
+		color: #2d2926;
+		font-weight: 400;
+		line-height: core-functions-v3.fluidSize(20, 'mobile');
+		font-size: core-functions-v3.fluidSize(12, 'mobile');
+		border-bottom: 2px solid transparent;
+		padding-bottom: core-functions-v3.fluidSize(2, 'static');
+		transition: border 0.3s ease-out;
+		@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+			font-size: core-functions-v3.fluidSize(16, 'portrait');
+			line-height: core-functions-v3.fluidSize(16, 'portrait');
+		}
+		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+			font-size: core-functions-v3.fluidSize(20, 'desktop');
+			line-height: core-functions-v3.fluidSize(16, 'desktop');
+		}
+
+		&:hover {
+			border-bottom: 2px solid #00968f;
+		}
+	}
+	a.market-selector-v3__market-link--active {
+		color: #00968f;
+		font-weight: 700;
+	}
+	&__modal-logo-container {
+		grid-area: logo;
+		display: flex;
+		justify-content: flex-end;
+		align-items: flex-end;
+	}
+	&__modal-logo {
+		img {
+			width: auto;
+		}
+	}
+	&__icon {
+		display: flex;
+	}
+}

package/components/block-market-selector-v3/market-selector-v3.twig

@@ -0,0 +1,40 @@
+{% set blockClassName = "market-selector-v3" %}
+
+{% set classNameEntryPoint = include('entry-points/entry-point-classes.twig', { fields, block }, with_context = false) %}
+{% set htmlEntryPoint = include('entry-points/entry-point-html-v3.twig', { fields, block, blockClassName, options, cta_styles, environment,  is_preview, nav_menus, imageSizes }, with_context = false) %}
+{% set dataAttributeEntryPoint = include('entry-points/entry-point-data-attribute.twig', { fields, block }, with_context = false) %}
+{% set styleEntryPoint = include('entry-points/entry-point-style-v3.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 sectionStyles =  styleEntryPoint %}
+{% set selectorType = fields.selector_type|ru %}
+
+{{previewEntryPoint}}
+<style>
+	.{{blockClassName}}.{{block.id}}{
+		{{sectionStyles}}
+	}
+</style>
+
+<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{block.className}} {{classNameEntryPoint}} lazy-fade" {{dataAttributeEntryPoint}} data-loadjs="false" data-blockid="{{block.id}}" data-assetkey="{{blockClassName}}">
+
+	<div class="{{blockClassName}}__modal-header-container">
+		<span class="{{blockClassName}}__modal-heading">{{fields.heading_text}}</span>
+	</div>
+	<div class="{{blockClassName}}__modal-markets-container">
+		{% for language in languages %}
+			<a class="{{blockClassName}}__market-link {{language['active'] ? "market-selector-v3__market-link--active" : ""}}" href=" {{ language[ 'url' ] }} " data-lang=" {{ language[ 'language_code' ] }} " aria-label=" view this page on the {{language[ 'native_name' ]}} market">{{ language[ 'native_name' ] }}</a>
+		{% endfor %}
+	</div>
+	<div class="{{blockClassName}}__modal-logo-container">
+		{% set logo = fields.logo %}
+		{% set logoImage = get_image(logo) %}
+		{% set isSVG = logoImage.post_mime_type == 'image/svg+xml' %}
+		<span class="{{blockClassName}}__modal-logo">
+			{{ isSVG ? get_raw_svg(logoImage.id) : '<img class="" src="' ~ logoImage.src ~ '">'}}
+		</span>
+	</div>
+
+	{{htmlEntryPoint}}
+</section>

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

@@ -0,0 +1,59 @@
+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');
+		if (!submit) {
+			console.error('could not find submit button');
+			return;
+		}
+		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.scss

@@ -0,0 +1,6 @@
+@use '../fields-core-mixins-v3/core-mixins-v3';
+@use '../fields-core-functions-v3/core-functions-v3';
+@use '../../breakpoints';
+
+.modal-form-v3 {
+}

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

@@ -0,0 +1,30 @@
+{% 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-v3.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 %}
+					<div class="{{ blockClassName }}__title-container">
+						{{ fields.title }}
+					</div>
+				{% endif %}
+				<!-- inline-form -->
+				{{function('do_shortcode', '[cdbform id=' ~ fields.form ~ ']')}}
+				<!-- end-inline-form -->
+			</div>
+		</div>
+	</div>
+
+	{{htmlEntryPoint}}
+</section>