@total_onion/onion-library 2.0.250 → 2.0.254

package/components/block-single-responsive-image-v3/single-responsive-image-v3.twig

@@ -11,12 +11,9 @@
 		{{sectionStyles}}
 	}
 </style>
-<section
-	{{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{fields.section_class}} {{classNameEntryPoint}} lazy-fade {{block.id}}" data-jsload="false" {{dataAttributeEntryPoint}} data-blockid="{{block.id}}" data-assetkey="{{blockClassName}}">
+<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{fields.section_class}} {{classNameEntryPoint}} lazy-fade {{block.id}}" data-jsload="false" {{dataAttributeEntryPoint}} data-blockid="{{block.id}}" data-assetkey="{{blockClassName}}">
 
-	<!--pattern-replace-start:component/responsive-image -->
 	{{ include('components/responsive-image-v3.twig', { fields, block, blockClassName }, with_context = false) }}
-	<!--pattern-replace-end:component/responsive-image -->
 
 	{% if fields.animations.enable_animations %}
 		{{ include('components/animations-style-v3.twig', { fields, block, blockClassName }, with_context = false) }}

package/components/component-buy-now-button-v3/buy-now-buttons-v3.twig

@@ -0,0 +1,69 @@
+{% set product = post %}
+{% set buyNowOptionSelect = product.meta('buy_now_option_select') %}
+{% if buyNowOptionSelect|ru == 'link' %}
+	{% set productDirectLink = product.meta('direct_link') %}
+	{% set directLinkTarget = '_blank' %}
+	<a href="{{productDirectLink.url}}" class="{{blockClassName|default('default-class')}}__cta cmpl-cta-style-{{cta.cta_style|ru}}" target="{{directLinkTarget}}" title="{{productDirectLink.title}}">{{productDirectLink.title}}</a>
+{% endif %}
+{% if buyNowOptionSelect|ru == 'ctb' %}
+	{% if cta.cta_buy_now_text is not empty %}
+		{% set productCtbPimid = product.meta('click_to_buy_pim_id') %}
+		<a href="#" class="{{blockClassName|default('default-class')}}__cta cmpl-cta-style-{{cta.cta_style|ru}}" data-ctbuy data-ctbuy-variant="{{productCtbPimid}}" data-ctbuy-country="" data-ctbuy-lang="" data-ctbuy-default-view="" data-ctbuy-customquerystring="" data-ctbuy-direct-link="" title="{{cta.cta_buy_now_text}}">{{cta.cta_buy_now_text}}</a>
+	{% endif %}
+{% endif %}
+{% if buyNowOptionSelect|ru == "ctb-pricespider" %}
+	{% set enablePricespider = attribute(market_settings['e-shop_settings'], 'enable_pricespider') %}
+	{% set productCtbPriceSpicerSku = product.meta('pricespider_sku_id') %}
+	{% if enablePricespider and productCtbPriceSpicerSku is not empty %}
+		<a class="ps-widget {{blockClassName|default('default-class')}}__cta cmpl-cta-style-{{cta.cta_style|ru}}" ps-sku="{{productCtbPriceSpicerSku}}"></a>
+	{% endif %}
+{% endif %}
+{% if buyNowOptionSelect|ru == 'wtb' %}
+	{% if cta.cta_buy_now_text is not empty %}
+		{% set productPimDebrainId = product.meta('debrain_pim_id') %}
+		<a href="#" class="dloc-link {{blockClassName|default('default-class')}}__cta cmpl-cta-style-{{cta.cta_style|ru}}" data-action="where-to-buy" data-filter="{{productPimDebrainId}}">{{cta.cta_buy_now_text}}</a>
+	{% endif %}
+{% endif %}
+{% if buyNowOptionSelect|ru == 'wtb-v2' %}
+	{% set productDebrainSkuId = product.meta('debrain_sku_id') %}
+	{% if productDebrainSkuId is not empty %}
+		<wtb-button sku={{productDebrainSkuId}} class="{{blockClassName|default('default-class')}}__cta cmpl-cta-style-{{cta.cta_style|ru}}">{{cta.cta_buy_now_text}}</wtb-button>
+	{% endif %}
+{% endif %}
+{% if buyNowOptionSelect|ru == 'mikmak' %}
+	{% set productEANs = product.meta('mikmak_ean_ids') %}
+	{% set relatedProducts = product.meta('related_products') %}
+	{% set drawer_widget_id = attribute(market_settings['e-shop_settings'], 'mikmak_ctb_drawer_widget_id') %}
+
+	{% set relatedProductEANs = '' %}
+	{% for post in relatedProducts %}
+		{% set relatedProduct = get_post(post) %}
+		{% set relatedProductEANs = relatedProductEANs ~ ',' ~ relatedProduct.meta('mikmak_ean_ids')|trim(',') %}
+	{% endfor %}
+	{% set relatedProductEANs = relatedProductEANs|trim(',') %}
+
+	{% if productEANs is not empty and drawer_widget_id is not empty %}
+		{% set totalProductEANs = productEANs ~ (relatedProductEANs is not empty ? ',' ~ relatedProductEANs : '') %}
+		<a href="#" data-mm-wtbid="{{drawer_widget_id}}" data-mm-ids="{{totalProductEANs}}" class="{{blockClassName|default('default-class')}}__cta cmpl-cta-style-{{cta.cta_style|ru}} mikmak-buy-now">{{cta.cta_buy_now_text}}</a>
+	{% endif %}
+{% endif %}
+{% if buyNowOptionSelect|ru == 'reservebar' %}
+	{% if cta.cta_buy_now_text is not empty %}
+		{% set reserveBarLiquidId = product.meta('reserve_bar_liquid_grouping_id') %}
+		<a href="#" class="{{blockClassName|default('default-class')}}__cta cmpl-cta-style-{{cta.cta_style|ru}} reservebar-popup-trigger" reservebar-liquid-id="{{reserveBarLiquidId}}">{{cta.cta_buy_now_text}}</a>
+	{% endif %}
+{% endif %}
+{% if buyNowOptionSelect|ru == 'shopify' %}
+	{% if product.shopify_id is not empty %}
+
+
+		<div class="shopify-wrapper shopify-integration has-shop shop-shopify" data-extraclasses="{{style_classes}}" data-pim="{{product.shopify_id}}" data-label="{{product.meta.buy_now_button_text|default("Add to cart")}}" data-cask-name="{{product.cask_name}}" data-vol="{{product.volume}}"></div>
+	{% endif %}
+	{% if product.shopify_id_engraved is not empty %}
+
+		<div class="shopify-wrapper shopify-integration has-shop shop-shopify engraved" data-extraclasses="{{style_classes}}" data-pim="{{product.shopify_id_engraved}}" data-label="{{product.buy_now_button_text_alt|default(" buy engraved")}}" data-cask-name="{{product.cask_name}}" data-vol="{{product.volume}}"></div>
+
+
+	{% endif %}
+
+{% endif %}

