From cd1f3dd8b1eacf6d950faa69d870956db9401c21 Mon Sep 17 00:00:00 2001 From: sambhu Date: Tue, 9 Dec 2025 15:35:31 +0530 Subject: [PATCH 1/4] Updated the files for the padding change and styles --- .../carousel/carousel.component.scss | 19 ++++++++++--------- .../list-view/list-view.component.html | 12 +++--------- .../list-view/list-view.component.scss | 10 +++++++++- .../list-view/list-view.component.ts | 3 +-- 4 files changed, 23 insertions(+), 21 deletions(-) diff --git a/src/app/_samples/mediaco/components/carousel/carousel.component.scss b/src/app/_samples/mediaco/components/carousel/carousel.component.scss index a994a019..999949ec 100644 --- a/src/app/_samples/mediaco/components/carousel/carousel.component.scss +++ b/src/app/_samples/mediaco/components/carousel/carousel.component.scss @@ -1,11 +1,11 @@ -:host { - display: block; - width: 100%; - min-width: 0; - max-width: 100vw; - overflow: hidden; - contain: content; -} +// :host { +// display: block; +// width: 100%; +// min-width: 0; +// max-width: 100vw; +// overflow: hidden; +// contain: content; +// } .carousel-host-container { width: 100%; @@ -13,6 +13,7 @@ overflow: hidden; display: flex; flex-direction: column; + // padding: 20px 25px; } .header { @@ -34,13 +35,13 @@ align-items: center; width: 100%; max-width: 100%; - height: 400px; padding: 0; overflow-x: auto; overflow-y: hidden; scroll-behavior: auto; box-sizing: border-box; box-sizing: border-box; + border-radius: 12px; &::-webkit-scrollbar { display: none; diff --git a/src/app/_samples/mediaco/components/list-view/list-view.component.html b/src/app/_samples/mediaco/components/list-view/list-view.component.html index 65b49b94..83760b5c 100644 --- a/src/app/_samples/mediaco/components/list-view/list-view.component.html +++ b/src/app/_samples/mediaco/components/list-view/list-view.component.html @@ -32,18 +32,12 @@

{{ title }}

