@total_onion/onion-library 2.0.198 → 2.0.200

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

@@ -1,2 +1,4 @@
-.accent-image-v3 {
+@layer base-styles {
+	.accent-image-v3 {
+	}
 }

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

@@ -13,7 +13,122 @@
 </style>
 <section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} cmpl-core-group-container-styles {{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) }}
+		{% for image in fields.accent_image_v3.accent_images %}
+			{% set accentImage = get_image(image.accent_image_v3_image) %}
+			{% set rotationDesktop = image.desktop_positioning.image_rotation_desktop|default(0) %}
+			{% set rotationMobile = image.mobile_positioning.image_rotation_mobile|default(rotationDesktop) %}
+			{% set opacity = image.accent_image_opacity|default(1) %}
+			{% set borderRadius = image.accent_image_border_radius|default('0px') %}
+			{% set zIndex = image.accent_z_index %}
+			{% set mobileSettings = image.mobile_positioning %}
+			{% set oneHundredWidth = image.set_width_and_height_to_100 %}
+			{% set imageFitStyle = image.image_fit_style|ru %}
+			{% if image.use_desktop_positioning_for_mobile %}
+				{% set mobileSettings = image.desktop_positioning %}
+			{% endif %}
+			{% set mobilePositioning = mobileSettings.horizontal_offset ~ '% ' ~ mobileSettings.vertical_offset ~ '%' %}
+			{% set desktopPositioning = image.desktop_positioning.horizontal_offset ~ '% ' ~ image.desktop_positioning.vertical_offset ~ '%' %}
+			{% set desktopWidth = 'calc(' ~ image.desktop_accent_image_width ~ '/ var(--desktop-design-reference) * var(--screen-width-desktop))' %}
+			{% set mobileWidth = 'calc(' ~ image.mobile_accent_image_width ~ '/ var(--mobile-design-reference) * var(--screen-width-mobile))' %}
+			{% if oneHundredWidth %}
+				{% set desktopWidth = '100%' %}
+				{% set mobileWidth = '100%' %}
+			{% endif %}
+			{% set accentImageContainerElement = 'div' %}
+			{% set accentImageCtaType = image.accent_image_cta_type|ru %}
+			{% if image.enable_accent_image_cta %}
+				{% if image.accent_image_cta_type|ru == 'link' %}
+					{% set accentImageContainerElement = 'a' %}
+				{% endif %}
+			{% endif %}
+			{% set suffix = block.id ~ '-' ~ loop.index %}
+			{% if image.animations.enable_animations %}
+				{{include('components/animations-style-v3.twig', { fields: image, suffix }, with_context = false)}}
+			{% endif %}
+			<style>
+				.loaded .{{block.id}}-{{loop.index}}.{{blockClassName}}__accent-image {
+					{{include('components/animations-v3.twig', { fields: image, block: block, blockClassName: blockClassName, suffix }, with_context = false)}}
+					animation: var(--animation-name) var(--animation-duration) var(--animation-delay) var(--animation-easing) var(--animation-repeat) var(--animation-fill-mode) var(--animation-direction);
+				}
+				.{{block.id}}-{{loop.index}}.{{blockClassName}}__accent-image {
+					z-index: {{zIndex}}
+					;
+					grid-area: main;
+					pointer-events: {{image.enable_accent_image_cta ? 'all' : 'none'}};
+					position: absolute;
+					place-self: {{mobileSettings.vertical_snap|ru}}
+					{{mobileSettings.horizontal_snap|ru}}
+					;
+					width: {{mobileWidth}}
+					;
+					height: {{mobileWidth}}
+					;
+					translate: {{mobilePositioning}}
+					;
+				}
+				.{{block.id}}-{{loop.index}}.{{blockClassName}}__accent-image .{{blockClassName}}__image-element.element {
+					width: 100%;
+					height: 100%;
+					display: flex;
+					object-fit: {{imageFitStyle}}
+					;
+					border-radius: {{borderRadius}}
+					;
+					border: 0 solid transparent;
+					opacity: {{opacity}}
+					;
+					rotate: {{rotationMobile ~ 'deg'}};
+				}
+				.{{blockClassName}}__image-number {
+						z-index: 99;
+						position: absolute;
+						font-size: 40px;
+						left: 50%;
+						top: 50%;
+						transform: translate(-50%, -50%);
+						color: white;
+						text-shadow: 1px 1px 1px blue;
+				}
+				@media screen and (min-width: 768px) {
+					.{{block.id}}-{{loop.index}}.{{blockClassName}}__accent-image {
+						place-self: {{image.desktop_positioning.vertical_snap|ru}}
+						{{image.desktop_positioning.horizontal_snap|ru}};
+						width: {{desktopWidth}};
+						height: {{desktopWidth}};
+						translate: {{desktopPositioning}};
+					}
+					.{{block.id}}-{{loop.index}}.{{blockClassName}}__accent-image .{{blockClassName}}__image-element.element {
+						width: 100%;
+						height: 100%;
+						display: flex;
+						object-fit: {{imageFitStyle}};
+						border-radius: {{borderRadius}};
+						border: 0 solid transparent;
+						opacity: {{opacity}};
+						rotate: {{rotationDesktop ~ 'deg'}};
+					}
+				}
+			</style>
+			<{{accentImageContainerElement}}
+				{{accentImageCtaType == 'link' ? 'href="' ~ image.accent_image_link.url ~ '" ' ~ 'target="' ~ image.accent_image_link.target ~ '" ' : ''}}
+				class="{{block.id}}-{{ loop.index }} {{blockClassName}}__accent-image">
+				{% if image.inline_raw_svg %}
+					{{fn('get_raw_svg', accentImage.id, blockClassName ~ '__image-element element')}}
+				{% else %}
+				<img
+					class="{{block.id}}-{{ loop.index }} {{blockClassName}}__image-element element"
+					src="{{ accentImage.src }}"
+					width="{{ accentImage.width }}"
+					height="{{ accentImage.height }}"
+					alt="{{ accentImage.alt }}"
+					loading="lazy"
+				/>
+				{% endif %}
+				
+				{% if fields.accent_image_v3.show_image_number and is_preview %}
+					<div class="{{blockClassName}}__image-number">{{ loop.index }}</div>
+				{% endif %}
+			</{{accentImageContainerElement}}>
+		{% endfor %}
 	{% endif %}
