From a16873f1a11c7c499edf4aab4e80dfec1d5c798d Mon Sep 17 00:00:00 2001
From: Pipicz Petra <ppipicz24@gmail.com>
Date: Mon, 20 Jul 2026 16:41:55 +0200
Subject: [PATCH] feat(generated-contents): add condition: if tags or date are
 not available, the chips not appear

---
 .../content-card/content-card.component.html  |  6 +-
 .../content-hero/content-hero.component.html  | 56 +++++++++++--------
 .../pages/list-page/list-page.component.html  | 32 ++++++-----
 3 files changed, 54 insertions(+), 40 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 8e95fcaf..500fe733 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
@@ -10,7 +10,7 @@
   @if (data.image?.imageUrl) {
     <div class="ids-container-gap-24 relative" [class]="data.card?.orientation === 'horizontal' ? ' md:w-full ' : ''">
       @if (data.image?.state) {
-        <app-badge class="absolute" [state]="data.image?.state"/>
+        <app-badge class="absolute" [state]="data.image?.state" />
       }
       <app-image
         [aspectRatio]="data.image?.aspectRatio"
@@ -35,7 +35,7 @@
         : ''
     "
   >
-    @if (data.date || data.tags) {
+    @if (data.date || (data.tags?.length ?? 0) > 0) {
       <div class="flex items-center gap-ids-container-gap-8">
         <ids-chip-group appearance="outlined" size="dense">
           <ids-chip variant="primary">
@@ -62,7 +62,7 @@ <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 [&_ol]:list-decimal [&_ul]:list-disc [&_ol]:pl-5 [&_ul]:pl-5"
-              [class]="(data.card?.orientation === 'horizontal' || fullDescription()) ? '' : 'line-clamp-3'"
+              [class]="data.card?.orientation === 'horizontal' || fullDescription() ? '' : 'line-clamp-3'"
               [innerHTML]="data.description | safeHtml"
             ></div>
           }
diff --git a/projects/demo/src/app/components/content-hero/content-hero.component.html b/projects/demo/src/app/components/content-hero/content-hero.component.html
index 3d148bde..c705f5f5 100644
--- a/projects/demo/src/app/components/content-hero/content-hero.component.html
+++ b/projects/demo/src/app/components/content-hero/content-hero.component.html
@@ -7,40 +7,52 @@
     <div class="size-60 absolute glassy-bg-on-light-lighter translate-y-36 translate-x-[366px] z-10 rounded-full"></div>
   </div>
 
-  <button idsButton type="button" appearance="text" variant="secondary" showLeadingElement="true" class="absolute top-4 left-8" [routerLink]="['..']">
+  <button
+    idsButton
+    type="button"
+    appearance="text"
+    variant="secondary"
+    showLeadingElement="true"
+    class="absolute top-4 left-8"
+    [routerLink]="['..']"
+  >
     <ids-icon icon-leading fontIcon="arrow-back" sizeCollection="big" />
     Back
   </button>
 
-  <div class="flex flex-col items-center w-full max-w-[1106px] px-4 sm:px-8 gap-4 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
-    <ids-chip-group appearance="outlined" size="dense">
-      <ids-chip variant="primary">
-        {{ heroData().date }}
-      </ids-chip>
-      @for (tag of heroData().tags; track $index) {
-        <ids-chip variant="secondary">
-          {{ typeof tag === "string" ? tag : tag.title }}
+  <div
+    class="flex flex-col items-center w-full max-w-[1106px] px-4 sm:px-8 gap-4 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+  >
+    @if (heroData().date || (heroData().tags?.length ?? 0) > 0) {
+      <ids-chip-group appearance="outlined" size="dense">
+        <ids-chip variant="primary">
+          {{ heroData().date }}
         </ids-chip>
-      }
-    </ids-chip-group>
+        @for (tag of heroData().tags; track $index) {
+          <ids-chip variant="secondary">
+            {{ typeof tag === "string" ? tag : tag.title }}
+          </ids-chip>
+        }
+      </ids-chip-group>
+    }
 
     <h1 class="text-display-medium-prominent uppercase text-center">{{ heroData().title }}</h1>
 
     <ids-divider size="spacious" variant="surface" width="50%" />
-    
-    <div class="flex items-start gap-4">
-      <div class="flex justify-center gap-2 items-start">
-        <div class="flex max-w-[191px] items-center gap-3">
-          <ids-avatar size="dense" sizeCollection="big">
-            <ids-icon fontIcon="account-circle" />
-          </ids-avatar>
+    @if (heroData().writtenBy) {
+      <div class="flex items-start gap-4">
+        <div class="flex justify-center gap-2 items-start">
+          <div class="flex max-w-[191px] items-center gap-3">
+            <ids-avatar size="dense" sizeCollection="big">
+              <ids-icon fontIcon="account-circle" />
+            </ids-avatar>
 
-          <div class="flex flex-col items-start">
-            <span class="text-sm font-medium text-on-surface">{{ heroData().writtenBy }}</span>
+            <div class="flex flex-col items-start">
+              <span class="text-sm font-medium text-on-surface">{{ heroData().writtenBy }}</span>
+            </div>
           </div>
         </div>
       </div>
-
-    </div>
+    }
   </div>
 </div>
diff --git a/projects/demo/src/app/pages/list-page/list-page.component.html b/projects/demo/src/app/pages/list-page/list-page.component.html
index c1160569..f52a0820 100644
--- a/projects/demo/src/app/pages/list-page/list-page.component.html
+++ b/projects/demo/src/app/pages/list-page/list-page.component.html
@@ -1,23 +1,25 @@
 <div class="flex flex-col gap-16">
   <app-hero [heroData]="heroData()" />
-  <div class="flex justify-center items-center self-stretch gap-3">
-    <ids-chip-group appearance="outlined" size="compact">
-      <button idsChip type="button" appearance="outlined" size="compact" variant="secondary" (click)="onFilterChange('All')">
-        @if (selectedTag() === "All") {
-          <ids-icon fontIcon="done" />
-        }
-        All
-      </button>
-      @for (tag of availableTags(); track tag) {
-        <button idsChip type="button" appearance="outlined" size="compact" variant="secondary" (click)="onFilterChange(tag)">
-          @if (selectedTag() === tag) {
+  @if (availableTags().length > 0) {
+    <div class="flex justify-center items-center self-stretch gap-3">
+      <ids-chip-group appearance="outlined" size="compact">
+        <button idsChip type="button" appearance="outlined" size="compact" variant="secondary" (click)="onFilterChange('All')">
+          @if (selectedTag() === "All") {
             <ids-icon fontIcon="done" />
           }
-          {{ tag }}
+          All
         </button>
-      }
-    </ids-chip-group>
-  </div>
+        @for (tag of availableTags(); track tag) {
+          <button idsChip type="button" appearance="outlined" size="compact" variant="secondary" (click)="onFilterChange(tag)">
+            @if (selectedTag() === tag) {
+              <ids-icon fontIcon="done" />
+            }
+            {{ tag }}
+          </button>
+        }
+      </ids-chip-group>
+    </div>
+  }
   <!-- Debug output for componentDatas -->
   <div class="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
     @for (contentData of paginatedContentDatas(); track $index) {