package/components/component-responsive-image-v3/responsive-image-v3.twig

@@ -1,17 +1,18 @@
 {% if fields.enable_image|default(fields.image_enabled) %}
-	{% set renderDynamic = fields.child_patterns.render_dynamic|default(0) %}
-	{% set suffix = fields.child_patterns.suffix %}
-
-	{% set desktopType = fields.desktop_image_aspect_ratio|ru|default('original') %}
-	{% set tabletType = fields.tablet_image_aspect_ratio|ru|default('original') %}
-	{% set mobileType = fields.mobile_image_aspect_ratio|ru|default('original') %}
 
 	{% set desktopImage = get_image(fields.desktop_image) %}
 	{% set tabletImage = get_image(fields.tablet_image)|default(desktopImage) %}
 	{% set mobileImage = get_image(fields.mobile_image) %}
 
+	{% set renderDynamic = fields.child_patterns.render_dynamic|default(0) %}
+	{% set suffix = fields.child_patterns.suffix %}
+
+	{% set selectedAspectRatioDesktop = fields.desktop_custom_aspect_ratio|default(desktopImage.width ~ '/' ~ desktopImage.height)|replace({'/' : 'x', ':' : 'x'}) %}
+	{% set selectedAspectRatioTablet = fields.tablet_custom_aspect_ratio|default(desktopImage.width ~ '/' ~ desktopImage.height)|replace({'/' : 'x', ':' : 'x'}) %}
+	{% set selectedAspectRatioMobile = fields.mobile_custom_aspect_ratio|default(desktopImage.width ~ '/' ~ desktopImage.height)|replace({'/' : 'x', ':' : 'x'}) %}
+
 	{% set imageSizes = fields.custom_image_sizes %}
-	{% set sizes = imageSizes|default('(min-width: 1440px) 100vw, (min-width: 1024px) 1024px, (min-width: 768px) 768px, (min-width: 500px) 100vw, 250px') %}
+	{% set sizes = imageSizes|default('auto, (min-width: 1440px) 100vw, (min-width: 1024px) 1024px, (min-width: 768px) 768px, (min-width: 500px) 100vw, 250px') %}
 
 	{% set imageFitStyle = '--image-fit-style:' ~ (fields.image_fit_style|ru|default('cover')) ~ ';' %}
 	{% set imageObjectPositionAlign = '--image-object-position-align:' ~ (fields.image_object_position_align|ru) ~ ';' %}
@@ -23,9 +24,6 @@
 	{% set imagePosition = '--image-position:' ~ fields.image_position|ru ~ ';' %}
 	{% set imageGridArea = '--image-grid-area:' ~ fields.image_grid_area|ru|default('main') ~ ';' %}
 	{% set imageBorderRadius = '--image-border-radius:' ~ fields.image_border_radius ~ ';' %}
-	{% set imageAspectRatioDesktop = '--image-aspect-ratio-desktop:' ~ fields.image_aspect_ratio_desktop ~ ';' %}
-	{% set imageAspectRatioPortrait = '--image-aspect-ratio-portrait:' ~ fields.image_aspect_ratio_portrait ~ ';' %}
-	{% set imageAspectRatioMobile = '--image-aspect-ratio-mobile:' ~ fields.image_aspect_ratio_mobile ~ ';' %}
 	{% set imageOffsetVert = '--image-offset-vert:' ~ fields.image_offset_vertical ~ '%;' %}
 	{% set imageOffsetHoriz = '--image-offset-horiz:' ~ fields.image_offset_horizontal ~ '%;' %}
 	{% set enableImageBorder = fields.enable_image_border %}
@@ -41,98 +39,33 @@
 	{% set pictureStylesString = imageFitStyle ~ imageObjectPositionAlign ~ imageWidth ~ imageWidthMobile ~ imageWidthPortrait ~ imageOpacity ~ imageAspectRatioDesktop ~ imageAspectRatioPortrait ~ imageAspectRatioMobile ~ imageOffsetVert ~ imageOffsetHoriz ~ imageBorderRadius ~ imagePosition ~ imageGridArea ~ imageMinHeightMobile ~ imageMinHeightDesktop ~ subtractHeaderHeight ~ imageZIndex %}
 	{% set enableEagerLoading = fields.enable_eager_image_loading ? 'loading="eager" fetchpriority="high"' : 'loading="lazy"' %}
 
