@total_onion/onion-library 2.0.263 → 3.0.0

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/better-reviews-widget.vue

@@ -1,15 +0,0 @@
-<script setup>
-import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
-const blockClassname = "post-type-filter-grid-v3";
-
-const props = defineProps(["post", "element"]);
-const gridLayoutString = gridLayoutElement(props);
-const textEditorStylesString = textEditorStyles(props);
-
-</script>
-<template>
-	<div :class="`${blockClassname}__better-reviews ${blockClassname}__info-item`"
-		:style="`${gridLayoutString} ${textEditorStylesString}`">
-		<div v-html="props.post.rating"></div>
-	</div>
-</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/buy-now-widget.vue

@@ -1,72 +0,0 @@
-<script setup>
-import { gridLayoutElement } from "./ptfg-utils.vue";
-const props = defineProps(["post", "element", "ctaIcons", "blockClassname"]);
-
-const gridLayoutString = gridLayoutElement(props);
-
-const blockClassname = props.blockClassname;
-const ctaIcons = props.ctaIcons;
-const element = props.element;
-const ctaStyle = element.cta_style.replace('__', '');
-
-const post = props.post;
-
-const click2buyPimId = post.post_data.click_to_buy_pim_id;
-const debrainId = post.post_data.debrain_pim_id;
-const productDebrainSkuId = post.post_data.debrain_sku_id;
-const directLinkURL = post.product_buynow_direct_link;
-
-const productEANs = post.post_data.mikmak_ean_ids;
-const mikmakDrawerWidgetID = post.mikmak_drawer_widget_ID;
-const relatedProductEANs = post.related_product_eans;
-
-let totalProductEANs = '';
-if (productEANs !== '') {
-    totalProductEANs = productEANs + (relatedProductEANs !== '' ? ',' + relatedProductEANs : '');
-}
-
-</script>
-<template>
-    <div :class="`${blockClassname}__product-buy-now ${blockClassname}__info-item`"
-        :style="`--post-colour: ${postColour}; --post-text-colour-style: ${postTextColourStyle}; ${gridLayoutString}`">
-        <a href="#"
-            :class="`${blockClassname}__cta cmpl-cta-style-${ctaStyle} ${blockClassname}__cta-animation-style-${ctaAnimationStyle} ctb`"
-            v-if="element.buy_now_text && post.post_data.buy_now_option_select.replace('__', '') == 'ctb'" data-ctbuy
-            :data-ctbuy-variant="click2buyPimId">
-            <span :class="`${blockClassname}__cta-span`">{{ element.buy_now_text }}</span>
-            <span :class="`${blockClassname}__cta-icon`" v-if="element.enable_cta_icon">
-                <img :class="`${blockClassname}__icon-image style-svg`" :src="ctaIcons.cta_link_icon">
-            </span>
-        </a>
-        <a href="#"
-            :class="`dloc-link ${blockClassname}__cta cmpl-cta-style-${ctaStyle} ${blockClassname}__cta-animation-style-${ctaAnimationStyle} wtb`"
-            v-if="element.buy_now_text && post.post_data.buy_now_option_select.replace('__', '') == 'wtb'" data-ctbuy
-            :data-filter="debrainId" data-action="where-to-buy">
-            <span :class="`${blockClassname}__cta-span`">{{ element.buy_now_text }}</span>
-            <span :class="`${blockClassname}__cta-icon`" v-if="element.enable_cta_icon">
-                <img :class="`${blockClassname}__icon-image style-svg`" :src="ctaIcons.cta_link_icon">
-            </span>
-        </a>
-        <a :href="directLinkURL[0]"
-            :class="`${blockClassname}__cta cmpl-cta-style-${ctaStyle} ${blockClassname}__cta-animation-style-${ctaAnimationStyle} link`"
-            v-if="element.buy_now_text && post.post_data.buy_now_option_select.replace('__', '') == 'link'"
-            :target="(directLinkURL[2] !== '' ? directLinkURL[2] : '_blank')">
-            <span :class="`${blockClassname}__cta-span`">{{ element.buy_now_text }}</span>
-            <span :class="`${blockClassname}__cta-icon`" v-if="element.enable_cta_icon">
-                <img :class="`${blockClassname}__icon-image style-svg`" :src="ctaIcons.cta_link_icon">
-            </span>
-        </a>
-        <wtb-button v-if="post.post_data.buy_now_option_select.replace('__', '') == 'wtb-v2' && productDebrainSkuId"
-            :sku="productDebrainSkuId"></wtb-button>
-        <a href="#" :data-mm-wtbid="`${mikmakDrawerWidgetID}`" :data-mm-ids="`${totalProductEANs}`"
-            :data-mm-default-id="`${productEANs}`"
-            :class="`${blockClassname}__cta cmpl-cta-style-${ctaStyle} ${blockClassname}__cta-animation-style-${ctaAnimationStyle} mikmak-buy-now`"
-            v-if="element.buy_now_text && post.post_data.buy_now_option_select.replace('__', '') == 'mikmak'"
-            :data-filter="debrainId">
-            <span :class="`${blockClassname}__cta-span`">{{ element.buy_now_text }}</span>
-            <span :class="`${blockClassname}__cta-icon`" v-if="element.enable_cta_icon">
-                <img :class="`${blockClassname}__icon-image style-svg`" :src="ctaIcons.cta_link_icon">
-            </span>
-        </a>
-    </div>
-</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/divider-widget.vue

