Default Page implementation

Author: Sharma

packages/angular-sdk-components/src/lib/_bridge/helpers/sdk-pega-component-map.ts

@@ -57,6 +57,7 @@ import { CaseViewComponent } from '../../_components/template/case-view/case-vie
 import { ConfirmationComponent } from '../../_components/template/confirmation/confirmation.component';
 import { DataReferenceComponent } from '../../_components/template/data-reference/data-reference.component';
 import { DefaultFormComponent } from '../../_components/template/default-form/default-form.component';
+import { DefaultPageComponent } from '../../_components/template/default-page/default-page.component';
 import { DetailsComponent } from '../../_components/template/details/details.component';
 import { DetailsNarrowWideComponent } from '../../_components/template/details-narrow-wide/details-narrow-wide.component';
 import { DetailsOneColumnComponent } from '../../_components/template/details-one-column/details-one-column.component';
@@ -162,6 +163,7 @@ const pegaSdkComponentMap = {
   DateTime: DateTimeComponent,
   Decimal: DecimalComponent,
   DefaultForm: DefaultFormComponent,
+  DefaultPage: DefaultPageComponent,
   DeferLoad: DeferLoadComponent,
   Details: DetailsComponent,
   DetailsFields: MaterialDetailsFieldsComponent,

packages/angular-sdk-components/src/lib/_components/designSystemExtension/banner/banner.component.scss

@@ -6,13 +6,21 @@
   align-items: start;
 }
 
+.psdk-grid-filter-2 {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  column-gap: calc(2 * 0.5rem);
+  row-gap: calc(2 * 0.5rem);
+  align-items: start;
+}
+
 .psdk-grid-filter-wide-narrow {
   display: grid;
   grid-template-columns: 7fr 3fr;
   column-gap: calc(2 * 0.5rem);
   row-gap: calc(2 * 0.5rem);
   align-items: start;
-  padding: 1rem;
+  // padding: 1rem;
 }
 
 .psdk-grid-filter-narrow-wide {

packages/angular-sdk-components/src/lib/_components/designSystemExtension/wss-quick-create/wss-quick-create.component.scss

@@ -1,7 +1,11 @@
+.wss-quick-create-header {
+  background-color: var(--mat-sys-surface-container);
+}
+
 .quick-link-ul-list {
   list-style: none;
   padding: 0;
-  grid-template-columns: repeat(auto-fill, minmax(min(40ch, 100%), 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(min(20ch, 100%), 1fr));
   display: grid;
   gap: calc(1rem);
 }

packages/angular-sdk-components/src/lib/_components/template/default-page/default-page.component.html

@@ -0,0 +1,36 @@
+<div *ngIf="enableBanner$; else nonBannerMode">
+  <component-mapper
+    name="Banner"
+    [props]="{
+      configProps$,
+      arChildren$,
+      title: heading,
+      message,
+      backgroundImage,
+      layout$
+    }"
+  ></component-mapper>
+</div>
+
+<ng-template #nonBannerMode>
+  <div>
+    <h1 *ngIf="title">{{ title }}</h1>
+    <p *ngIf="heading">{{ heading }}</p>
+    <div
+      [ngClass]="{
+        'psdk-grid-filter-1': this.layout$ === 'one-column',
+        'psdk-grid-filter-2': this.layout$ === 'two-column',
+        'psdk-grid-filter-wide-narrow': this.layout$ === 'wide-narrow',
+        'psdk-grid-filter-narrow-wide': this.layout$ === 'narrow-wide'
+      }"
+    >
+      <div>
+        <component-mapper
+          *ngFor="let child of arChildren$"
+          [name]="child.getPConnect().getComponentName()"
+          [props]="{ pConn$: child.getPConnect() }"
+        ></component-mapper>
+      </div>
+    </div>
+  </div>
+</ng-template>

packages/angular-sdk-components/src/lib/_components/template/default-page/default-page.component.scss

@@ -0,0 +1,31 @@
+.psdk-grid-filter-1 {
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  column-gap: calc(2 * 0.5rem);
+  row-gap: calc(2 * 0.5rem);
+  align-items: start;
+}
+
+.psdk-grid-filter-2 {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  column-gap: calc(2 * 0.5rem);
+  row-gap: calc(2 * 0.5rem);
+  align-items: start;
+}
+
+.psdk-grid-filter-wide-narrow {
+  display: grid;
+  grid-template-columns: 7fr 3fr;
+  column-gap: calc(2 * 0.5rem);
+  row-gap: calc(2 * 0.5rem);
+  align-items: start;
+}
+
+.psdk-grid-filter-narrow-wide {
+  display: grid;
+  grid-template-columns: 3fr 7fr;
+  column-gap: calc(2 * 0.5rem);
+  row-gap: calc(2 * 0.5rem);
+  align-items: start;
+}

packages/angular-sdk-components/src/lib/_components/template/default-page/default-page.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { DefaultPageComponent } from './default-page.component';
+
+describe('DefaultPageComponent', () => {
+  let component: DefaultPageComponent;
+  let fixture: ComponentFixture<DefaultPageComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [DefaultPageComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DefaultPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

packages/angular-sdk-components/src/lib/_components/template/default-page/default-page.component.ts

@@ -0,0 +1,65 @@
+import { Component, OnInit, Input, forwardRef, OnChanges, SimpleChanges } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReferenceComponent } from '../../infra/reference/reference.component';
+import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
+
+interface DefaultPageProps {
+  // If any, enter additional props that only exist on this component
+  layout?: string;
+  title?: string;
+  heading?: string;
+  message?: string;
+  backgroundImage?: string;
+  enableBanner?: boolean;
+}
+
+@Component({
+  selector: 'app-default-page',
+  templateUrl: './default-page.component.html',
+  styleUrls: ['./default-page.component.scss'],
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class DefaultPageComponent implements OnInit, OnChanges {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: any;
+
+  configProps$: DefaultPageProps;
+  arChildren$: any[];
+  title?: string;
+  heading: any;
+  message?: string;
+  backgroundImage?: string;
+  layout$?: string;
+  enableBanner$?: boolean;
+
+  constructor() {
+    this.backgroundImage = this.configProps$?.backgroundImage;
+  }
+
+  ngOnInit() {
+    // console.log(`ngOnInit (no registerAndSubscribe!): Region`);
+    this.backgroundImage = this.configProps$?.backgroundImage;
+    this.updateSelf();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    const { pConn$ } = changes;
+    this.backgroundImage = this.configProps$?.backgroundImage;
+
+    if (pConn$.previousValue && pConn$.previousValue !== pConn$.currentValue) {
+      this.updateSelf();
+    }
+  }
+
+  updateSelf() {
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as DefaultPageProps;
+
+    this.layout$ = this.configProps$.layout;
+    this.heading = this.configProps$.heading;
+    this.message = this.configProps$.message;
+    this.backgroundImage = this.configProps$.backgroundImage;
+    this.enableBanner$ = this.configProps$.enableBanner;
+
+    this.arChildren$ = ReferenceComponent.normalizePConnArray(this.pConn$.getChildren());
+  }
+}

packages/angular-sdk-components/src/lib/_components/widget/todo/todo.component.scss

@@ -13,8 +13,8 @@
   padding: 1rem;
   background-color: var(--mat-sys-surface-container);
   border-radius: 0.6125rem;
-  border-left: 6px solid;
-  border-left-color: var(--mat-sys-primary);
+  // border-left: 6px solid;
+  // border-left-color: var(--mat-sys-primary);
 }
 
 .psdk-todo-header {