- -
- -
-
- -
+
+
+ Show All
diff --git a/src/app/_samples/mediaco/components/list-view/list-view.component.scss b/src/app/_samples/mediaco/components/list-view/list-view.component.scss index c9a76ff2..bd4701b7 100644 --- a/src/app/_samples/mediaco/components/list-view/list-view.component.scss +++ b/src/app/_samples/mediaco/components/list-view/list-view.component.scss @@ -203,6 +203,14 @@ $primary-purple: #9c27b0; display: flex; width: 100%; justify-content: flex-end; - padding: 0 16px 10px 16px; + padding: 10px 0 10px 16px; /* Right padding removed */ box-sizing: border-box; + text-decoration: none; + color: rgb(103, 80, 164); /* Color updated */ +} + +/* This applies when you hover your mouse over the link */ +.carousel-footer:hover { + cursor: pointer; + text-decoration: underline; } diff --git a/src/app/_samples/mediaco/components/list-view/list-view.component.ts b/src/app/_samples/mediaco/components/list-view/list-view.component.ts index fb76623d..236a2aaf 100644 --- a/src/app/_samples/mediaco/components/list-view/list-view.component.ts +++ b/src/app/_samples/mediaco/components/list-view/list-view.component.ts @@ -5,7 +5,6 @@ import { Utils } from '@pega/angular-sdk-components'; import { CarouselComponent } from '../carousel/carousel.component'; import { GalleryGridComponent } from '../gallery-grid/gallery-grid.component'; import { MatDialog } from '@angular/material/dialog'; -import { MatButton } from '@angular/material/button'; interface ListViewProps { inheritedProps: any; @@ -31,7 +30,7 @@ interface ListViewProps { @Component({ selector: 'app-list-view', - imports: [CommonModule, CarouselComponent, MatButton], + imports: [CommonModule, CarouselComponent], templateUrl: './list-view.component.html', styleUrl: './list-view.component.scss', providers: [Utils] From a807fcc797fe8d1b9307548ada8e58e1680225a0 Mon Sep 17 00:00:00 2001 From: sambhu Date: Tue, 9 Dec 2025 16:31:56 +0530 Subject: [PATCH 2/4] removed comments --- .../mediaco/components/carousel/carousel.component.scss | 9 --------- 1 file changed, 9 deletions(-) diff --git a/src/app/_samples/mediaco/components/carousel/carousel.component.scss b/src/app/_samples/mediaco/components/carousel/carousel.component.scss index 999949ec..c3a6a0fc 100644 --- a/src/app/_samples/mediaco/components/carousel/carousel.component.scss +++ b/src/app/_samples/mediaco/components/carousel/carousel.component.scss @@ -1,12 +1,3 @@ -// :host { -// display: block; -// width: 100%; -// min-width: 0; -// max-width: 100vw; -// overflow: hidden; -// contain: content; -// } - .carousel-host-container { width: 100%; position: relative; From 8396bc30e0ed49d60275030ff02e7ad832a00a6b Mon Sep 17 00:00:00 2001 From: sambhu Date: Tue, 9 Dec 2025 16:48:39 +0530 Subject: [PATCH 3/4] Removed comments and added changes to run OOTB Listview --- sdk-local-component-map.ts | 4 +- .../carousel/carousel.component.scss | 1 - .../components/carousel/carousel.component.ts | 1 - .../list-view/list-view.component.html | 71 ++++++++++--------- .../list-view/list-view.component.ts | 13 ++-- 5 files changed, 47 insertions(+), 43 deletions(-) diff --git a/sdk-local-component-map.ts b/sdk-local-component-map.ts index 8c5347e3..ba79f7be 100644 --- a/sdk-local-component-map.ts +++ b/sdk-local-component-map.ts @@ -1,13 +1,13 @@ // Statically load all "local" components that aren't yet in the npm package -// import sdkMediaCoComponentMap from './src/app/_samples/mediaco/sdk-mediaco-component-map'; +import sdkMediaCoComponentMap from './src/app/_samples/mediaco/sdk-mediaco-component-map'; /* import end - DO NOT REMOVE */ // localSdkComponentMap is the JSON object where we'll store the components that are // found locally. If not found here, we'll look in the Pega-provided component map const localSdkComponentMap = { - // ...sdkMediaCoComponentMap + ...sdkMediaCoComponentMap /* map end - DO NOT REMOVE */ }; diff --git a/src/app/_samples/mediaco/components/carousel/carousel.component.scss b/src/app/_samples/mediaco/components/carousel/carousel.component.scss index c3a6a0fc..3b689750 100644 --- a/src/app/_samples/mediaco/components/carousel/carousel.component.scss +++ b/src/app/_samples/mediaco/components/carousel/carousel.component.scss @@ -4,7 +4,6 @@ overflow: hidden; display: flex; flex-direction: column; - // padding: 20px 25px; } .header { diff --git a/src/app/_samples/mediaco/components/carousel/carousel.component.ts b/src/app/_samples/mediaco/components/carousel/carousel.component.ts index 26da720b..fb75ac21 100644 --- a/src/app/_samples/mediaco/components/carousel/carousel.component.ts +++ b/src/app/_samples/mediaco/components/carousel/carousel.component.ts @@ -16,7 +16,6 @@ import { MatButtonModule } from '@angular/material/button'; import { MatCardModule } from '@angular/material/card'; import { MatDialog } from '@angular/material/dialog'; import { MatIconModule } from '@angular/material/icon'; -// import { GalleryGridComponent } from '../gallery-grid/gallery-grid.component'; @Component({ selector: 'app-carousel', diff --git a/src/app/_samples/mediaco/components/list-view/list-view.component.html b/src/app/_samples/mediaco/components/list-view/list-view.component.html index 83760b5c..50426e5a 100644 --- a/src/app/_samples/mediaco/components/list-view/list-view.component.html +++ b/src/app/_samples/mediaco/components/list-view/list-view.component.html @@ -1,43 +1,46 @@ -
-
-
-