@@ -1,11 +0,0 @@
-<script setup>
-import { gridLayoutElement } from "./ptfg-utils.vue";
-const props = defineProps(["post", "element"]);
-const blockClassname = "post-type-filter-grid-v3";
-const gridLayoutString = gridLayoutElement(props);
-
-</script>
-<template>
-    <div :class="`${blockClassname}__post-divider ${blockClassname}__info-item`" :style="`${gridLayoutString}`">
-    </div>
-</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/global-image-widget.vue

@@ -1,23 +0,0 @@
-<script setup>
-import { gridLayoutElement } from "./ptfg-utils.vue";
-
-const props = defineProps(["post", "element", "fields", "globalImages"]);
-const blockClassname = "post-type-filter-grid-v3";
-const imageSelect = props.element.image_select?.replace('__', '');
-let globalImage = '';
-if (props.globalImages[imageSelect]) {
-    globalImage = props.globalImages[imageSelect]['global_image'];
-}
-let globalImageWidthString = `--global-image-width-mobile: ${props.element.global_image_width}%; --global-image-width-desktop: ${props.element.global_image_width}%;`;
-const globalImageStyles = `--global-image-z-index: ${props.element.global_image_zindex}; --global-image-position: ${props.element.global_image_position.replace('__', '')}; --global-image-fit-style: ${props.element.global_image_fit_style.replace('__', '')}; --global-image-max-width-desktop: ${props.element.global_image_max_width_desktop}%; --global-image-max-width-mobile: ${props.element.global_image_max_width_mobile}%;`
-let sizes = "(min-width: 1440px) 50vw, (min-width: 1024px) 50vw, (min-width: 768px) 768px') 100vw";
-
-const gridLayoutString = gridLayoutElement(props);
-
-</script>
-<template>
-    <img v-if="globalImage.url"
-        :class="`${blockClassname}__info-item ${blockClassname}__global-image  ${blockClassname}__global-image--1`"
-        loading="lazy" :src="globalImage.url" :width="globalImage.width" :height="globalImage.height" :sizes=sizes
-        :alt="globalImage.alt" :style="`${gridLayoutString} ${globalImageStyles}`" />
-</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/media-widget.vue