-	{% set selectedAspectRatioDesktop = fields.desktop_image_aspect_ratio|ru %}
-	{% set selectedAspectRatioTablet = fields.tablet_image_aspect_ratio|ru %}
-	{% set selectedAspectRatioMobile = fields.mobile_image_aspect_ratio|ru %}
-
-	{% if selectedAspectRatioDesktop == 'original' %}
-		{% set isSVG = desktopImage.post_mime_type == 'image/svg+xml' %}
-		{% set selectedAspectRatioDesktop = null %}
-		{% set mainImageSrc = isSVG ? desktopImage.src : gt_image_mainsrc(desktopImage) %}
-		{% set desktopSrcset = isSVG ? desktopImage.src : gt_image_srcset(desktopImage) %}
-	{% elseif selectedAspectRatioDesktop == 'custom_aspect_ratio' %}
-		{% set isSVG = desktopImage.post_mime_type == 'image/svg+xml' %}
-		{% set customAspectRatio = fields.desktop_custom_aspect_ratio %}
-		{% set mainImageSrc = isSVG ? desktopImage.src : gt_image_mainsrc(desktopImage, {"aspect_ratio": customAspectRatio|replace({'/' : 'x', ':' : 'x'})}) %}
-		{% set desktopSrcset = isSVG ? desktopImage.src : gt_image_srcset(desktopImage, {"aspect_ratio": customAspectRatio|replace({'/' : 'x', ':' : 'x'})}) %}
-	{% else %}
-		{% set isSVG = desktopImage.post_mime_type == 'image/svg+xml' %}
-		{% set mainImageSrc = isSVG ? desktopImage.src : gt_image_mainsrc(desktopImage, {"aspect_ratio" : selectedAspectRatioDesktop}) %}
-		{% set desktopSrcset = isSVG ? desktopImage.src : gt_image_srcset(desktopImage, {"aspect_ratio" : selectedAspectRatioDesktop}) %}
-	{% endif %}
-
-	{% if selectedAspectRatioTablet == 'original' %}
-		{% set isSVG = tabletImage.post_mime_type == 'image/svg+xml' %}
-		{% set selectedAspectRatioTablet = null %}
-		{% set tabletSrcset =  isSVG ? tabletImage.src : gt_image_srcset(tabletImage)%}
-	{% elseif selectedAspectRatioTablet == 'custom_aspect_ratio' %}
-		{% set isSVG = tabletImage.post_mime_type == 'image/svg+xml' %}
-		{% set customAspectRatio = fields.tablet_custom_aspect_ratio %}
-		{% set mainImageSrc = isSVG ? tabletImage.src : gt_image_mainsrc(tabletImage, {"aspect_ratio": customAspectRatio|replace({'/' : 'x', ':' : 'x'})}) %}
-		{% set tabletSrcset = isSVG ? tabletImage.src : gt_image_srcset(tabletImage, {"aspect_ratio": customAspectRatio|replace({'/' : 'x', ':' : 'x'})}) %}
-	{% else %}
-		{% set isSVG = tabletImage.post_mime_type == 'image/svg+xml' %}
-		{% set tabletSrcset =  isSVG ? tabletImage.src : gt_image_srcset(tabletImage, {"aspect_ratio" : selectedAspectRatioTablet})%}
-	{% endif %}
-
-	{% if selectedAspectRatioMobile == 'original' %}
-		{% set isSVG = mobileImage.post_mime_type == 'image/svg+xml' %}
-		{% set selectedAspectRatioMobile = null %}
-		{% set mobileSrcset =  isSVG ? mobileImage.src : gt_image_srcset(mobileImage) %}
-	{% elseif selectedAspectRatioMobile == 'custom_aspect_ratio' %}
-		{% set isSVG = mobileImage.post_mime_type == 'image/svg+xml' %}
-		{% set customAspectRatio = fields.mobile_custom_aspect_ratio %}
-		{% set mainImageSrc = isSVG ? mobileImage.src : gt_image_mainsrc(mobileImage, {"aspect_ratio": customAspectRatio|replace({'/' : 'x', ':' : 'x'})}) %}
-		{% set mobileSrcset = isSVG ? mobileImage.src : gt_image_srcset(mobileImage, {"aspect_ratio": customAspectRatio|replace({'/' : 'x', ':' : 'x'})}) %}
-	{% else %}
-		{% set isSVG = mobileImage.post_mime_type == 'image/svg+xml' %}
-		{% set mobileSrcset =  isSVG ? mobileImage.src : gt_image_srcset(mobileImage, {"aspect_ratio" : selectedAspectRatioMobile})%}
-	{% endif %}
 	{% set parallaxEnabled = fields.parallax_enabled %}
 	{% if parallaxEnabled %}
 		{% set parallaxDepth = 'data-depth=' ~ fields.parallax_depth ~ " " %}
 		{% set parallaxOffsetY = 'data-y-offset=' ~ fields.parallax_offset_y ~ " " %}
 	{% endif %}
+	{% set picture_id = block.id %}
 
 	<style>
