From 484767ae603dc4ad0ebcc06e2de5ecbdb62e19a9 Mon Sep 17 00:00:00 2001
From: Pipicz Petra <ppipicz24@gmail.com>
Date: Wed, 8 Apr 2026 13:58:55 +0200
Subject: [PATCH 1/2] feat: Refactoring of contentCardData and the files that
 contain it

---
 .../content-card/content-card.component.html  | 98 ++++++-------------
 .../content-card/content-card.component.ts    |  2 +-
 .../demo/src/app/model/contentCardData.ts     | 75 +++++++-------
 .../component-details.component.ts            | 45 ++++-----
 .../pages/components/components.component.ts  | 32 ++++--
 .../src/app/pages/index/index.component.ts    | 50 +++++-----
 .../issue-report/issue-report.component.ts    | 50 +++++-----
 .../pages/list-page/list-page.component.ts    | 38 ++++---
 8 files changed, 190 insertions(+), 200 deletions(-)

diff --git a/projects/demo/src/app/components/content-card/content-card.component.html b/projects/demo/src/app/components/content-card/content-card.component.html
index 419b48eb..501ab6e0 100644
--- a/projects/demo/src/app/components/content-card/content-card.component.html
+++ b/projects/demo/src/app/components/content-card/content-card.component.html
@@ -1,34 +1,34 @@
 @let data = contentCardData();
 <ids-card
   size="compact"
-  [appearance]="data.appearance || 'elevated'"
-  [variant]="data.variant || 'surface'"
-  [orientation]="data.orientation"
-  [class]="data.orientation === 'horizontal' ? 'flex flex-col md:flex-row' : 'h-full'"
-  [class.transparent-bg]="data.transparent === true"
+  [appearance]="data.card?.appearance || 'elevated'"
+  [variant]="data.card?.variant || 'surface'"
+  [orientation]="data.card?.orientation ?? 'vertical'"
+  [class]="data.card?.orientation === 'horizontal' ? 'flex flex-col md:flex-row' : 'h-full'"
+  [class.transparent-bg]="data.card?.transparent === true"
 >