@@ -1,23 +0,0 @@
-<script setup>
-import { gridLayoutElement } from "./ptfg-utils.vue";
-
-const props = defineProps(["post", "element", "fields"]);
-const blockClassname = "post-type-filter-grid-v3";
-const imageType = 'image';
-let postType = props.post.post_data.post_type;
-const gridLayoutString = gridLayoutElement(props);
-
-</script>
-<template>
-    <div :class="`${blockClassname}__media-image-container ${blockClassname}__info-item`" :href="props.post.link"
-        :style="`${gridLayoutString}`">
-        <img :class="`${blockClassname}__post-image ${blockClassname}__media-${imageType}`" loading="lazy"
-            :src="props.post.post_images['post_' + imageType + '_src']"
-            :width="props.post.post_images['post_' + imageType + '_width']"
-            :height="props.post.post_images['post_' + imageType + '_height']"
-            :srcset="props.post.post_images['post_' + imageType + '_srcset']"
-            sizes="(max-width: 414px) 100px, (max-width: 768px) 150px, (max-width: 1024px) 200px, (max-width: 1440px) 275px, (max-width: 1800px) 300px"
-            :alt="props.post.post_images['post_' + imageType + '_alt_text']"
-            :style="`--post-image-width: ${element.post_image_width}%;`" />
-    </div>
-</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/post-author-widget.vue

@@ -1,15 +0,0 @@
-<script setup>
-import { gridLayoutElement } from "./ptfg-utils.vue";
-
-const props = defineProps(["post", "element"]);
-const blockClassname = "post-type-filter-grid-v3";
-const gridLayoutString = gridLayoutElement(props);
-const textEditorStylesString = textEditorStyles(props);
-
-</script>
-<template>
-    <p :class="`${blockClassname}__post-author ${blockClassname}__info-item ${element.text_style?.typography_style.replace('__', '')}`"
-        :style="`${gridLayoutString} ${textEditorStylesString}`">
-        {{ post.author_display_name }}
-    </p>
-</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/post-category-widget.vue

@@ -1,20 +0,0 @@
-<script setup>
-import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
-
-const props = defineProps(["post", "element"]);
-const blockClassname = "post-type-filter-grid-v3";
-
-const gridLayoutString = gridLayoutElement(props);
-const textEditorStylesString = textEditorStyles(props);
-
-</script>
-<template>
-    <div :class="`${blockClassname}__post-category ${blockClassname}__info-item`"
-        :style="`${gridLayoutString} ${textEditorStylesString}`">
-        <template v-for="(category, index) in props.post.categories" :key="index">
-            <p v-if="category.taxonomy != 'translation_priority'" v-html="category.name"
-                :class="`${blockClassname}__post-category--item ${element.text_style?.typography_style.replace('__', '')}`">
-            </p>
-        </template>
-    </div>
-</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/post-component.vue

@@ -1,73 +0,0 @@
-<script setup>
-import PostAuthor from "./post-author-widget.vue";
-import PostImage from "./post-image-widget.vue";
-import GlobalImage from "./global-image-widget.vue";
-import PostCategories from "./post-category-widget.vue";
-import PostTags from "./post-tags-widget.vue";
-import Divider from "./divider-widget.vue";
-import PostHeadline from "./post-headline-widget.vue";
-import PostLink from "./post-link-widget.vue";
-import PostPublishDate from "./post-publish-widget.vue";
-import PostTitle from "./post-title-widget.vue";
-import Spacer from "./spacer-widget.vue";
-import PostInfoDescription from "./post-info-description.vue";
-import PostInfoSubtitle from "./post-info-subtitle.vue";
-import PostTextAlternativeStyle from "./post-text-alternative-style.vue";
-import MediaImage from "./media-widget.vue";
-import BetterReviews from "./better-reviews-widget.vue";
-import BuyNow from "./buy-now-widget.vue";
-import ShopifyAddToCart from "./shopify-add-to-cart.vue";
-const widgetComponents = {
-	PostAuthor,
-	PostImage,
-	PostCategories,
-	PostTags,
-	Divider,
-	PostHeadline,
-	PostLink,
-	PostPublishDate,
-	PostTitle,
-	Spacer,
-	PostInfoDescription,
-	PostTextAlternativeStyle,
-	MediaImage,
-	GlobalImage,
-	BetterReviews,
-	BuyNow,
-	PostInfoSubtitle,
-	ShopifyAddToCart,
-};
-const widgetNames = [];
-const props = defineProps([
-	"postDataConfig",
-	"post",
-	"ctaIcons",
-	"mappedIcons",
-	"ctaStyles",
-	"globalImages",
-	"gradientOverlayColour",
-	"fields",
-	"options",
-	"imageSizesAttribute"
-]);
-props.postDataConfig?.forEach((widget) => {
-	let nameArr = widget.acf_fc_layout.split("_");
-	let name = "";
-	nameArr.forEach((part) => {
-		const caps = part.charAt(0).toUpperCase() + part.slice(1);
-		name += caps;
-	});
-	widgetNames.push(name);
-});
-
-const blockClassname = "post-type-filter-grid-v3";
-</script>
-
-<template>
-	<template v-for="(widget, index) in widgetNames" :key="index">
-		<component :is="widgetComponents[widget]" :post="props.post" :fields="fields" :options="options"
-			:element="props.postDataConfig[index]" :blockClassname="blockClassname" :ctaIcons="ctaIcons"
-			:ctaStyles="ctaStyles" :mappedIcons="mappedIcons" :globalImages="globalImages"
-			:imageSizesAttribute="props.imageSizesAttribute" />
-	</template>
-</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/post-headline-widget.vue