{{ title }}

-
+ + +
+
+
+

{{ title }}

+
+
-
-
-
-
-
- - {{ item.number }} -
+
+
+
+
+ + {{ item.number }} +
-
-
- {{ item.title }} - - {{ item.title_subtext }} +
+
+ {{ item.title }} + + {{ item.title_subtext }} +
+
+ {{ item.description }} + + {{ item.description_subtext }} +
-
- {{ item.description }} - - {{ item.description_subtext }} +
+   + {{ item.rating }}
-
-   - {{ item.rating }} -
-
-
-
- +
+
+ +
+
+
+ Show All
-
-
- Show All -
+ diff --git a/src/app/_samples/mediaco/components/list-view/list-view.component.ts b/src/app/_samples/mediaco/components/list-view/list-view.component.ts index 236a2aaf..2bd97369 100644 --- a/src/app/_samples/mediaco/components/list-view/list-view.component.ts +++ b/src/app/_samples/mediaco/components/list-view/list-view.component.ts @@ -1,7 +1,6 @@ import { Component, OnInit, Input } from '@angular/core'; import { CommonModule } from '@angular/common'; -// import { Utils } from '@pega/angular-sdk-components/src/public-api'; -import { Utils } from '@pega/angular-sdk-components'; +import { Utils, ListViewComponent as OOTBListViewComponent } from '@pega/angular-sdk-components'; import { CarouselComponent } from '../carousel/carousel.component'; import { GalleryGridComponent } from '../gallery-grid/gallery-grid.component'; import { MatDialog } from '@angular/material/dialog'; @@ -29,8 +28,8 @@ interface ListViewProps { } @Component({ - selector: 'app-list-view', - imports: [CommonModule, CarouselComponent], + selector: 'mediaco-list-view', + imports: [CommonModule, CarouselComponent, OOTBListViewComponent], templateUrl: './list-view.component.html', styleUrl: './list-view.component.scss', providers: [Utils] @@ -38,7 +37,7 @@ interface ListViewProps { export class ListViewComponent implements OnInit { @Input() pConn$: typeof PConnect; @Input() bInForm$ = true; - @Input() payload; + configProps$: ListViewProps; template: string; sourceList: any[]; @@ -113,6 +112,10 @@ export class ListViewComponent implements OnInit { } } + get isFromCaseView() { + return !['D_AccountHistoryList', 'D_TrendingItemsList', 'D_CarouselitemList'].includes(this.referenceDataPage); + } + getIcon(activityType: string): string { switch (activityType) { case 'Plan Upgrade': From 70430a6fea6e48f39c1006186ec18149745f9abe Mon Sep 17 00:00:00 2001 From: sambhu Date: Tue, 9 Dec 2025 17:41:48 +0530 Subject: [PATCH 4/4] removing sdk local map --- sdk-local-component-map.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/sdk-local-component-map.ts b/sdk-local-component-map.ts index ba79f7be..8c5347e3 100644 --- a/sdk-local-component-map.ts +++ b/sdk-local-component-map.ts @@ -1,13 +1,13 @@ // Statically load all "local" components that aren't yet in the npm package -import sdkMediaCoComponentMap from './src/app/_samples/mediaco/sdk-mediaco-component-map'; +// import sdkMediaCoComponentMap from './src/app/_samples/mediaco/sdk-mediaco-component-map'; /* import end - DO NOT REMOVE */ // localSdkComponentMap is the JSON object where we'll store the components that are // found locally. If not found here, we'll look in the Pega-provided component map const localSdkComponentMap = { - ...sdkMediaCoComponentMap + // ...sdkMediaCoComponentMap /* map end - DO NOT REMOVE */ };