-	{{htmlEntryPoint}}
 </section>

package/components/block-accordion-v3/accordion-v3.scss

@@ -2,192 +2,196 @@
 @use '../fields-core-functions-v3/core-functions-v3';
 @use '../component-content-box-settings-v3/content-box-settings-v3';
 @use '../../breakpoints';
-
-.accordion-v3 {
-	@include content-box-settings-v3.contentBoxSettingsV3();
-	width: 100%;
-	pointer-events: all;
-	display: flex;
-	flex-direction: column;
-	gap: core-functions-v3.fluidSize(var(--title-gap), 'mobile');
-	@include core-mixins-v3.device(breakpoints.$tabPortrait) {
-		gap: core-functions-v3.fluidSize(var(--title-gap), 'portrait');
-	}
-	@include core-mixins-v3.device(breakpoints.$tabLandscape) {
-		gap: core-functions-v3.fluidSize(var(--title-gap), 'desktop');
-	}
-
-	&-wrapper {
-		text-align: initial;
-		background: var(--background-color);
-	}
-
-	&-question-wrapper {
-		cursor: pointer;
-		place-items: flex-start;
-		button {
-			width: 100%;
-			align-items: center;
-			cursor: pointer;
-			background: unset;
-			padding: unset;
-			border: unset;
-		}
-	}
-
-	&__content-container {
-		padding: core-functions-v3.fluidSize(10, 'static')
-			core-functions-v3.fluidSize(50, 'static')
-			core-functions-v3.fluidSize(10, 'static') 0;
-	}
-
-	&-image-wrapper {
-		grid-area: icon;
-		position: absolute;
-		right: core-functions-v3.fluidSize(2, 'static');
-		width: core-functions-v3.fluidSize(var(--image-icon-size), 'mobile');
-
+@layer base-styles {
+	.accordion-v3 {
+		@include content-box-settings-v3.contentBoxSettingsV3();
+		width: 100%;
+		pointer-events: all;
+		display: flex;
+		flex-direction: column;
+		gap: core-functions-v3.fluidSize(var(--title-gap), 'mobile');
 		@include core-mixins-v3.device(breakpoints.$tabPortrait) {
-			width: core-functions-v3.fluidSize(
-				var(--image-icon-size),
-				'portrait'
-			);
+			gap: core-functions-v3.fluidSize(var(--title-gap), 'portrait');
 		}
-
 		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
-			width: core-functions-v3.fluidSize(
-				var(--image-icon-size),
-				'desktop'
-			);
+			gap: core-functions-v3.fluidSize(var(--title-gap), 'desktop');
 		}
 
-		img {
-			width: 100%;
+		&-wrapper {
+			text-align: initial;
+			background: var(--background-color);
 		}
-	}
 
-	&-question {
-		text-align: left;
-		display: grid;
-		grid-template:
-			'question icon'
-			'answer ...' / auto min-content;
-		&--icon-left {
-			grid-template:
-				'icon question'
-				'... answer' / min-content auto;
-			column-gap: core-functions-v3.fluidSize(20, 'static');
+		&-question-wrapper {
+			cursor: pointer;
+			place-items: flex-start;
+			button {
+				width: 100%;
+				align-items: center;
+				cursor: pointer;
+				background: unset;
+				padding: unset;
+				border: unset;
+			}
 		}
-	}
 
-	&-answer-wrapper {
-		overflow: hidden;
-		height: 0;
-		grid-area: answer;
+		&__content-container {
+			padding: core-functions-v3.fluidSize(10, 'static')
+				core-functions-v3.fluidSize(50, 'static')
+				core-functions-v3.fluidSize(10, 'static') 0;
+		}
 
-		p {
-			padding-inline: core-functions-v3.fluidSize(
-				var(--text-padding-horizontal),
+		&-image-wrapper {
+			grid-area: icon;
+			position: absolute;
+			right: core-functions-v3.fluidSize(2, 'static');
+			width: core-functions-v3.fluidSize(
+				var(--image-icon-size),
 				'mobile'
 			);
 
 			@include core-mixins-v3.device(breakpoints.$tabPortrait) {
-				padding-inline: core-functions-v3.fluidSize(
-					var(--text-padding-horizontal),
+				width: core-functions-v3.fluidSize(
+					var(--image-icon-size),
 					'portrait'
 				);
 			}
 
 			@include core-mixins-v3.device(breakpoints.$tabLandscape) {
-				padding-inline: core-functions-v3.fluidSize(
-					var(--text-padding-horizontal),
+				width: core-functions-v3.fluidSize(
+					var(--image-icon-size),
 					'desktop'
 				);
 			}
-		}
-	}
-
-	&-answer {
-		font-size: core-functions-v3.fontSize(22, 'static');
-		grid-column: 1/-1;
-		padding-bottom: core-functions-v3.fluidSize(20, 'mobile');
-		padding-top: core-functions-v3.fluidSize(20, 'mobile');
 
-		@include core-mixins-v3.device(breakpoints.$tabPortrait) {
-			padding-bottom: core-functions-v3.fluidSize(20, 'portrait');
-			padding-top: core-functions-v3.fluidSize(20, 'portrait');
+			img {
+				width: 100%;
+			}
 		}
 
-		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
-			padding-bottom: core-functions-v3.fluidSize(20, 'desktop');
-			padding-top: core-functions-v3.fluidSize(20, 'desktop');
+		&-question {
+			text-align: left;
+			display: grid;
+			grid-template:
+				'question icon'
+				'answer ...' / auto min-content;
+			&--icon-left {
+				grid-template:
+					'icon question'
+					'... answer' / min-content auto;
+				column-gap: core-functions-v3.fluidSize(20, 'static');
+			}
 		}
 
-		&:last-child {
-			padding-bottom: 0;
-		}
-	}
+		&-answer-wrapper {
+			overflow: hidden;
+			height: 0;
+			grid-area: answer;
 
-	&-icon {
-		grid-area: icon;
-		background: var(--icon-background-color);
-		display: flex;
-		align-items: center;
-		height: core-functions-v3.fluidSize(50, 'static');
-		width: core-functions-v3.fluidSize(50, 'static');
-
-		&.active {
-			.accordion-v3-animation {
-				&:before {
-					transform: rotate(90deg);
+			p {
+				padding-inline: core-functions-v3.fluidSize(
+					var(--text-padding-horizontal),
+					'mobile'
+				);
+
+				@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+					padding-inline: core-functions-v3.fluidSize(
+						var(--text-padding-horizontal),
+						'portrait'
+					);
 				}
 
-				&:after {
-					transform: rotate(180deg);
+				@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+					padding-inline: core-functions-v3.fluidSize(
+						var(--text-padding-horizontal),
+						'desktop'
+					);
 				}
 			}
 		}
-	}
 
-	.image-icon-active {
-		transform: rotate(var(--image-icon-rotation-deg));
-		transition: transform 0.3s ease;
-	}
+		&-answer {
+			font-size: core-functions-v3.fontSize(22, 'static');
+			grid-column: 1/-1;
+			padding-bottom: core-functions-v3.fluidSize(20, 'mobile');
+			padding-top: core-functions-v3.fluidSize(20, 'mobile');
 
-	:not(.image-icon-active, .lottie-animations *) {
-		transform: rotate(0deg);
-		transition: transform 0.3s ease;
-	}
+			@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+				padding-bottom: core-functions-v3.fluidSize(20, 'portrait');
+				padding-top: core-functions-v3.fluidSize(20, 'portrait');
+			}
 
-	&-animation {
-		height: core-functions-v3.fluidSize(20, 'static');
-		margin: auto;
-		position: relative;
-		transition: transform 0.3s ease;
-		width: core-functions-v3.fluidSize(20, 'static');
-
-		&:before,
-		&:after {
-			background-color: red;
-			content: '';
-			position: absolute;
-			transition: transform 0.25s ease-out;
+			@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+				padding-bottom: core-functions-v3.fluidSize(20, 'desktop');
+				padding-top: core-functions-v3.fluidSize(20, 'desktop');
+			}
+
+			&:last-child {
+				padding-bottom: 0;
+			}
+		}
+
+		&-icon {
+			grid-area: icon;
+			background: var(--icon-background-color);
+			display: flex;
+			align-items: center;
+			height: core-functions-v3.fluidSize(50, 'static');
+			width: core-functions-v3.fluidSize(50, 'static');
+
+			&.active {
+				.accordion-v3-animation {
+					&:before {
+						transform: rotate(90deg);
+					}
+
+					&:after {
+						transform: rotate(180deg);
+					}
+				}
+			}
 		}
 
-		&:before {
-			height: 100%;
-			left: 50%;
-			margin-left: -1px;
-			top: 0;
-			width: 2px;
+		.image-icon-active {
+			transform: rotate(var(--image-icon-rotation-deg));
+			transition: transform 0.3s ease;
 		}
 
-		&:after {
-			height: 2px;
-			left: 0;
-			margin-top: -1px;
-			top: 50%;
-			width: 100%;
+		:not(.image-icon-active, .lottie-animations *) {
+			transform: rotate(0deg);
+			transition: transform 0.3s ease;
+		}
+
+		&-animation {
+			height: core-functions-v3.fluidSize(20, 'static');
+			margin: auto;
+			position: relative;
+			transition: transform 0.3s ease;
+			width: core-functions-v3.fluidSize(20, 'static');
+
+			&:before,
+			&:after {
+				background-color: red;
+				content: '';
+				position: absolute;
+				transition: transform 0.25s ease-out;
+			}
+
+			&:before {
+				height: 100%;
+				left: 50%;
+				margin-left: -1px;
+				top: 0;
+				width: 2px;
+			}
+
+			&:after {
+				height: 2px;
+				left: 0;
+				margin-top: -1px;
+				top: 50%;
+				width: 100%;
+			}
 		}
 	}
 }

package/components/block-back-to-top-button-v3/back-to-top-button-v3.scss

@@ -1,67 +1,68 @@
 @use '../fields-core-mixins-v3/core-mixins-v3';
 @use '../fields-core-functions-v3/core-functions-v3';
 @use '../../breakpoints';
+@layer base-styles {
+	.back-to-top-button {
+		position: relative;
+		width: 100%;
+		z-index: 50;
+		overflow: unset;
 
-.back-to-top-button {
-	position: relative;
-	width: 100%;
-	z-index: 50;
-	overflow: unset;
+		&__arrow {
+			--arrow-colour: black;
+			position: absolute;
+			border-style: solid;
+			border-color: var(--arrow-colour);
+			border-width: 0 2px 2px 0;
+			display: inline-block;
+			transform: rotate(-135deg);
+			height: 20%;
+			width: 20%;
+		}
 
-	&__arrow {
-		--arrow-colour: black;
-		position: absolute;
-		border-style: solid;
-		border-color: var(--arrow-colour);
-		border-width: 0 2px 2px 0;
-		display: inline-block;
-		transform: rotate(-135deg);
-		height: 20%;
-		width: 20%;
-	}
+		&__button {
+			--bg-colour: white;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			position: fixed;
+			cursor: pointer;
+			height: core-functions-v3.fluidSize(50, 'static');
+			width: core-functions-v3.fluidSize(50, 'static');
+			border: none;
+			border-radius: 50px;
+			padding: core-functions-v3.fluidSize(18, 'static');
+			background-color: var(--bg-colour);
+			right: core-functions-v3.fluidSize(10, 'mobile');
+			border-radius: var(--button-border-radius);
 
-	&__button {
-		--bg-colour: white;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		position: fixed;
-		cursor: pointer;
-		height: core-functions-v3.fluidSize(50, 'static');
-		width: core-functions-v3.fluidSize(50, 'static');
-		border: none;
-		border-radius: 50px;
-		padding: core-functions-v3.fluidSize(18, 'static');
-		background-color: var(--bg-colour);
-		right: core-functions-v3.fluidSize(10, 'mobile');
-		border-radius: var(--button-border-radius);
+			@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+				right: core-functions-v3.fluidSize(30, 'portrait');
+			}
 
-		@include core-mixins-v3.device(breakpoints.$tabPortrait) {
-			right: core-functions-v3.fluidSize(30, 'portrait');
-		}
+			@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+				right: core-functions-v3.fluidSize(60, 'desktop');
+			}
 
-		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
-			right: core-functions-v3.fluidSize(60, 'desktop');
-		}
+			&--fixed {
+				position: fixed;
+				bottom: core-functions-v3.fluidSize(60, 'static');
+			}
 
-		&--fixed {
-			position: fixed;
-			bottom: core-functions-v3.fluidSize(60, 'static');
-		}
+			&--absolute {
+				position: absolute;
+				translate: 0 -50%;
+			}
 
-		&--absolute {
-			position: absolute;
-			translate: 0 -50%;
+			.wp-admin & {
+				position: absolute;
+				translate: 0 0;
+				bottom: 0;
+			}
 		}
 
-		.wp-admin & {
-			position: absolute;
-			translate: 0 0;
-			bottom: 0;
+		&__image {
+			width: core-functions-v3.fluidSize(var(--image-size), 'static');
 		}
 	}
-
-	&__image {
-		width: core-functions-v3.fluidSize(var(--image-size), 'static');
-	}
 }

package/components/block-back-to-top-button-v3/back-to-top-button-v3.twig

@@ -32,6 +32,9 @@
 				<span class="{{blockClassName}}__arrow" style="--arrow-colour: {{arrowColour}}"></span>
 			{% endif %}
 		</button>
-		{{htmlEntryPoint}}
+		{% if fields.animations.enable_animations %}
+			{{ include('components/animations-style-v3.twig', { fields, block, blockClassName }, with_context = false) }}
+		{% endif %}
+
 	</section>
 {% endif %}

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

@@ -2,29 +2,31 @@
 @use '../fields-core-functions-v3/core-functions-v3';
 @use '../../breakpoints';
 
-.block-interactions-v3 {
-	&__block-close-button {
-		cursor: pointer;
-		border: unset;
-		background: unset;
-	}
-	&__popup-trigger {
-		appearance: none;
-		border: unset;
-		background-color: unset;
-		display: flex;
-		cursor: pointer;
-	}
-	svg {
-		width: core-functions-v3.fluidSize(30, 'mobile');
-		height: core-functions-v3.fluidSize(30, 'mobile');
-		@include core-mixins-v3.device(breakpoints.$tabPortrait) {
-			width: core-functions-v3.fluidSize(30, 'portrait');
-			height: core-functions-v3.fluidSize(30, 'portrait');
+@layer base-styles {
+	.block-interactions-v3 {
+		&__block-close-button {
+			cursor: pointer;
+			border: unset;
+			background: unset;
+		}
+		&__popup-trigger {
+			appearance: none;
+			border: unset;
+			background-color: unset;
+			display: flex;
+			cursor: pointer;
 		}
-		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
-			width: core-functions-v3.fluidSize(30, 'desktop');
-			height: core-functions-v3.fluidSize(30, 'desktop');
+		svg {
+			width: core-functions-v3.fluidSize(30, 'mobile');
+			height: core-functions-v3.fluidSize(30, 'mobile');
+			@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+				width: core-functions-v3.fluidSize(30, 'portrait');
+				height: core-functions-v3.fluidSize(30, 'portrait');
+			}
+			@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+				width: core-functions-v3.fluidSize(30, 'desktop');
+				height: core-functions-v3.fluidSize(30, 'desktop');
+			}
 		}
 	}
 }

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

@@ -1,7 +1,7 @@
 import {getSwiperAssetsV2} from '@total_onion/onion-utils/onion-utils.mjs';
 import {Navigation, Pagination, Autoplay, EffectFade} from 'swiper/modules';
 // import Swiper and modules styles
-// import 'swiper/css/bundle';
+import 'swiper/css/bundle';
 // import 'swiper/css/navigation';
 // import 'swiper/css/pagination';