@total_onion/onion-library 3.0.25 → 3.0.27

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

@@ -1,9 +1,9 @@
 {% set blockClassName = "accent-image-v3" %}
-{% set classNameEntryPoint = include('entry-points/entry-point-classes.twig', { fields: fields, block: block }, with_context = false) %}
+{% set classNameEntryPoint = include('entry-points/entry-point-classes-v3.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 dataAttributeEntryPoint = include('entry-points/entry-point-data-attribute-v3.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 previewEntryPoint = include('entry-points/entry-point-preview-info-v3.twig', { fields, block, displaytype, is_preview }, with_context = false) %}
 {% set sectionStyles =  styleEntryPoint %}
 {{previewEntryPoint}}
 <style>
@@ -45,7 +45,7 @@
 			{% if image.animations.enable_animations %}
 				{{include('components/animations-style-v3.twig', { fields: image, suffix }, with_context = false)}}
 			{% endif %}
-			<style>
+			<style accentimagestyle>
 				.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);
@@ -109,6 +109,9 @@
 					}
 				}
 			</style>
+
+			<!--pattern-replace-var:accentImageSrc={{accentImage.src}}-->
+
 			<{{accentImageContainerElement}}
 				{{accentImageCtaType == 'link' ? 'href="' ~ image.accent_image_link.url ~ '" ' ~ 'target="' ~ image.accent_image_link.target ~ '" ' : ''}}
 				class="{{block.id}}-{{ loop.index }} {{blockClassName}}__accent-image">
@@ -131,4 +134,4 @@
 			</{{accentImageContainerElement}}>
 		{% endfor %}
 	{% endif %}
-</section>
+</section>

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

@@ -1,9 +1,9 @@
 {% set blockClassName = "block-interactions-v3" %}
-{% set classNameEntryPoint = include('entry-points/entry-point-classes.twig', { fields: fields, block: block }, with_context = false) %}
+{% set classNameEntryPoint = include('entry-points/entry-point-classes-v3.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 dataAttributeEntryPoint = include('entry-points/entry-point-data-attribute-v3.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 previewEntryPoint = include('entry-points/entry-point-preview-info-v3.twig', { fields, block, displaytype, is_preview }, with_context = false) %}
 {% set sectionStyles =  styleEntryPoint %}
 {{previewEntryPoint}}
 <style>
@@ -11,7 +11,7 @@
 		{{sectionStyles}}
 	}
 </style>
-<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}}">
+<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{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 %}
@@ -19,15 +19,13 @@
 	{% set animationDuration = fields.animation_duration|ru %}
 
 	{% if blockInteractionsEnabled %}
-		{% for item in fields.modal_popup_triggers %}
-			{% if item.cta_style|ru matches '/^\\d+$/' %}
-				{% set ctaData = attribute(cta_styles['theme_cta_styles'], item.cta_style|ru - 1) %}
-				{% set enableCtaAnimation = ctaData.cta_settings.enable_cta_animation %}
-				{% set enableCtaIcon = ctaData.cta_settings.include_cta_icon %}
-				{% set ctaAnimationStyle = ctaData.cta_settings.cta_animation_style %}
+		{% for item in fields.interaction_triggers %}
+			{% if item.acf_fc_layout == 'video_trigger' %}
+				<button class="{{item.button_class}}" data-triggerid="{{ block.videoIdPrefix ~ item.video_trigger_id }}">
+					<span class="cmpl-cta-span">{{ item.button_text }}</span>
+				</button>
 			{% endif %}
-			
-			{% for item in fields.modal_popup_triggers %}
+			{% if item.acf_fc_layout == 'modal_popup_trigger' %}
 				{% if item.cta_style|ru matches '/^\\d+$/' %}
 					{% set ctaData = attribute(cta_styles['theme_cta_styles'], item.cta_style|ru - 1) %}
 					{% set enableCtaAnimation = ctaData.cta_settings.enable_cta_animation %}