-  @if (data.imageURL) {
-    <div class="ids-container-gap-24" [class]="data.orientation === 'horizontal' ? ' md:w-full ' : ''">
-      @if (data.state) {
-        <app-badge [state]="data.state" />
+  @if (data.image?.imageUrl) {
+    <div class="ids-container-gap-24" [class]="data.card?.orientation === 'horizontal' ? ' md:w-full ' : ''">
+      @if (data.image?.state) {
+        <app-badge [state]="data.image?.state" />
       }
       <app-image
-        [aspectRatio]="data.aspectRatio"
-        [imageBgColorVariant]="data.imageBgColorVariant"
-        [orientation]="data.orientation"
-        [state]="data.state"
-        [imageCaption]="data.imageCaption"
-        [imageUrlLight]="contentCardData().imageUrlLight ?? ''"
-        [imageUrlDark]="contentCardData().imageUrlDark ?? ''"
+        [aspectRatio]="data.image?.aspectRatio"
+        [imageBgColorVariant]="data.image?.bgColorVariant"
+        [orientation]="data.card?.orientation"
+        [state]="data.image?.state"
+        [imageCaption]="data.image?.caption"
+        [imageUrlLight]="contentCardData().image?.lightUrl ?? ''"
+        [imageUrlDark]="contentCardData().image?.darkUrl ?? ''"
         [data]="imageData()"
-        [filledInContainer]="data.filledInContainer ?? false"
+        [filledInContainer]="data.image?.filledInContainer ?? false"
       />
     </div>
   }
   <ids-card-body
     [class]="
-      data.orientation === 'horizontal'
-        ? data.filledInContainer === true
+      data.card?.orientation === 'horizontal'
+        ? data.image?.filledInContainer === true
           ? 'flex flex-col md:flex-row md:w-full special-horizontal-filled'
           : 'flex flex-col md:flex-row md:w-full special-horizontal-filled-2 '
         : ''
@@ -37,14 +37,14 @@
     @if (data.date || data.tags) {
       <div class="flex items-center gap-ids-container-gap-8">
         <ids-chip-group appearance="outlined" size="dense">
-            <ids-chip variant="primary">
-              {{ data.date }}
+          <ids-chip variant="primary">
+            {{ data.date }}
+          </ids-chip>
+          @for (tag of data.tags; track $index) {
+            <ids-chip variant="secondary">
+              {{ tag.title }}
             </ids-chip>
-            @for (tag of data.tags; track $index) {
-              <ids-chip variant="secondary">
-                {{ tag.title }}
-              </ids-chip>
-            }
+          }
         </ids-chip-group>
       </div>
     }
@@ -61,57 +61,19 @@ <h3 class="text-title-large-prominent text-ids-page-fg-surface-default">{{ data.
           @if (data.description) {
             <div
               class="text-left text-body-medium ids-page-surface"
-              [class]="data.orientation === 'horizontal' ? 'md:line-clamp-5' : 'line-clamp-3'"
+              [class]="data.card?.orientation === 'horizontal' ? 'md:line-clamp-5' : 'line-clamp-3'"
               [innerHTML]="data.description | safeHtml"
             ></div>
           }
         </div>
       </div>
-
-      @if (data.orientation === "vertical") {
+      @for (button of data.button; track $index) {
         <div class="flex gap-ids-container-gap-8 justify-end w-full">
-          <button
-            type="button"
-            idsButton
-            appearance="outlined"
-            size="compact"
-            variant="primary"
-            (click)="handleButtonClick(data.buttonOneUrl)"
-          >
-            Tovább
+          <button type="button" idsButton size="compact" variant="primary" appearance="outlined" (click)="handleButtonClick(button.url)">
+            {{ button.text }}
           </button>
         </div>
       }
-
-      @if (data.buttonOne || data.buttonTwo) {
-        <div class="flex gap-ids-container-gap-8 justify-end w-full">
-          @if (data.buttonOne) {
-            <button
-              type="button"
-              idsButton
-              appearance="outlined"
-              size="compact"
-              variant="primary"
-              (click)="handleButtonClick(data.buttonOneUrl)"
-            >
-              {{ data.buttonOne }}
-            </button>
-          }
-
-          @if (data.buttonTwo) {
-            <button
-              type="button"
-              idsButton
-              appearance="filled"
-              size="compact"
-              variant="primary"
-              (click)="handleButtonClick(data.buttonTwoUrl)"
-            >
-              {{ data.buttonTwo }}
-            </button>
-          }
-        </div>
-      }
     </div>
   </ids-card-body>
 </ids-card>
diff --git a/projects/demo/src/app/components/content-card/content-card.component.ts b/projects/demo/src/app/components/content-card/content-card.component.ts
index 4bb0754d..f0fe0fd6 100644
--- a/projects/demo/src/app/components/content-card/content-card.component.ts
+++ b/projects/demo/src/app/components/content-card/content-card.component.ts
@@ -44,7 +44,7 @@ export class ContentCardComponent  {
   }
 
   public imageData = computed(() => ({
-    transparent: this.contentCardData().imageBGTransparent === true,
+    transparent: this.contentCardData().image?.bgTransparent === true,
   }));
 
 }
diff --git a/projects/demo/src/app/model/contentCardData.ts b/projects/demo/src/app/model/contentCardData.ts
index 9235b9f9..75ad08e3 100644
--- a/projects/demo/src/app/model/contentCardData.ts
+++ b/projects/demo/src/app/model/contentCardData.ts
@@ -1,43 +1,36 @@
-export interface ContentCardData {
-  variant?: 'surface' | 'light' | 'dark';
-  id?: number;
-  orientation: 'horizontal' | 'vertical';
-  aspectRatio?: '1/1' | '16/9' | '16/10';
-  image?: {
-    lightUrl?: string;
-    darkUrl?: string;
-    caption?: string;
-    bgColorVariant?: 'surface' | 'primary' | 'light';
-    bgTransparent?: boolean;
-    filledInContainer?: boolean;
-    state?: 'no_state' | 'do' | 'dont';
+export type ContentCardData = Partial<{
+  id: number;
+  card: {
+    variant: 'surface' | 'light' | 'dark';
+    orientation: 'horizontal' | 'vertical';
+    appearance: 'filled' | 'elevated';
+    transparent: boolean;
+  }
+  isImage: boolean;
+  image: {
+    imageUrl: string;
+    aspectRatio: '1/1' | '16/9' | '16/10';
+    lightUrl: string;
+    darkUrl: string;
+    caption: string;
+    bgColorVariant: 'surface' | 'primary' | 'light';
+    bgTransparent: boolean;
+    filledInContainer: boolean;
+    state: 'no_state' | 'do' | 'dont';
   };
-  isImage?: boolean;
-  isButton?: boolean;
-  imageURL?: string;
-  imageUrlLight?: string;
-  imageUrlDark?: string;
-  imageBgColorVariant?: 'surface' | 'primary' | 'light';
-  imageCaption?: string;
-  overTitle?: string;
-  title?: string;
-  description?: string;
-  caption?: string;
-  buttonOne?: string;
-  buttonOneUrl?: string;
-  buttonTwo?: string;
-  buttonTwoUrl?: string;
-  state?: 'no_state' | 'do' | 'dont';
-  transparent?: boolean;
-  heading?: string;
-  content_heading?: string;
-  imageBGTransparent?: boolean
-  appearance?: 'filled' | 'elevated';
-  filledInContainer?: boolean;
-  last_modified?: string;
-  date?: string;
-  tags?: Array<{
-    id?: number;
-    title?: string;
+  isButton: boolean;
+  button: Array<{
+    text: string;
+    url: string;
   }>;
-}
+  title: string;
+  overTitle: string;
+  description: string;
+  content_heading: string;
+  last_modified: string;
+  date: string;
+  tags: Array<{
+    id: number;
+    title: string;
+  }>;
+}>;
diff --git a/projects/demo/src/app/pages/components/component-details/component-details.component.ts b/projects/demo/src/app/pages/components/component-details/component-details.component.ts
index 2f3b1906..c319bc27 100644
--- a/projects/demo/src/app/pages/components/component-details/component-details.component.ts
+++ b/projects/demo/src/app/pages/components/component-details/component-details.component.ts
@@ -129,31 +129,32 @@ export class ComponentDetailsComponent implements OnInit {
         blocks.push({
           type: 'card',
           id: Number(block.id),
-          orientation: block.card_properties?.card_orientation?.value ?? 'vertical',
-          variant: block.card_properties?.card_variant?.value ?? 'surface',
-          appearance: block.card_properties?.appearance?.value ?? 'filled',
-          transparent: block.card_properties?.card_bg_transparent ?? false,
-          filledInContainer: block.group_image?.filled_in_container ?? false,
-          state: block.group_image?.state?.value,
-          imageURL: block.group_image?.img_light_mode?.[0]?.url
-            ? `${environment.cmsBaseUrl}${block.group_image.img_light_mode[0].url}`
-            : '',
-          imageUrlLight: block.group_image?.img_light_mode?.[0]?.url
-            ? `${environment.cmsBaseUrl}${block.group_image.img_light_mode[0].url}`
-            : '',
-          imageUrlDark: block.group_image?.img_dark_mode?.[0]?.url
-            ? `${environment.cmsBaseUrl}${block.group_image.img_dark_mode[0].url}`
-            : '',
-          imageCaption: block.group_image?.img_caption,
-          imageBgColorVariant: block.group_image?.img_bg_color?.value ?? 'surface',
-          imageBGTransparent: block.group_image?.bg_transparent ?? false,
+          card: {
+            orientation: block.card_properties?.card_orientation?.value ?? 'vertical',
+            variant: block.card_properties?.card_variant?.value ?? 'surface',
+            appearance: block.card_properties?.appearance?.value ?? 'filled',
+            transparent: block.card_properties?.card_bg_transparent ?? false,
+          },
+          image: {
+            state: block.group_image?.state?.value ?? 'no_state',
+            aspectRatio: block.group_image?.img_aspect_ratio?.value ?? '16/9',
+            imageUrl: block.group_image?.img_light_mode?.[0]?.url ?
+              `${environment.cmsBaseUrl}${block.group_image.img_light_mode[0].url}` : '',
+            lightUrl: block.group_image?.img_light_mode?.[0]?.url ?
+              `${environment.cmsBaseUrl}${block.group_image.img_light_mode[0].url}` : '',
+            darkUrl: block.group_image?.img_dark_mode?.[0]?.url ? `${environment.cmsBaseUrl}${block.group_image.img_dark_mode[0].url}` : '',
+            caption: block.group_image?.img_caption ?? '',
+            bgColorVariant: block.group_image?.img_bg_color?.value ?? 'surface',
+            bgTransparent: block.group_image?.bg_transparent ?? false,
+            filledInContainer: block.group_image?.filled_in_container ?? false,
+          },
           overTitle: block.content?.content_over_title,
           title: block.content?.content_title,
           description: block.content?.content_description,
-          buttonOne: Array.isArray(block.button?.button) ? block.button?.button[0]?.button_label : undefined,
-          buttonOneUrl: Array.isArray(block.button?.button) ? block.button?.button[0]?.button_url : block.button?.button?.button_url,
-          buttonTwo: Array.isArray(block.button?.button) ? block.button?.button[1]?.button_label : undefined,
-          buttonTwoUrl: Array.isArray(block.button?.button) ? block.button?.button[1]?.button_url : block.button?.button?.button_url,
+          button: Array.isArray(block.button?.button) ? block.button?.button.map((btn) => ({
+            text: btn.button_label,
+            url: btn.button_url,
+          })) : [],
         });
         this.componentBlocks = blocks;
       }
diff --git a/projects/demo/src/app/pages/components/components.component.ts b/projects/demo/src/app/pages/components/components.component.ts
index c79c0a02..c421d574 100644
--- a/projects/demo/src/app/pages/components/components.component.ts
+++ b/projects/demo/src/app/pages/components/components.component.ts
@@ -134,15 +134,29 @@ export class ComponentsComponent implements OnInit {
       id: item.id,
       title: item.title,
       description: item.description,
-      orientation: 'vertical',
-      aspectRatio: '16/9',
-      appearance: 'elevated',
-      variant: 'light',
-      imageCaption: item.title,
-      imageURL: item.imageUrl,
-      imageUrlLight: item.imageUrl,
-      imageUrlDark: item.comp_img_dark_mode?.[0]?.url ? environment.cmsBaseUrl + item.comp_img_dark_mode[0].url : item.imageUrl,
-      buttonOneUrl: item.imageLink, //contains the link to the component page
+      card: {
+        orientation: 'vertical',
+        appearance: 'elevated',
+        variant: 'light',
+        transparent: false,
+      },
+      image: {
+        aspectRatio: '16/9',
+        imageUrl: item.imageUrl,
+        lightUrl: item.imageUrl,
+        darkUrl: item.comp_img_dark_mode?.[0]?.url ? `${environment.cmsBaseUrl}${item.comp_img_dark_mode[0].url}` : item.imageUrl,
+        caption: item.title,
+        bgColorVariant: 'surface',
+        bgTransparent: false,
+        filledInContainer: false,
+        state: 'no_state',
+      },
+      button: [
+        {
+          text: 'Learn More',
+          url: item.imageLink ?? '',
+        },
+      ],
     };
   }
 }
diff --git a/projects/demo/src/app/pages/index/index.component.ts b/projects/demo/src/app/pages/index/index.component.ts
index aaa17d49..76b23612 100644
--- a/projects/demo/src/app/pages/index/index.component.ts
+++ b/projects/demo/src/app/pages/index/index.component.ts
@@ -80,32 +80,36 @@ export class IndexComponent implements OnInit, OnDestroy {
           blocks.push({
             type: 'card',
             id: Number(block.id),
-            orientation: block.card_properties?.card_orientation?.value ?? 'vertical',
-            variant: block.card_properties?.card_variant?.value ?? 'surface',
-            appearance: block.card_properties?.appearance?.value ?? 'filled',
-            transparent: block.card_properties?.card_bg_transparent ?? false,
-            filledInContainer: block.group_image?.filled_in_container ?? false,
-            state: block.group_image?.state?.value,
-            imageURL: block.group_image?.img_light_mode?.[0]?.url
-              ? `${environment.cmsBaseUrl}${block.group_image.img_light_mode[0].url}`
-              : '',
-            imageUrlLight: block.group_image?.img_light_mode?.[0]?.url
-              ? `${environment.cmsBaseUrl}${block.group_image.img_light_mode[0].url}`
-              : '',
-            imageUrlDark: block.group_image?.img_dark_mode?.[0]?.url
-              ? `${environment.cmsBaseUrl}${block.group_image.img_dark_mode[0].url}`
-              : '',
-            imageCaption: block.group_image?.img_caption,
-            imageBgColorVariant: block.group_image?.img_bg_color?.value ?? 'surface',
-            imageBGTransparent: block.group_image?.bg_transparent ?? false,
-            aspectRatio: block.group_image?.img_aspect_ratio?.value ?? '16/9',
+            card: {
+              orientation: block.card_properties?.card_orientation?.value ?? 'vertical',
+              variant: block.card_properties?.card_variant?.value ?? 'surface',
+              appearance: block.card_properties?.appearance?.value ?? 'filled',
+              transparent: block.card_properties?.card_bg_transparent ?? false,
+            },
+            image: {
+              aspectRatio: block.group_image?.img_aspect_ratio?.value ?? '16/9',
+              imageUrl: block.group_image?.img_light_mode?.[0]?.url ?
+                `${environment.cmsBaseUrl}${block.group_image.img_light_mode[0].url}` : '',
+              lightUrl: block.group_image?.img_light_mode?.[0]?.url
+                ? `${environment.cmsBaseUrl}${block.group_image.img_light_mode[0].url}`
+                : '',
+              darkUrl: block.group_image?.img_dark_mode?.[0]?.url
+                ? `${environment.cmsBaseUrl}${block.group_image.img_dark_mode[0].url}`
+                : '',
+              caption: block.group_image?.img_caption ?? '',
+              bgColorVariant: block.group_image?.img_bg_color?.value ?? 'surface',
+              bgTransparent: block.group_image?.bg_transparent ?? false,
+              filledInContainer: block.group_image?.filled_in_container ?? false,
+              state: block.group_image?.state?.value ?? 'no_state',
+            },
             overTitle: block.content?.content_over_title,
             title: block.content?.content_title,
             description: block.content?.content_description,
-            buttonOne: Array.isArray(block.button?.button) ? block.button?.button[0]?.button_label : undefined,
-            buttonOneUrl: Array.isArray(block.button?.button) ? block.button?.button[0]?.button_url : block.button?.button?.button_url,
-            buttonTwo: Array.isArray(block.button?.button) ? block.button?.button[1]?.button_label : undefined,
-            buttonTwoUrl: Array.isArray(block.button?.button) ? block.button?.button[1]?.button_url : block.button?.button?.button_url,
+            button: Array.isArray(block.button?.button) ? block.button?.button.map((btn) => ({
+              text: btn.button_label,
+              url: btn.button_url,
+            })) : [],
+
           });
         }
       }
diff --git a/projects/demo/src/app/pages/issue-report/issue-report.component.ts b/projects/demo/src/app/pages/issue-report/issue-report.component.ts
index fc779d9e..aa100607 100644
--- a/projects/demo/src/app/pages/issue-report/issue-report.component.ts
+++ b/projects/demo/src/app/pages/issue-report/issue-report.component.ts
@@ -84,32 +84,36 @@ export class IssueReportComponent implements OnInit, OnDestroy {
           blocks.push({
             type: 'card',
             id: Number(block.id),
-            orientation: block.card_properties?.card_orientation?.value ?? 'vertical',
-            variant: block.card_properties?.card_variant?.value ?? 'surface',
-            appearance: block.card_properties?.appearance?.value ?? 'filled',
-            transparent: block.card_properties?.card_bg_transparent ?? false,
-            filledInContainer: block.group_image?.filled_in_container ?? false,
-            state: block.group_image?.state?.value,
-            imageURL: block.group_image?.img_light_mode?.[0]?.url
-              ? `${environment.cmsBaseUrl}${block.group_image.img_light_mode[0].url}`
-              : '',
-            imageUrlLight: block.group_image?.img_light_mode?.[0]?.url
-              ? `${environment.cmsBaseUrl}${block.group_image.img_light_mode[0].url}`
-              : '',
-            imageUrlDark: block.group_image?.img_dark_mode?.[0]?.url
-              ? `${environment.cmsBaseUrl}${block.group_image.img_dark_mode[0].url}`
-              : '',
-            imageCaption: block.group_image?.img_caption,
-            imageBgColorVariant: block.group_image?.img_bg_color?.value ?? 'surface',
-            imageBGTransparent: block.group_image?.bg_transparent ?? false,
-            aspectRatio: block.group_image?.img_aspect_ratio?.value ?? '16/9',
+            card: {
+              orientation: block.card_properties?.card_orientation?.value ?? 'vertical',
+              variant: block.card_properties?.card_variant?.value ?? 'surface',
+              appearance: block.card_properties?.appearance?.value ?? 'filled',
+              transparent: block.card_properties?.card_bg_transparent ?? false,
+            },
+            image: {
+              imageUrl: block.group_image?.img_light_mode?.[0]?.url
+                ? `${environment.cmsBaseUrl}${block.group_image.img_light_mode[0].url}`
+                : '',
+              lightUrl: block.group_image?.img_light_mode?.[0]?.url
+                ? `${environment.cmsBaseUrl}${block.group_image.img_light_mode[0].url}`
+                : '',
+              darkUrl: block.group_image?.img_dark_mode?.[0]?.url
+                ? `${environment.cmsBaseUrl}${block.group_image.img_dark_mode[0].url}`
+                : '',
+              caption: block.content?.content_title,
+              bgColorVariant: block.group_image?.img_bg_color?.value ?? 'surface',
+              bgTransparent: block.group_image?.bg_transparent ?? false,
+              filledInContainer: block.group_image?.filled_in_container ?? false,
+              aspectRatio: block.group_image?.img_aspect_ratio?.value ?? '16/9',
+              state: block.group_image?.state?.value ?? 'no_state',
+            },
             overTitle: block.content?.content_over_title,
             title: block.content?.content_title,
             description: block.content?.content_description,
-            buttonOne: Array.isArray(block.button?.button) ? block.button?.button[0]?.button_label : undefined,
-            buttonOneUrl: Array.isArray(block.button?.button) ? block.button?.button[0]?.button_url : block.button?.button?.button_url,
-            buttonTwo: Array.isArray(block.button?.button) ? block.button?.button[1]?.button_label : undefined,
-            buttonTwoUrl: Array.isArray(block.button?.button) ? block.button?.button[1]?.button_url : block.button?.button?.button_url,
+            button: Array.isArray(block.button?.button) ? block.button?.button.map((btn) => ({
+              text: btn.button_label,
+              url: btn.button_url,
+            })) : [],
           });
         }
       }
diff --git a/projects/demo/src/app/pages/list-page/list-page.component.ts b/projects/demo/src/app/pages/list-page/list-page.component.ts
index edecac71..bd3991da 100644
--- a/projects/demo/src/app/pages/list-page/list-page.component.ts
+++ b/projects/demo/src/app/pages/list-page/list-page.component.ts
@@ -100,7 +100,6 @@ export class ListPageComponent implements OnInit {
 
       this._loadData(collection, typeName, slug);
     });
-
   }
 
   private _loadData(collection: string, typeName: string, slug: string): void {
@@ -132,8 +131,8 @@ export class ListPageComponent implements OnInit {
                     imageLink: entryItem.slug ? `/${slug}/${entryItem.slug}` : '',
                     last_modified: entryItem.last_modified,
                     date: entryItem.date,
-                    tags: entryItem.tags?.filter((tag): tag is { id: number; title: string } =>
-                      tag.id !== undefined && tag.title !== undefined,
+                    tags: entryItem.tags?.filter(
+                      (tag): tag is { id: number; title: string } => tag.id !== undefined && tag.title !== undefined,
                     ),
                   });
                 }