@@ -1,16 +0,0 @@
-<script setup>
-import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
-
-const props = defineProps(["post", "element"]);
-const blockClassname = "post-type-filter-grid-v3";
-
-const gridLayoutString = gridLayoutElement(props);
-const textEditorStylesString = textEditorStyles(props);
-
-</script>
-<template>
-    <h3 :class="`${blockClassname}__post-headline ${blockClassname}__info-item ${element.text_style?.typography_style.replace('__', '')}`"
-        :style="`${gridLayoutString} ${textEditorStylesString}`">
-        {{ element.headline_text }}
-    </h3>
-</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/post-image-widget.vue

@@ -1,60 +0,0 @@
-<script setup>
-import { gridLayoutElement } from "./ptfg-utils.vue";
-
-const props = defineProps(["post", "element", "fields", "imageSizesAttribute"]);
-const blockClassname = "post-type-filter-grid-v3";
-const imageType = props.element?.image_select?.replace('__', '');
-const imageTypeSecondary = 'image_alt';
-const setAsBackgroundImage = props.element?.set_as_background_image;
-let positioningString = '';
-let postImageWidthString = `--post-image-width-mobile: ${props.element.post_image_width_mobile || props.element.post_image_width}%; --post-image-width-portrait: ${props.element.post_image_width_portrait || props.element.post_image_width}%; --post-image-width-desktop: ${props.element.post_image_width}%;`;
-if (imageType === 'image_accent') {
-    const elementPositioning = props.element?.post_image_positioning.element_positioning;
-    positioningString = `
---element-rotation-desktop: ${elementPositioning.desktop_positioning.element_rotation_desktop}deg;
---element-rotation-mobile: ${elementPositioning.desktop_positioning.element_rotation_desktop}deg;
---element-z-index: ${elementPositioning.element_z_index};
---element-horizontal-offset-mobile: ${elementPositioning.mobile_positioning.horizontal_offset}%;
---element-vertical-offset-mobile: ${elementPositioning.mobile_positioning.vertical_offset}%;
---element-horizontal-offset-desktop: ${elementPositioning.desktop_positioning.horizontal_offset}%;
---element-vertical-offset-desktop: ${elementPositioning.desktop_positioning.vertical_offset}%;
---mobile-horizontal-placement: ${elementPositioning.mobile_positioning.horizontal_snap?.replace('__', '')};
---mobile-vertical-placement: ${elementPositioning.mobile_positioning.vertical_snap?.replace('__', '')};
---desktop-horizontal-placement: ${elementPositioning.desktop_positioning.horizontal_snap?.replace('__', '')};
---desktop-vertical-placement: ${elementPositioning.desktop_positioning.vertical_snap?.replace('__', '')};
---element-position: ${elementPositioning.element_position};
-
-`;
-    postImageWidthString = `--post-image-width-mobile: calc( ${props.element.post_image_width_mobile_px} / var(--mobile-design-reference) * var(--screen-width-mobile)); --post-image-width-desktop: calc(${props.element.post_image_width_desktop_px} / var(--desktop-design-reference) * var(--screen-width-desktop));`;
-}
-console.log(props.imageSizesAttribute);
-
-
-const gridLayoutString = gridLayoutElement(props);
-
-const styleString = `--post-image-border-radius: ${props.fields.post_image_border_radius};`
-let postType = props.post.post_data.post_type;
-let sizes = props.imageSizesAttribute || "(min-width: 1440px) 50vw, (min-width: 1024px) 50vw, (min-width: 768px) 768px') 100vw";
-
-</script>
-<template>
-    <a :class="`${blockClassname}__post-image-container-link ${blockClassname}__info-item ${blockClassname}__post-image-container--${imageType} ${blockClassname}__post-image-container-link--${props.fields.show_alt_image_on_hover ? 'show-alt-image-on-hover' : 'no-hover'} ${setAsBackgroundImage ? blockClassname + '__post-image-container-link--set-as-background-image' : ''}`"
-        :href="props.post.link" :aria-label="props.post.post_title" :style="`${gridLayoutString}`">
-        <img v-if="props.post.post_images['post_' + imageType + '_src']"
-            :class="`${blockClassname}__post-image ${blockClassname}__post-${imageType} ${blockClassname}__post-image--${imageType}`"
-            loading="lazy" :src="props.post.post_images['post_' + imageType + '_src']"
-            :width="props.post.post_images['post_' + imageType + '_width']"
-            :height="props.post.post_images['post_' + imageType + '_height']"
-            :srcset="props.post.post_images['post_' + imageType + '_srcset']" :sizes=sizes
-            :alt="props.post.post_images['post_' + imageType + '_alt_text']"
-            :style="`${styleString} ${positioningString} ${postImageWidthString}`" />
-        <img v-if="props.fields.show_alt_image_on_hover"
-            :class="`${blockClassname}__post-image--secondary ${blockClassname}__post-${imageTypeSecondary}`"
-            loading="lazy" :src="props.post.post_images['post_' + imageTypeSecondary + '_src']"
-            :width="props.post.post_images['post_' + imageTypeSecondary + '_width']"
-            :height="props.post.post_images['post_' + imageTypeSecondary + '_height']"
-            :srcset="props.post.post_images['post_' + imageTypeSecondary + '_srcset']" :sizes=sizes
-            :alt="props.post.post_images['post_' + imageTypeSecondary + '_alt_text']"
-            :style="`${postImageWidthString}`" />
-    </a>
-</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/post-info-description.vue