@@ -39,11 +37,10 @@
 						{% if item.modal_popup_trigger_text %}
 							<span class="{{blockClassName}}__popup-trigger-text">{{ item.modal_popup_trigger_text }}</span>
 						{% endif %}
-						<span class="{{blockClassName}}__popup-trigger-icon">
-						{# <img src="{{ get_image(options.theme_cta_icons[item.trigger_icon_type|ru]).src }}"> #}
-						<img src="{{ options.cta_icons[item.trigger_icon_type|ru].src }}" alt="modal trigger icon">
-						
-						
+						<span
+							class="{{blockClassName}}__popup-trigger-icon">
+							{# <img src="{{ get_image(options.theme_cta_icons[item.trigger_icon_type|ru]).src }}"> #}
+							<img src="{{ options.cta_icons[item.trigger_icon_type|ru].src }}" alt="modal trigger icon">
 						</span>
 					</button>
 				{% else %}
@@ -51,22 +48,8 @@
 						<span class="cmpl-cta-span">{{ item.modal_popup_trigger_text }}</span>
 					</button>
 				{% endif %}
-			{% endfor %}
-		{% endfor %}
-
-		{% if enableInteractionsButton %}
-			{% if (interactionsButtonType|ru == 'close-block') %}
-				{% set closeButtonIcon = get_image(fields.upload_close_icon) %}
-				{% set closeButtonCookie = fields.enable_closed_cookie %}
-				<button class="block-interactions-v3__block-close-button" data-animationname="{{animationName}}" data-animationduration="{{animationDuration}}" data-store-cookie="{{closeButtonCookie ? 'true' : 'false' }}">
-					{% set iconType = options.theme_cta_icons.cta_close_icon %}
-					{% set iconImage = get_image(iconType) %}
-					{% set isSVG = iconImage.post_mime_type == 'image/svg+xml' %}
-					{{ isSVG ? get_raw_svg(iconImage.id) : '<img class="" src="' ~ iconImage.src ~ '" alt="close button">'}}
-				</button>
 			{% endif %}
-		{% endif %}
-
+		{% endfor %}
 	{% endif %}
 	{{htmlEntryPoint}}
-</section>
+</section>

package/components/fields-core-typography-v3/core-typography-v3.scss

@@ -215,12 +215,12 @@
 		.sh-l-fs {
 			&-mobile {
 				@media ( width <= #{breakpoints.$tabPortrait}) {
-					@include core-typography-mixins-v3.sh-l();
+					@include core-typography-mixins-v3.sh-l-size();
 				}
 			}
 			&-portrait {
 				@media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
-					@include core-typography-mixins-v3.sh-l();
+					@include core-typography-mixins-v3.sh-l-size();
 				}
 			}
 			&-desktop {

package/components/webc-layout-container/index.html

@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<link rel="stylesheet" href="../../public/publicBundleBase.css" />
+		<link rel="stylesheet" href="./ptfg-9000.css" />
+		<link rel="stylesheet" href="../webc-toggle-trigger/toggle-trigger.css" />
+		<link rel="stylesheet" href="../webc-text-input-trigger/text-input-trigger.css" />
+		<link rel="stylesheet" href="../webc-loadmore-trigger/loadmore-trigger.css" />
+		<link
+			rel="stylesheet"
+			href="../webc-post-filter-module/post-filter-module.css"
+		/>
+		<link
+			rel="stylesheet"
+			href="../webc-post-carousel-display-module/post-carousel-display-module.css"
+		/>
+		<title>PTFG</title>
+	</head>
+	<body>
+		<ptfg-9000
+			class="ptfg-9000 ptfg-9000__main-container cmpl-block-padding"
+			data-assetkey="ptfg-9000"
+		>
+			<post-filter-module
+				id="filter-module"
+				data-dataobjectid=""
+				data-dev="true"
+				data-devdatalocation="local"
+				class="post-filter-module__filter"
+				data-postsperpagedesktop="8"
+				data-postsperpagemobile="6"
+				data-loadmoretriggerclass="loadmore-trigger"
+				data-textinputclass="text-input-trigger"
+			>	
+				<toggle-trigger
+					id="toggle-trigger"
+					data-toggletext="Toggle Text"
+					data-toggletarget="#filter-module"
+					data-toggleclass="active"
+					class="toggle-trigger"
+				>
+			</post-filter-module>
+			<text-input-trigger id="text-input-trigger" class="text-input-trigger"></text-input-trigger>
+			<toggle-trigger id="toggle-trigger" data-toggletext="Filter" data-toggletarget="#filter-module" data-toggleclass="active" class="toggle-trigger"></toggle-trigger>
+			<post-carousel-display-module
+	id="display-module"
+	data-posts=""
+	class="post-carousel-display-module cmpl-block-padding cmpl-block-settings"
+>
+			</post-carousel-display-module>
+			<loadmore-trigger id="loadmore-trigger" data-buttontext="Load More" class="loadmore-trigger"></loadmore-trigger>
+		</ptfg-9000>
+
+		<script type="module">
+			//Run Component JS
+			import blockfilterjs from "../webc-post-filter-module/post-filter-module.js";
+			blockfilterjs();
+
+			import toggletriggerjs from "../webc-toggle-trigger/toggle-trigger.js";
+			toggletriggerjs();
+
+			import textInputTrigger from "../webc-text-input-trigger/text-input-trigger.js";
+			textInputTrigger();
+
+			import loadmoreTrigger from "../webc-loadmore-trigger/loadmore-trigger.js";
+			loadmoreTrigger();
+
+			import blockcarouseljs from "../webc-post-carousel-display-module/post-carousel-display-module.js";
+			blockcarouseljs();
+
+			import blockptfgjs from "./ptfg-9000.js";
+			blockptfgjs();
+		</script>
+	</body>
+</html>
+
+
+<!--
+<script type="module">
+	// Post filter module
+	const postfiltermoduletemplate = await fetch(
+		"../webc-post-filter-module/post-filter-module.html"
+	);
+	const postfiltermodulehtml = await postfiltermoduletemplate.text();
+	document
+		.querySelector("ptfg-9000")
+		.insertAdjacentHTML("beforeend", postfiltermodulehtml);
+		// toggle trigger
+	const toggletrigger = await fetch(
+		"../webc-toggle-trigger/toggle-trigger.html"
+	);
+	const toggletriggerhtml = await toggletrigger.text();
+	document
+		.querySelector("ptfg-9000")
+		.insertAdjacentHTML("beforeend", toggletriggerhtml);
+
+	// post grid display
+	const postgriddisplay = await fetch(
+		"../webc-post-grid-display-module/post-grid-display-module.html"
+	);
+	const postgriddisplayhtml = await postgriddisplay.text();
+	document
+		.querySelector("ptfg-9000")
+		.insertAdjacentHTML("beforeend", postgriddisplayhtml);
+
+</script> -->

package/components/webc-layout-container/layout-container.css

@@ -0,0 +1,9 @@
+layout-container {
+	display: grid;
+	grid-template:
+		'filter ..'
+		'textinput toggleclass'
+		'display display'
+		'loadmore loadmore' / 1fr 1fr;
+	background-color: black;
+}

package/components/webc-layout-container/layout-container.html

@@ -0,0 +1,5 @@
+<layout-container class="layout-container">
+	<div class="layout-container__inner-container">
+		<slot></slot>
+	</div>
+</layout-container>

package/components/webc-layout-container/layout-container.js

@@ -0,0 +1,22 @@
+export default function layoutContainerJs(options = {}) {
+	try {
+		if (!customElements.get('layout-container')) {
+			customElements.define(
+				'layout-container',
+				class extends HTMLElement {
+					constructor() {
+						super();
+						this.data = this.dataset;
+					}
+					connectedCallback() {
+						console.log('Layout container element added to page.');
+						this.classList.add('loaded');
+					}
+					attributeChangedCallback(name, oldValue, newValue) {}
+				}
+			);
+		}
+	} catch (error) {
+		console.error(error);
+	}
+}

package/components/webc-responsive-image/index.html

@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<link rel="stylesheet" href="../../public/publicBundleBase.css" />
+		<link rel="stylesheet" href="./ptfg-9000.css" />
+		<link rel="stylesheet" href="../webc-toggle-trigger/toggle-trigger.css" />
+		<link rel="stylesheet" href="../webc-text-input-trigger/text-input-trigger.css" />
+		<link rel="stylesheet" href="../webc-loadmore-trigger/loadmore-trigger.css" />
+		<link
+			rel="stylesheet"
+			href="../webc-post-filter-module/post-filter-module.css"
+		/>
+		<link
+			rel="stylesheet"
+			href="../webc-post-carousel-display-module/post-carousel-display-module.css"
+		/>
+		<title>PTFG</title>
+	</head>
+	<body>
+		<ptfg-9000
+			class="ptfg-9000 ptfg-9000__main-container cmpl-block-padding"
+			data-assetkey="ptfg-9000"
+		>
+			<post-filter-module
+				id="filter-module"
+				data-dataobjectid=""
+				data-dev="true"
+				data-devdatalocation="local"
+				class="post-filter-module__filter"
+				data-postsperpagedesktop="8"
+				data-postsperpagemobile="6"
+				data-loadmoretriggerclass="loadmore-trigger"
+				data-textinputclass="text-input-trigger"
+			>	
+				<toggle-trigger
+					id="toggle-trigger"
+					data-toggletext="Toggle Text"
+					data-toggletarget="#filter-module"
+					data-toggleclass="active"
+					class="toggle-trigger"
+				>
+			</post-filter-module>
+			<text-input-trigger id="text-input-trigger" class="text-input-trigger"></text-input-trigger>
+			<toggle-trigger id="toggle-trigger" data-toggletext="Filter" data-toggletarget="#filter-module" data-toggleclass="active" class="toggle-trigger"></toggle-trigger>
+			<post-carousel-display-module
+	id="display-module"
+	data-posts=""
+	class="post-carousel-display-module cmpl-block-padding cmpl-block-settings"
+>
+			</post-carousel-display-module>
+			<loadmore-trigger id="loadmore-trigger" data-buttontext="Load More" class="loadmore-trigger"></loadmore-trigger>
+		</ptfg-9000>
+
+		<script type="module">
+			//Run Component JS
+			import blockfilterjs from "../webc-post-filter-module/post-filter-module.js";
+			blockfilterjs();
+
+			import toggletriggerjs from "../webc-toggle-trigger/toggle-trigger.js";
+			toggletriggerjs();
+
+			import textInputTrigger from "../webc-text-input-trigger/text-input-trigger.js";
+			textInputTrigger();
+
+			import loadmoreTrigger from "../webc-loadmore-trigger/loadmore-trigger.js";
+			loadmoreTrigger();
+
+			import blockcarouseljs from "../webc-post-carousel-display-module/post-carousel-display-module.js";
+			blockcarouseljs();
+
+			import blockptfgjs from "./ptfg-9000.js";
+			blockptfgjs();
+		</script>
+	</body>
+</html>
+
+
+<!--
+<script type="module">
+	// Post filter module
+	const postfiltermoduletemplate = await fetch(
+		"../webc-post-filter-module/post-filter-module.html"
+	);
+	const postfiltermodulehtml = await postfiltermoduletemplate.text();
+	document
+		.querySelector("ptfg-9000")
+		.insertAdjacentHTML("beforeend", postfiltermodulehtml);
+		// toggle trigger
+	const toggletrigger = await fetch(
+		"../webc-toggle-trigger/toggle-trigger.html"
+	);
+	const toggletriggerhtml = await toggletrigger.text();
+	document
+		.querySelector("ptfg-9000")
+		.insertAdjacentHTML("beforeend", toggletriggerhtml);
+
+	// post grid display
+	const postgriddisplay = await fetch(
+		"../webc-post-grid-display-module/post-grid-display-module.html"
+	);
+	const postgriddisplayhtml = await postgriddisplay.text();
+	document
+		.querySelector("ptfg-9000")
+		.insertAdjacentHTML("beforeend", postgriddisplayhtml);
+
+</script> -->

package/components/webc-responsive-image/layout-container.css

@@ -0,0 +1,9 @@
+layout-container {
+	display: grid;
+	grid-template:
+		'filter ..'
+		'textinput toggleclass'
+		'display display'
+		'loadmore loadmore' / 1fr 1fr;
+	background-color: black;
+}

package/components/webc-responsive-image/layout-container.js

@@ -0,0 +1,22 @@
+export default function layoutContainerJs(options = {}) {
+	try {
+		if (!customElements.get('layout-container')) {
+			customElements.define(
+				'layout-container',
+				class extends HTMLElement {
+					constructor() {
+						super();
+						this.data = this.dataset;
+					}
+					connectedCallback() {
+						console.log('Layout container element added to page.');
+						this.classList.add('loaded');
+					}
+					attributeChangedCallback(name, oldValue, newValue) {}
+				}
+			);
+		}
+	} catch (error) {
+		console.error(error);
+	}
+}

package/components/webc-responsive-image/responsive-image.html

@@ -0,0 +1,15 @@
+<responsive-image class="responsive-image-v3" data-assetkey="responsive-image" data-enableparallax="{{ parallaxEnabled }}">
+
+	<picture class="responsive-image-v3__picture {{picture_id|default(block.id)}}" data-pattern-suffix="{{suffix}}" data-pattern-dynamic="{{renderDynamic}}" data-assetkey="responsive-image" data-enableparallax="{{ parallaxEnabled }}">
+
+			<source data-type="srcSetDesktop" data-pattern-suffix="{{suffix}}" media="(min-width: 1024px)" class="responsive-image-v3__source responsive-image-v3--desktop" width="{{ desktopImage.width }}" height="{{ desktopImage.height }}" srcset="{{desktopSrcset}}"/>
+
+
+			<source data-type="srcSetTablet" data-pattern-suffix="{{suffix}}" media="(min-width: 768px)" width="{{ tabletImage.width }}" height="{{ tabletImage.height }}" class="responsive-image-v3__source responsive-image-v3--tablet" srcset="{{ tabletSrcset }}"/>
+
+			<source data-type="srcSetMobile" data-pattern-suffix="{{suffix}}" class="responsive-image-v3__source responsive-image-v3__source--mobile" width="{{ mobileImage.width }}" height="{{ mobileImage.height }}" srcset="{{ mobileSrcset }}"/>
+
+		<img data-type="srcGeneral" data-elementname="main-image" data-pattern-suffix="{{suffix}}" data-pattern-dynamic="{{renderDynamic}}" {{ enableEagerLoading }} sizes="{{ sizes }}" class="responsive-image-v3__image" src="{{mainImageSrc}}" alt="{{ desktopImage.alt }}" {{ parallaxDepth }} {{ parallaxOffsetY }}/>
+	</picture>
+
+</responsive-image>

package/components/webc-slot-test/slot-test.html

@@ -0,0 +1,25 @@
+<my-paragraph>
+    <span slot="my-text">Let's have some different text!</span>
+    <slot name="my-text">My default text</slot>
+
+</my-paragraph>
+
+<script>
+    class MyParagraph extends HTMLElement {
+        constructor() {
+            super();
+            const shadow = this.attachShadow({ mode: 'open' });
+            shadow.innerHTML = `
+                <style>
+                    p {
+                        color: blue;
+                        font-size: 18px;
+                    }
+                </style>
+                <p><slot name="my-text">My default text</slot></p>
+            `;
+        }
+    }
+
+    customElements.define('my-paragraph', MyParagraph);
+</script>

package/new-block-templates/template-block-json.js

@@ -11,6 +11,7 @@ module.exports = function (newBlockName, projectName) {
 	"title": "${blockTitle}",
 	"category": "project-blocks",
 	"description": "${blockTitle} block",
+	"icon": "green-brick",
 	"keywords": ["content"],
 	"version": "1.0.0",
 	"textdomain": "${namespace}",

package/package.json

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