-		.{{blockClassName|default('cbl-image')}}__picture.{{block.id}}{
+		.single-responsive-image-v3__picture.{{picture_id|default(block.id)}}{
 			{{pictureStylesString}}
 			{{imageBorderString}}
-			{% if selectedAspectRatioDesktop == 'custom_aspect_ratio' %}
-				--image-aspect-ratio-desktop: {{fields.desktop_custom_aspect_ratio}}
-				;
-			{% elseif selectedAspectRatioDesktop %}
-				--image-aspect-ratio-desktop: {{selectedAspectRatioDesktop|replace({'x': '/'})}}
-				;
-			{% endif %}
-
-			{% if selectedAspectRatioTablet == 'custom_aspect_ratio' %}
-				--image-aspect-ratio-portrait: {{fields.tablet_custom_aspect_ratio}}
-				;
-			{% elseif selectedAspectRatioTablet %}
-				--image-aspect-ratio-portrait: {{selectedAspectRatioTablet|replace({'x': '/'})}}
-				;
-			{% endif %}
-
-			{% if selectedAspectRatioMobile == 'custom_aspect_ratio' %}
-				--image-aspect-ratio-mobile: {{fields.mobile_custom_aspect_ratio}}
-				;
-			{% elseif selectedAspectRatioMobile %}
-				--image-aspect-ratio-mobile: {{selectedAspectRatioMobile|replace({'x': '/'})}}
-				;
-			{% endif %}
+			--image-aspect-ratio-desktop: {{selectedAspectRatioDesktop|replace({'x': '/'})}}
+			;
+			--image-aspect-ratio-portrait: {{selectedAspectRatioTablet|replace({'x': '/'})}}
+			;
+			--image-aspect-ratio-mobile: {{selectedAspectRatioMobile|replace({'x': '/'})}}
+			;
 		}
 	</style>
-	<picture class="{{ blockClassName|default('cbl-image') }}__picture {{block.id}}" data-pattern-suffix="{{suffix}}" data-pattern-dynamic="{{renderDynamic}}" data-assetkey="responsive-image" data-enableparallax="{{ parallaxEnabled }}">
-		{% if desktopImage %}
-			<source data-type="srcSetDesktop" data-pattern-suffix="{{suffix}}" media="(min-width: 1024px)" class="{{ blockClassName|default('cbl-image') }}__source {{ blockClassName|default('cbl-image') }}--desktop" width="{{ desktopImage.width }}" height="{{ desktopImage.height }}" sizes="{{ sizes }}" srcset="{{desktopSrcset}}"/>
-		{% endif %}
-		{% if tabletImage %}
-			<source data-type="srcSetTablet" data-pattern-suffix="{{suffix}}" media="(min-width: 768px)" width="{{ tabletImage.width }}" height="{{ tabletImage.height }}" class="{{ blockClassName|default('cbl-image') }}__source {{ blockClassName|default('cbl-image') }}--tablet" sizes="{{ sizes }}" srcset="{{ tabletSrcset }}"/>
-		{% endif %}
-		{% if mobileImage %}
-			<source data-type="srcSetMobile" data-pattern-suffix="{{suffix}}" class="{{ blockClassName|default('cbl-image') }}__source {{ blockClassName|default('cbl-image') }}__source--mobile" width="{{ mobileImage.width }}" height="{{ mobileImage.height }}" sizes="{{ sizes }}" srcset="{{ mobileSrcset }}"/>
-		{% endif %}
-		<img data-type="srcGeneral" data-elementname="main-image" data-pattern-suffix="{{suffix}}" data-pattern-dynamic="{{renderDynamic}}" {{ enableEagerLoading }} class="{{ blockClassName|default('cbl-image') }}__image" src="{{mainImageSrc}}" alt="{{ desktopImage.alt }}" {{ parallaxDepth }} {{ parallaxOffsetY }}/>
-	</picture>
+
+	<!--pattern-replace-var:selectedAspectRatioDesktop={{selectedAspectRatioDesktop}}-->
+	<!--pattern-replace-var:selectedAspectRatioTablet={{selectedAspectRatioTablet}}-->
+	<!--pattern-replace-var:selectedAspectRatioMobile={{selectedAspectRatioMobile}}-->
+	<!--pattern-replace-var:sizes={{sizes}}-->
+	<!--pattern-replace-var:picture_id={{picture_id}}-->
+
+	<!--pattern-include-start:components/responsive-picture-element-v3-->
+{{ include('components/responsive-picture-element-v3.twig') }}
+	<!--pattern-include-end:components/responsive-picture-element-v3-->
 {% endif %}

package/components/component-responsive-picture-element-v3/responsive-picture-element-v3.twig

@@ -0,0 +1,35 @@
+{% set desktopImage = get_image(fields.image_desktop|default(fields.desktop_image)) %}
+{% set tabletImage = get_image(fields.image_portrait|default(fields.tablet_image))|default(desktopImage) %}
+
+{% set mobileImage = get_image(fields.image_mobile|default(fields.mobile_image)) %}
+
+
+{% set isSVG = desktopImage.post_mime_type == 'image/svg+xml' %}
+{% set customAspectRatioDesktop = selectedAspectRatioDesktop %}
+{% set aspectRatioParamDesktop = {"aspect_ratio": customAspectRatioDesktop} %}
+{% set mainImageSrc = isSVG ? desktopImage.src : gt_image_mainsrc(desktopImage, aspectRatioParamDesktop) %}
+{% set desktopSrcset = isSVG ? desktopImage.src : gt_image_srcset(desktopImage, aspectRatioParamDesktop) %}
+
+{% set isSVG = tabletImage.post_mime_type == 'image/svg+xml' %}
+{% set customAspectRatioTablet = selectedAspectRatioTablet|default(tabletImage.width ~ '/' ~ tabletImage.height)|replace({'/' : 'x', ':' : 'x'}) %}
+
+{% set aspectRatioParamTablet = {"aspect_ratio": customAspectRatioTablet} %}
+{% set tabletSrcset = isSVG ? tabletImage.src : gt_image_srcset(tabletImage, aspectRatioParamTablet) %}
+
+{% set isSVG = mobileImage.post_mime_type == 'image/svg+xml' %}
+{% set customAspectRatioMobile = selectedAspectRatioMobile|default(mobileImage.width ~ '/' ~ mobileImage.height)|replace({'/' : 'x', ':' : 'x'}) %}
+{% set aspectRatioParamMobile = {"aspect_ratio": customAspectRatioMobile} %}
+{% set mobileSrcset = isSVG ? mobileImage.src : gt_image_srcset(mobileImage, aspectRatioParamMobile) %}
+
+<picture class="single-responsive-image-v3__picture {{picture_id|default(block.id)}}" data-pattern-suffix="{{suffix}}" data-pattern-dynamic="{{renderDynamic}}" data-assetkey="responsive-image" data-enableparallax="{{ parallaxEnabled }}">
+	{% if desktopImage %}
+		<source data-type="srcSetDesktop" data-pattern-suffix="{{suffix}}" media="(min-width: 1024px)" class="single-responsive-image-v3__source single-responsive-image-v3--desktop" width="{{ desktopImage.width }}" height="{{ desktopImage.height }}" srcset="{{desktopSrcset}}"/>
+	{% endif %}
+	{% if tabletImage %}
+		<source data-type="srcSetTablet" data-pattern-suffix="{{suffix}}" media="(min-width: 768px)" width="{{ tabletImage.width }}" height="{{ tabletImage.height }}" class="single-responsive-image-v3__source single-responsive-image-v3--tablet" srcset="{{ tabletSrcset }}"/>
+	{% endif %}
+	{% if mobileImage %}
+		<source data-type="srcSetMobile" data-pattern-suffix="{{suffix}}" class="single-responsive-image-v3__source single-responsive-image-v3__source--mobile" width="{{ mobileImage.width }}" height="{{ mobileImage.height }}" srcset="{{ mobileSrcset }}"/>
+	{% endif %}
+	<img data-type="srcGeneral" data-elementname="main-image" data-pattern-suffix="{{suffix}}" data-pattern-dynamic="{{renderDynamic}}" {{ enableEagerLoading }} sizes="{{ sizes }}" class="single-responsive-image-v3__image" src="{{mainImageSrc}}" alt="{{ desktopImage.alt }}" {{ parallaxDepth }} {{ parallaxOffsetY }}/>
+</picture>

package/components/webc-counter-display/counter-display.css

@@ -0,0 +1,2 @@
+counter-display {
+}

package/components/webc-counter-display/counter-display.html

@@ -0,0 +1,5 @@
+<counter-display
+	id="display-module"
+	data-count=""
+	class="counter-display"
+></counter-display>

package/components/webc-counter-display/counter-display.js

@@ -0,0 +1,30 @@
+export default function counterDisplayJs(options = {}) {
+	try {
+		if (!customElements.get('counter-display')) {
+			customElements.define(
+				'counter-display',
+				class extends HTMLElement {
+					static observedAttributes = ['data-count'];
+					constructor() {
+						super();
+					}
+					connectedCallback() {
+						console.log('Display module added to page.');
+						this.classList.add('loaded');
+					}
+					attributeChangedCallback(name, oldValue, newValue) {
+						console.log(
+							'🚀 ~ attributeChangedCallback ~ name:',
+							name
+						);
+						console.log('count', this.dataset.count);
+
+						this.innerText = `${this.dataset.countertext} ${this.dataset.count}`;
+					}
+				}
+			);
+		}
+	} catch (error) {
+		console.error(error);
+	}
+}

package/components/webc-counter-display/index.html

@@ -0,0 +1,30 @@
+<!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="./counter-display.css" />
+		<title>PTFG</title>
+		<style>
+			body {
+				background-color: #e7b8b8;
+			}
+			main {
+				max-width: 600px;
+				margin-inline: auto;
+				padding: 50px;
+			}
+		</style>
+	</head>
+	<body>
+		<main class="main-container"></main>
+		<script async type="module">
+			const template = await fetch("./counter-display.html");
+			const html = await template.text();
+			document.querySelector(".main-container").innerHTML = html;
+			import blockjs from "./counter-display.js";
+			blockjs();
+		</script>
+	</body>
+</html>

package/components/webc-post-carousel-display-module/index.html

@@ -0,0 +1,30 @@
+<!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="./post-filter-module.css" />
+		<title>PTFG</title>
+		<style>
+			body {
+				background-color: #e7b8b8;
+			}
+			main {
+				max-width: 600px;
+				margin-inline: auto;
+				padding: 50px;
+			}
+		</style>
+	</head>
+	<body>
+		<main class="main-container"></main>
+		<script async type="module">
+			const template = await fetch("./post-grid-display-module.html");
+			const html = await template.text();
+			document.querySelector(".main-container").innerHTML = html;
+			import blockjs from "./post-grid-display-module.js";
+			blockjs();
+		</script>
+	</body>
+</html>

package/components/webc-post-carousel-display-module/post-carousel-display-module.css

@@ -0,0 +1,36 @@
+post-carousel-display-module {
+	grid-area: display;
+	display: grid;
+	.post-carousel-display-module__grid-container {
+		display: flex;
+		overflow: scroll;
+		flex-wrap: nowrap;
+		width: 100%;
+	}
+	.post-carousel-display-module__post-container {
+		display: grid;
+		place-items: stretch;
+		grid-template-rows: max-content;
+		min-width: 300px;
+		.post-carousel-display-module__post-title {
+			color: white;
+			grid-row: 2;
+			text-box-edge: unset;
+			line-height: 120%;
+			text-transform: uppercase;
+			text-align: center;
+			font-size: 36px;
+			.font-secondary {
+				display: block;
+			}
+		}
+		.post-carousel-display-module__post-image {
+			grid-row: 1;
+			width: 100%;
+			height: auto;
+			place-self: stretch;
+			object-fit: cover;
+			aspect-ratio: 9 / 11;
+		}
+	}
+}

package/components/webc-post-carousel-display-module/post-carousel-display-module.html

@@ -0,0 +1,5 @@
+<post-carousel-display-module
+	id="display-module"
+	data-posts=""
+	class="post-carousel-display-module cmpl-block-padding cmpl-block-settings"
+></post-carousel-display-module>

package/components/webc-post-carousel-display-module/post-carousel-display-module.js

@@ -0,0 +1,48 @@
+export default function postFilterDisplayJS(options = {}) {
+	try {
+		if (!customElements.get('post-carousel-display-module')) {
+			customElements.define(
+				'post-carousel-display-module',
+				class extends HTMLElement {
+					static observedAttributes = ['data-posts'];
+					constructor() {
+						super();
+						const gridContainer = document.createElement('div');
+						gridContainer.className =
+							'post-carousel-display-module__grid-container';
+						this.appendChild(gridContainer);
+						this.gridContainer = this.querySelector(
+							'.post-carousel-display-module__grid-container'
+						);
+					}
+					connectedCallback() {
+						console.log('Display module added to page.');
+						this.classList.add('loaded');
+					}
+
+					attributeChangedCallback(name, oldValue, newValue) {
+						// console.log(`Attribute ${name} has changed.`);
+						this.gridContainer.innerHTML = '';
+						if (newValue) {
+							const posts = JSON.parse(newValue);
+
+							posts.forEach((post) => {
+								const postContent = `
+							<div class="post-carousel-display-module__post-container">
+							<h2 class="post-carousel-display-module__post-title">${post.name}</h2>
+							<img loading="lazy" class="post-carousel-display-module__post-image" src="${post.image?.src}" srcset="${post.image?.srcset}" alt="${post.image?.alt}"></div>
+							`;
+								this.gridContainer.insertAdjacentHTML(
+									'beforeend',
+									postContent
+								);
+							});
+						}
+					}
+				}
+			);
+		}
+	} catch (error) {
+		console.error(error);
+	}
+}

package/components/webc-post-filter-module-no-group/index.html

@@ -0,0 +1,30 @@
+<!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="./post-filter-module-no-group.css" />
+		<title>PTFG</title>
+		<style>
+			body {
+				background-color: #e7b8b8;
+			}
+			main {
+				max-width: 600px;
+				margin-inline: auto;
+				padding: 50px;
+			}
+		</style>
+	</head>
+	<body>
+		<main class="main-container"></main>
+		<script async type="module">
+			const template = await fetch("./post-filter-module-no-group.html");
+			const html = await template.text();
+			document.querySelector(".main-container").innerHTML = html;
+			import blockjs from "./post-filter-module-no-group.js";
+			blockjs();
+		</script>
+	</body>
+</html>

package/components/webc-post-filter-module-no-group/post-filter-module-no-group.css

@@ -0,0 +1,59 @@
+post-filter-module-no-group {
+	grid-area: filter;
+	transform: translateX(-100%);
+	@starting-style {
+		transform: translateX(-100%);
+	}
+	position: fixed;
+	inset: 0;
+	background-color: black;
+	right: unset;
+	display: block;
+	width: 100vw;
+	z-index: 99;
+	max-width: 414px;
+	transition: transform ease-in-out 0.3s;
+
+	&.active {
+		transform: translateX(0%);
+	}
+	@media (min-width: 768px) {
+		max-width: unset;
+		width: 475px;
+	}
+
+	.post-filter-module-no-group__clear-filters-button {
+		border: none;
+	}
+
+	.post-filter-module-no-group__grouping-category-button {
+		text-transform: uppercase;
+		border: none;
+		color: var(--theme-primary-text-colour);
+		font-family: var(--secondary-font-family);
+		font-size: 24;
+
+		&.active {
+		}
+	}
+	.post-filter-module-no-group__filter-category-container {
+		height: 0px;
+		overflow: hidden;
+		transition: height ease-out 0.3s;
+	}
+	.post-filter-module-no-group__filter-category-button {
+		color: var(--theme-primary-text-colour);
+		font-family: var(--primary-font-family);
+		border: 1px solid transparent;
+		font-size: 14;
+	}
+	.post-filter-module-no-group__filter-category-button.active-cat {
+		color: var(--primary-gold-100);
+	}
+	.post-filter-module-no-group__clear-filters-button {
+		color: var(--theme-primary-text-colour);
+	}
+}
+post-filter-module-no-group.active {
+	transform: translateX(0%);
+}

package/components/webc-post-filter-module-no-group/post-filter-module-no-group.html

@@ -0,0 +1,13 @@
+<post-filter-module-no-group
+	id="filter-module"
+	data-dataobjectid=""
+	data-dev=""
+	data-devdatalocation="local"
+	data-clearfilterstext="Reset All"
+	data-postsperpagedesktop="8"
+	data-postsperpagemobile="6"
+	data-loadmoretriggerclass="loadmore-trigger"
+	data-textinputclass="text-input-trigger"
+	class="post-filter-module-no-group"
+>
+</post-filter-module-no-group>

package/components/webc-post-filter-module-no-group/post-filter-module-no-group.js

@@ -0,0 +1,312 @@
+export default function postfiltermoduleJs(options = {}) {
+	try {
+		if (!customElements.get('post-filter-module-no-group')) {
+			customElements.define(
+				'post-filter-module-no-group',
+				class extends HTMLElement {
+					static observedAttributes = ['data-devcontent'];
+					constructor() {
+						super();
+						this.enableLogs = true;
+						this.filterState = {
+							enableLogs: false,
+							allposts: [],
+							filteredposts: [],
+							activefilters: new Set(),
+							allcategories: [],
+							groupingcategories: [],
+							filtercategories: [],
+							postsperpagedesktop: 8,
+							postsperpagemobile: 6,
+							pagenumber: 1,
+							setActiveFilters: function (newState) {
+								Object.assign(this.filterState, newState);
+								this.filterPosts.bind(this)();
+							},
+							setFilteredPosts: function (newState) {
+								Object.assign(this.filterState, newState);
+								this.dispatchEvent(
+									new CustomEvent('filteredposts-updated')
+								);
+								this.enableLogs &&
+									console.log(
+										'🚀 filter state: ',
+										this.filterState
+									);
+							}
+						};
+
+						this.filterState.postsperpagedesktop =
+							this.dataset.postsperpagedesktop || 8;
+						this.filterState.postsperpagedesktop =
+							this.dataset.postsperpagedesktop || 6;
+
+						this.loadMoreTriggers = document.querySelectorAll(
+							`.${this.dataset.loadmoretriggerclass}`
+						);
+						this.loadMoreTriggers.forEach((trigger) => {
+							trigger.addEventListener('loadmore', () => {
+								this.filterState.pagenumber =
+									this.filterState.pagenumber + 1;
+								this.filterPosts();
+							});
+						});
+
+						this.textSearchTriggers = document.querySelectorAll(
+							`.${this.dataset.textinputclass}`
+						);
+
+						this.textSearchTriggers.forEach((trigger) => {
+							trigger.addEventListener('textinput', (e) => {
+								const inputText =
+									e.target.querySelector('input')?.value;
+
+								console.log(
+									'🚀 ~ constructor ~ inputEl:',
+									inputText
+								);
+								this.filterPosts();
+								const searchPosts =
+									this.filterState.filteredposts.filter(
+										(post) => {
+											if (
+												post.name
+													?.toLowerCase()
+													.includes(
+														inputText.toLowerCase()
+													)
+											) {
+												return post;
+											}
+										}
+									);
+
+								this.filterState.setFilteredPosts.bind(this)({
+									filteredposts: searchPosts
+								});
+							});
+						});
+						const postFilterContainer =
+							document.createElement('div');
+						postFilterContainer.className =
+							'post-filter-module-no-group__filter-container';
+						this.appendChild(postFilterContainer);
+						this.postFilterContainer = this.querySelector(
+							'.post-filter-module-no-group__filter-container'
+						);
+
+						const postFilterCatsDisplay =
+							document.createElement('div');
+						postFilterCatsDisplay.className =
+							'post-filter-module-no-group__filter-categories-display';
+						this.postFilterContainer.appendChild(
+							postFilterCatsDisplay
+						);
+						this.filterCategoriesDisplay = this.querySelector(
+							'.post-filter-module-no-group__filter-categories-display'
+						);
+
+						const clearFilters = document.createElement('button');
+						clearFilters.className =
+							'post-filter-module-no-group__clear-filters-button';
+						clearFilters.innerText =
+							this.dataset.clearfilterstext || 'Clear Filters';
+						this.postFilterContainer.appendChild(clearFilters);
+						this.clearFiltersButton = this.querySelector(
+							'.post-filter-module-no-group__clear-filters-button'
+						);
+						this.clearFiltersButton.addEventListener(
+							'click',
+							this.clearFilters.bind(this)
+						);
+
+						this.devModeContent = this.dataset.devcontent;
+					}
+					async connectedCallback() {
+						console.log('Filter Module element added to page.');
+						let data;
+						if (
+							this.dataset.dev === 'true' ||
+							this.dataset.devcontent === 'dev-petz' ||
+							this.classList.contains('dev-pets') //Easter Egg :D
+						) {
+							await this.getDevContent();
+						} else {
+							data = globalThis[this.dataset.dataobjectid];
+							this.enableLogs &&
+								console.log('🚀 dataobject: ', data);
+							if (data) {
+								this.filterState.allposts = data[`posts`];
+								this.filterState.allcategories =
+									data[`categories`];
+							}
+						}
+
+						if (this.filterState.allcategories.length > 0) {
+							this.filterState.allcategories.forEach(
+								(category) => {
+									this.filterState.filtercategories.push(
+										category
+									);
+								}
+							);
+						}
+
+						this.filterState.filtercategories.forEach(
+							(category) => {
+								this.filterCategoriesDisplay.insertAdjacentHTML(
+									'beforeend',
+									`<button class="post-filter-module-no-group__filter-category-button" data-categoryid="${category.id}">${category.name}</button>`
+								);
+							}
+						);
+
+						this.categorybuttons = this.querySelectorAll(
+							'.post-filter-module-no-group__filter-category-button'
+						);
+						this.categorybuttons.forEach((button) => {
+							button.addEventListener('click', () => {
+								if (
+									this.filterState.activefilters.has(
+										Number(button.dataset.categoryid)
+									)
+								) {
+									const newActiveFilters = new Set(
+										this.filterState.activefilters
+									);
+									button.classList.remove('active-cat');
+									newActiveFilters.delete(
+										Number(button.dataset.categoryid)
+									);
+									this.filterState.setActiveFilters.bind(
+										this
+									)({
+										activefilters: newActiveFilters
+									});
+								} else {
+									const newActiveFilters = new Set(
+										this.filterState.activefilters
+									);
+									button.classList.add('active-cat');
+									newActiveFilters.add(
+										Number(button.dataset.categoryid)
+									);
+									this.filterState.setActiveFilters.bind(
+										this
+									)({
+										activefilters: newActiveFilters
+									});
+								}
+							});
+						});
+						const groupingButtons = this.querySelectorAll(
+							'.post-filter-module-no-group__grouping-category-button'
+						);
+						const categoryContainers = this.querySelectorAll(
+							'.post-filter-module-no-group__filter-category-container'
+						);
+						groupingButtons.forEach((button) => {
+							button.addEventListener('click', () => {
+								const container =
+									button.parentElement.querySelector(
+										'.post-filter-module-no-group__filter-category-container'
+									);
+								if (button.classList.contains('active')) {
+									button.classList.remove('active');
+									container.classList.remove('active');
+									container.style.height = '0px';
+								} else {
+									groupingButtons.forEach((btn) => {
+										btn.classList.remove('active');
+									});
+									categoryContainers.forEach(
+										(categoryContainer) => {
+											categoryContainer.style.height =
+												'0px';
+											categoryContainer.classList.remove(
+												'active'
+											);
+										}
+									);
+									container.style.height =
+										container.scrollHeight + 'px';
+									button.classList.add('active');
+									container.classList.add('active');
+								}
+							});
+						});
+
+						this.filterPosts();
+						this.classList.add('loaded');
+					}
+
+					attributeChangedCallback(name, oldValue, newValue) {
+						console.log(`Attribute ${name} has changed.`);
+						if (newValue) {
+							this.getDevContent();
+						}
+					}
+					async getDevContent() {
+						// this.enableLogs && console.log('Getting dev content..');
+						// const data = await import(
+						// 	`./dev-content/dev-content${this.dataset.devdatalocation}.js`
+						// );
+						// this.filterState.allposts = data[`devContentPets`];
+						// this.filterState.allcategories =
+						// 	data[`devContentCategories`];
+						this.filterPosts();
+					}
+					filterPosts(event) {
+						if (this.filterState.allposts.length == 0) {
+							return;
+						}
+						if (this.filterState.activefilters.size === 0) {
+							const numberPosts =
+								Number(this.filterState.postsperpagedesktop) *
+								Number(this.filterState.pagenumber);
+							this.filterState.setFilteredPosts.bind(this)({
+								filteredposts: this.filterState.allposts.slice(
+									0,
+									numberPosts
+								)
+							});
+
+							if (
+								this.filterState.filteredposts.length >=
+								this.filterState.allposts.length
+							) {
+								this.loadMoreTriggers.forEach((trigger) => {
+									trigger.classList.add('hide');
+								});
+							}
+							return;
+						}
+
+						const newFilteredPosts =
+							this.filterState.allposts.filter((post) => {
+								return (
+									this.filterState.activefilters.intersection(
+										new Set(post.categories)
+									).size > 0
+								);
+							});
+
+						this.filterState.setFilteredPosts.bind(this)({
+							filteredposts: newFilteredPosts
+						});
+					}
+					clearFilters(event) {
+						this.categorybuttons.forEach((button) => {
+							button.classList.remove('active-cat');
+						});
+						this.filterState.setActiveFilters.bind(this)({
+							activefilters: new Set()
+						});
+					}
+				}
+			);
+		}
+	} catch (error) {
+		console.error(error);
+	}
+}

package/components/webc-ptfg-9000/index.html

@@ -14,7 +14,7 @@
 		/>
 		<link
 			rel="stylesheet"
-			href="../webc-post-grid-display-module/post-grid-display-module.css"
+			href="../webc-post-carousel-display-module/post-carousel-display-module.css"
 		/>
 		<title>PTFG</title>
 	</head>
@@ -44,11 +44,12 @@
 			</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-grid-display-module
-				id="display-module"
-				data-posts=""
-				class="post-grid-display-module cmpl-block-padding cmpl-block-settings"
-			></post-grid-display-module>
+			<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>
 
@@ -66,8 +67,8 @@
 			import loadmoreTrigger from "../webc-loadmore-trigger/loadmore-trigger.js";
 			loadmoreTrigger();
 
-			import blockgridjs from "../webc-post-grid-display-module/post-grid-display-module.js";
-			blockgridjs();
+			import blockcarouseljs from "../webc-post-carousel-display-module/post-carousel-display-module.js";
+			blockcarouseljs();
 
 			import blockptfgjs from "./ptfg-9000.js";
 			blockptfgjs();

package/components/webc-ptfg-9000/ptfg-9000.html

@@ -1 +1 @@
-<ptfg-9000 class="ptfg-9000 ptfg-9000__main-container"> </ptfg-9000>
+<ptfg-9000 class="ptfg-9000 ptfg-9000__main-container"></ptfg-9000>

package/components/webc-ptfg-9000/ptfg-9000.js

@@ -9,6 +9,7 @@ export default function ptfg9000js(options = {}) {
 						this.data = this.dataset;
 						this.filterModule =
 							this.querySelector('#filter-module');
+
 						this.displayModule =
 							this.querySelector('#display-module');
 					}
@@ -26,6 +27,7 @@ export default function ptfg9000js(options = {}) {
 								}
 							);
 						}
+
 						this.classList.add('loaded');
 					}
 					attributeChangedCallback(name, oldValue, newValue) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@total_onion/onion-library",
-	"version": "2.0.250",
+	"version": "2.0.254",
 	"description": "Component library",
 	"main": "index.js",
 	"scripts": {
@@ -20,7 +20,7 @@
 	"dependencies": {
 		"@total_onion/onion-modalcontroller": "^1.0.5",
 		"@total_onion/onion-utils": "^1.0.10",
-		"@total_onion/onion-videocontroller": "^1.1.7",
+		"@total_onion/onion-videocontroller": "^1.1.8",
 		"autoprefixer": "^10.4.21",
 		"compressing": "^2.0.0",
 		"cpy": "^9.0.1",