@@ -1,15 +0,0 @@
-<script setup>
-import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
-
-const props = defineProps(["post", "element"]);
-const blockClassname = "post-type-filter-grid-v3";
-const gridLayoutString = gridLayoutElement(props);
-const textEditorStylesString = textEditorStyles(props);
-</script>
-<template>
-    <div :class="`${blockClassname}__post-info-description ${blockClassname}__info-item`"
-        :style="`${gridLayoutString} ${textEditorStylesString}`">
-        <p :class="`${element.text_style?.typography_style.replace('__', '')}`">{{ post.post_data.post_info_description
-            }}</p>
-    </div>
-</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/post-info-subtitle.vue

@@ -1,15 +0,0 @@
-<script setup>
-import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
-
-const props = defineProps(["post", "element"]);
-const blockClassname = "post-type-filter-grid-v3";
-const gridLayoutString = gridLayoutElement(props);
-const textEditorStylesString = textEditorStyles(props);
-</script>
-<template>
-    <div :class="`${blockClassname}__post-info-subtitle ${blockClassname}__info-item`"
-        :style="`${gridLayoutString} ${textEditorStylesString}`">
-        <p :class="`${element.text_style?.typography_style.replace('__', '')}`">{{ post.post_data.post_info_subtitle }}
-        </p>
-    </div>
-</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/post-link-widget.vue