@@ -161,7 +160,6 @@ export class ListPageComponent implements OnInit {
   }
 
   private _generateTypeName(collection: string): string {
-
     const pascalCaseCollection = collection
       .split('-')
       .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
@@ -180,17 +178,31 @@ export class ListPageComponent implements OnInit {
   public transformToCardData(item: ContentData): ContentCardData {
     return {
       id: item.id,
+      card: {
+        orientation: 'vertical',
+        appearance: 'elevated',
+        variant: 'light',
+        transparent: false,
+      },
+      image: {
+        imageUrl: item.imageUrl ?? '',
+        aspectRatio: '16/9',
+        lightUrl: item.imageUrl ?? '',
+        darkUrl: item.comp_img_dark_mode?.[0]?.url ? `${environment.cmsBaseUrl}${item.comp_img_dark_mode[0].url}` : item.imageUrl ?? '',
+        caption: item.title ?? '',
+        bgColorVariant: 'surface',
+        bgTransparent: false,
+        filledInContainer: false,
+        state: 'no_state',
+      },
+      button: [
+        {
+          text: 'Tovább',
+          url: item.imageLink ?? '',
+        },
+      ],
       title: item.title,
       description: item.description,
-      orientation: 'vertical',
-      aspectRatio: '16/9',
-      appearance: 'elevated',
-      variant: 'light',
-      imageCaption: item.title,
-      imageURL: item.imageUrl,
-      imageUrlLight: item.imageUrl,
-      imageUrlDark: item.comp_img_dark_mode?.[0]?.url ? `${environment.cmsBaseUrl}${item.comp_img_dark_mode[0].url}` : item.imageUrl,
-      buttonOneUrl: item.imageLink,
       last_modified: item.last_modified,
       date: item.date,
       tags: item.tags,

From e46299e30941bc0d01661c77a2906d9bbbbd67b9 Mon Sep 17 00:00:00 2001
From: Pipicz Petra <ppipicz24@gmail.com>
Date: Wed, 8 Apr 2026 14:10:29 +0200
Subject: [PATCH 2/2] replace buttons

---
 .../list-page/content-page/content-page.component.html | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/projects/demo/src/app/pages/list-page/content-page/content-page.component.html b/projects/demo/src/app/pages/list-page/content-page/content-page.component.html
index 5f5af167..e9fa90f9 100644
--- a/projects/demo/src/app/pages/list-page/content-page/content-page.component.html
+++ b/projects/demo/src/app/pages/list-page/content-page/content-page.component.html
@@ -36,14 +36,10 @@ <h3 idsCardSubtitle>{{ block.overTitle }}</h3>
                     <div class="text-justify" [innerHTML]="block.description"></div>
                     @if(block.isButton){
                       <ids-button-group>
-                        <button type="button" idsButton appearance="filled" variant="primary" (click)="handleButtonClick(block.buttonOneUrl)"> 
-                          {{ block.buttonOne }}
+                        @for(button of block.button; track $index){
+                        <button type="button" idsButton appearance="filled" variant="primary" (click)="handleButtonClick(button.url)"> 
+                          {{ button.text }}
                         </button>
-                          @if(block.buttonTwo){
-                            <button type="button" idsButton appearance="filled" variant="primary" (click)="handleButtonClick(block.buttonTwoUrl)">
-                            {{ block.buttonTwo }}
-
-                          </button>
                         }
                       </ids-button-group>
                     }