@@ -1,47 +0,0 @@
-<script setup>
-import { gridLayoutElement } from "./ptfg-utils.vue";
-const blockClassname = "post-type-filter-grid-v3";
-const props = defineProps(["post", "element", "mappedIcons", "ctaStyles", "blockClassname", "options"]);
-const postColour = props.post.post_data.post_colour;
-const postTextColourStyle = props.post.post_data?.post_text_colour_style?.replace('__', '');
-let ctaStyle = '';
-if (typeof props.element.cta_style == 'string') {
-    ctaStyle = props.element?.cta_style?.replace("__", '');
-} else {
-    ctaStyle = props.element?.cta_style;
-}
-let postCtaStyle = ctaStyle;
-let postCtaStyleValue = '';
-let ctaAnimationStyle = '';
-if (props.element?.cta_style_select) {
-    if (props.element?.cta_style_select?.replace('__', '') == 'post-colour') {
-        postCtaStyle = 'post-colour';
-        postCtaStyleValue = `color: ${postColour};--post-text-colour-style: ${postColour};`;
-    }
-    if (props.element?.cta_style_select?.replace('__', '') == 'post-text-colour-style') {
-        postCtaStyle = 'post-text-colour-style';
-        postCtaStyleValue = `color: ${postTextColourStyle};--post-text-colour-style: ${postTextColourStyle};`;
-    }
-    if (props.ctaStyles) {
-        ctaAnimationStyle = props.ctaStyles[ctaStyle - 1]?.cta_settings?.cta_animation_style;
-    }
-}
-let iconImage = '';
-if (props.mappedIcons['cta_link_icon']) {
-    iconImage = props.mappedIcons['cta_link_icon']['type'] == 'image/svg+xml' ? props.mappedIcons['cta_link_icon']['image'] : '<img src="' + props.mappedIcons['cta_link_icon']['image'] + '">';
-}
-const enableCtaIcon = props.ctaStyles[ctaStyle - 1]?.cta_settings?.include_cta_icon;
-const gridLayoutString = gridLayoutElement(props);
-</script>
-<template>
-    <div :class="`${blockClassname}__post-link ${blockClassname}__info-item`" :style="`${gridLayoutString}`">
-        <a :href="post?.link" :style="`${postCtaStyleValue}`"
-            :class="`${blockClassname}__cta ${blockClassname}__cta-style-${postCtaStyle} cmpl-cta-style-${postCtaStyle}  cmpl-cta-animation-style-${ctaAnimationStyle}`"
-            v-if="element.post_link_text">
-            <span :class="`${blockClassname}__cta-span`">{{ element.post_link_text }}</span>
-            <span :class="`${blockClassname}__cta-icon cmpl-cta-icon ${blockClassname}__icon-image`"
-                v-if="enableCtaIcon" v-html="iconImage">
-            </span>
-        </a>
-    </div>
-</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/post-publish-widget.vue

@@ -1,44 +0,0 @@
-<script setup>
-import { computed } from 'vue'
-import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
-
-const props = defineProps(["post", "element"]);
-const blockClassname = "post-type-filter-grid-v3";
-const gridLayoutString = gridLayoutElement(props);
-const textEditorStylesString = textEditorStyles(props);
-
-const dateWithoutTime = computed(() => {
-    if (props.post.post_date) {
-        const dateArray = props.post.post_date.split(' ');
-        const dateDMY = dateArray[0].split('-');
-        const dateObject = new Date(Date.UTC(
-            parseInt(dateDMY[0]), // year
-            parseInt(dateDMY[1]) - 1, // month (0-based)
-            parseInt(dateDMY[2]) // day
-        ));
-
-        const url = window.location.href;
-        const parts = url.split("/");
-        let formattedDate;
-
-        parts.forEach((part) => {
-            if (part === "en-us") {
-                formattedDate = new Intl.DateTimeFormat("en-US").format(
-                    dateObject
-                );
-            } else {
-                formattedDate = new Intl.DateTimeFormat("en-GB").format(
-                    dateObject
-                );
-            }
-        });
-        return formattedDate;
-    }
-});
-</script>
-<template>
-    <p :class="`${blockClassname}__post-publish-date ${blockClassname}__info-item ${element.text_style?.typography_style.replace('__', '')}`"
-        :style="`${gridLayoutString} ${textEditorStylesString}`">
-        {{ dateWithoutTime }}
-    </p>
-</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/post-tags-widget.vue

@@ -1,19 +0,0 @@
-<script setup>
-import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
-
-const props = defineProps(["post", "element", "ctaStyles"]);
-const blockClassname = "post-type-filter-grid-v3";
-
-const gridLayoutString = gridLayoutElement(props);
-let ctaStyle = props.element?.cta_style?.replace("__", '');
-
-</script>
-<template>
-    <div :class="`${blockClassname}__post-tags ${blockClassname}__info-item `" :style="`${gridLayoutString}`">
-        <template v-for="(tag, index) in props.post.tags" :key="index">
-            <div v-html="tag.name"
-                :class="`${blockClassname}__post-tag ${blockClassname}__cta cmpl-cta-style-${ctaStyle}`">
-            </div>
-        </template>
-    </div>
-</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/post-text-alternative-style.vue

@@ -1,18 +0,0 @@
-<script setup>
-import { gridLayoutElement } from "./ptfg-utils.vue";
-
-const props = defineProps(["post", "element", "ctaIcons", "blockClassname"]);
-const blockClassname = props.blockClassname;
-
-const gridLayoutString = gridLayoutElement(props);
-
-
-</script>
-<template>
-    <div :href="props.post.link" :class="`${blockClassname}__post-text-alternative-style ${blockClassname}__info-item`"
-        :style="`${gridLayoutString}`">
-        <h3 :class="`${blockClassname}__post-text-alternative-style-text`"
-            v-html="post.post_data.post_text_alternative_style">
-        </h3>
-    </div>
-</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/post-title-widget.vue

@@ -1,20 +0,0 @@
-<script setup>
-import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
-
-const props = defineProps(["post", "element", "ctaIcons", "blockClassname"]);
-const blockClassname = props.blockClassname;
-
-const gridLayoutString = gridLayoutElement(props);
-const textEditorStylesString = textEditorStyles(props);
-
-</script>
-<template>
-	<a :href="props.post.link" :class="`${blockClassname}__post-title ${blockClassname}__info-item`"
-		:style="`${gridLayoutString}`">
-		<h3 :class="`${element.text_style?.typography_style.replace('__', '')}`" :style="`${textEditorStylesString}`"
-			v-html="post.post_title">
-		</h3>
-		<img :class="`${blockClassname}__post-title-icon`" v-if="element.enable_icon" :src="ctaIcons.cta_load_more_icon"
-			alt="title icon">
-	</a>
-</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/pre-render-posts-html.twig

@@ -1,17 +0,0 @@
-<div class="{{blockClassName}}__no-js-content lazy-fade js-enabled-hide" style="width: 100%; padding: var(--global-inline-spacing)">
-	<div class="{{blockClassName}}__posts-container" style="width: 100%; display: grid; grid-template-columns: repeat(auto-fill,minmax(250px, 1fr)); gap: 20px;">
-		{% for post in updatedPosts.posts %}
-			{% set postImage = get_image(post.post_images.post_image) %}
-
-			<div class="{{blockClassName}}__post-container">
-				<a href="{{post.link}}"><img class="js-enabled-hide" src="{{postImage.src}}" srcset="{{postImage.srcset}}" alt="{{post.post_images.post_image_alt_text}}" loading='lazy' class=""></a>
-				{% if post.post_title is not empty %}
-					<h2 class="">{{post.post_title}}</h2>
-				{% endif %}
-				{% if post.post_info_description is not empty %}
-					<p class="">{{post.post_info_description}}</p>
-				{% endif %}
-			</div>
-		{% endfor %}
-	</div>
-</div>