@pega/angular-sdk-overrides 0.23.1

package/lib/template/simple-table-select/simple-table-select.component.html

@@ -0,0 +1,14 @@
+<div *ngIf="showSimpleTableManual">
+  <component-mapper name="SimpleTable" [props]="{ formGroup$, pConn$ }"></component-mapper>
+</div>
+<div *ngIf="!showSimpleTableManual">
+  <div *ngIf="isSearchable; else listView">
+    <component-mapper
+      name="PromotedFilters"
+      [props]="{ formGroup$, pConn$, viewName, filters, listViewProps, pageClass, parameters }"
+    ></component-mapper>
+  </div>
+  <ng-template #listView>
+    <component-mapper name="ListView" [props]="{ pConn$, payload: listViewProps }"></component-mapper>
+  </ng-template>
+</div>

package/lib/template/simple-table-select/simple-table-select.component.spec.ts

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

package/lib/template/simple-table-select/simple-table-select.component.ts

@@ -0,0 +1,151 @@
+import { Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormGroup } from '@angular/forms';
+import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+
+@Component({
+  selector: 'app-simple-table-select',
+  templateUrl: './simple-table-select.component.html',
+  styleUrls: ['./simple-table-select.component.scss'],
+  standalone: true,
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class SimpleTableSelectComponent implements OnInit, OnDestroy {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
+
+  // Used with AngularPConnect
+  angularPConnectData: AngularPConnectData = {};
+
+  label = '';
+  renderMode = '';
+  showLabel = true;
+  viewName = '';
+  parameters = {};
+  dataRelationshipContext = '';
+  propsToUse;
+  showSimpleTableManual: boolean;
+  isSearchable: boolean;
+  filters: any;
+  listViewProps: any;
+  pageClass: any;
+
+  constructor(private angularPConnect: AngularPConnectService) {}
+
+  ngOnInit(): void {
+    // First thing in initialization is registering and subscribing to the AngularPConnect service
+    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
+    this.updateSelf();
+  }
+
+  ngOnDestroy(): void {
+    if (this.angularPConnectData.unsubscribeFn) {
+      this.angularPConnectData.unsubscribeFn();
+    }
+  }
+
+  onStateChange() {
+    // Should always check the bridge to see if the component should
+    // update itself (re-render)
+    const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
+
+    // ONLY call updateSelf when the component should update
+    if (bUpdateSelf) {
+      this.updateSelf();
+    }
+  }
+
+  updateSelf() {
+    const theConfigProps: any = this.pConn$.getConfigProps();
+    this.label = theConfigProps.label;
+    this.renderMode = theConfigProps.renderMode;
+    this.showLabel = theConfigProps.showLabel;
+    this.viewName = theConfigProps.viewName;
+    this.parameters = theConfigProps.parameters;
+    this.dataRelationshipContext = theConfigProps.dataRelationshipContext;
+
+    this.propsToUse = { label: this.label, showLabel: this.showLabel, ...this.pConn$.getInheritedProps() };
+
+    if (this.propsToUse.showLabel === false) {
+      this.propsToUse.label = '';
+    }
+    const { MULTI } = PCore.getConstants().LIST_SELECTION_MODE;
+    const { selectionMode, selectionList }: any = this.pConn$.getConfigProps();
+    const isMultiSelectMode = selectionMode === MULTI;
+    if (isMultiSelectMode && this.renderMode === 'ReadOnly') {
+      this.showSimpleTableManual = true;
+    } else {
+      const pageReference = this.pConn$.getPageReference();
+      let referenceProp = isMultiSelectMode ? selectionList.substring(1) : pageReference.substring(pageReference.lastIndexOf('.') + 1);
+      // Replace here to use the context name instead
+      let contextPageReference: string | null = null;
+      if (this.dataRelationshipContext !== null && selectionMode === 'single') {
+        referenceProp = this.dataRelationshipContext;
+        contextPageReference = pageReference.concat('.').concat(referenceProp);
+      }
+      const metadata = isMultiSelectMode
+        ? // @ts-ignore - Property 'getFieldMetadata' is private and only accessible within class 'C11nEnv'
+          this.pConn$.getFieldMetadata(`@P .${referenceProp}`)
+        : // @ts-ignore - Property 'getCurrentPageFieldMetadata' is private and only accessible within class 'C11nEnv'
+          this.pConn$.getCurrentPageFieldMetadata(contextPageReference);
+
+      const { datasource: { parameters: fieldParameters = {} } = {}, pageClass } = metadata;
+
+      this.pageClass = pageClass;
+      const compositeKeys: any[] = [];
+      Object.values(fieldParameters).forEach((param: any) => {
+        if (this.isSelfReferencedProperty(param, referenceProp)) {
+          compositeKeys.push(param.substring(param.lastIndexOf('.') + 1));
+        }
+      });
+
+      this.processFiltrers(theConfigProps, compositeKeys);
+    }
+  }
+
+  processFiltrers(theConfigProps, compositeKeys) {
+    const defaultRowHeight = '2';
+
+    const additionalTableConfig = {
+      rowDensity: false,
+      enableFreezeColumns: false,
+      autoSizeColumns: false,
+      resetColumnWidths: false,
+      defaultFieldDef: {
+        showMenu: false,
+        noContextMenu: true,
+        grouping: false
+      },
+      itemKey: '$key',
+      defaultRowHeight
+    };
+
+    this.listViewProps = {
+      ...theConfigProps,
+      title: this.propsToUse.label,
+      personalization: false,
+      grouping: false,
+      expandGroups: false,
+      reorderFields: false,
+      showHeaderIcons: false,
+      editing: false,
+      globalSearch: true,
+      toggleFieldVisibility: false,
+      basicMode: true,
+      additionalTableConfig,
+      compositeKeys,
+      viewName: this.viewName,
+      parameters: this.parameters
+    };
+
+    this.filters = (this.pConn$.getRawMetadata() as any).config.promotedFilters ?? [];
+
+    this.isSearchable = this.filters.length > 0;
+  }
+
+  isSelfReferencedProperty(param, referenceProp) {
+    const [, parentPropName] = param.split('.');
+    return parentPropName === referenceProp;
+  }
+}

package/lib/template/single-reference-readonly/single-reference-readonly.component.html

@@ -0,0 +1 @@
+<component-mapper name="SemanticLink" [props]="{ pConn$ }"></component-mapper>

package/lib/template/single-reference-readonly/single-reference-readonly.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SingleReferenceReadonlyComponent } from './single-reference-readonly.component';
+
+describe('SingleReferenceReadonlyComponent', () => {
+  let component: SingleReferenceReadonlyComponent;
+  let fixture: ComponentFixture<SingleReferenceReadonlyComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [SingleReferenceReadonlyComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SingleReferenceReadonlyComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/lib/template/single-reference-readonly/single-reference-readonly.component.ts

@@ -0,0 +1,15 @@
+import { Component, Input, forwardRef } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+
+@Component({
+  selector: 'app-single-reference-readonly',
+  templateUrl: './single-reference-readonly.component.html',
+  styleUrls: ['./single-reference-readonly.component.scss'],
+  standalone: true,
+  imports: [forwardRef(() => ComponentMapperComponent)]
+})
+export class SingleReferenceReadonlyComponent {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
+}

package/lib/template/sub-tabs/config-ext.json

@@ -0,0 +1,8 @@
+{
+  "name": "SubTabs",
+  "label": "Sub tabs",
+  "description": "Sub tabs view",
+  "type": "Template",
+  "subtype": "TAB",
+  "properties": []
+}

package/lib/template/sub-tabs/sub-tabs.component.html

@@ -0,0 +1,12 @@
+<mat-tab-group (selectedTabChange)="handleTabClick($event)">
+  <mat-tab *ngFor="let tab of tabItems; let i = index" [label]="tab.name">
+    <div class="psdk-sub-tabs" *ngIf="+currentTabId == i">
+      <component-mapper
+        *ngIf="tab.content?.getPConnect() as tabPConn"
+        [name]="tabPConn.getComponentName()"
+        [props]="{ pConn$: tabPConn, formGroup$ }"
+        errorMsg="SubTabs wants component not yet available: {{ tabPConn.getComponentName() }}"
+      ></component-mapper>
+    </div>
+  </mat-tab>
+</mat-tab-group>

package/lib/template/sub-tabs/sub-tabs.component.scss

@@ -0,0 +1,3 @@
+.psdk-sub-tabs {
+  margin: 0.5rem;
+}

package/lib/template/sub-tabs/sub-tabs.component.spec.ts

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

package/lib/template/sub-tabs/sub-tabs.component.ts

@@ -0,0 +1,76 @@
+import { Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { MatTabsModule } from '@angular/material/tabs';
+import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
+import { getTransientTabs, getVisibleTabs, tabClick } from '@pega/angular-sdk-components';
+import { CommonModule } from '@angular/common';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+
+@Component({
+  selector: 'app-sub-tabs',
+  templateUrl: './sub-tabs.component.html',
+  styleUrls: ['./sub-tabs.component.scss'],
+  standalone: true,
+  imports: [MatTabsModule, CommonModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class SubTabsComponent implements OnInit, OnDestroy {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
+
+  angularPConnectData: AngularPConnectData = {};
+
+  arChildren$: any[];
+  defaultTabIndex = 0;
+  currentTabId = this.defaultTabIndex.toString();
+  tabItems: any[];
+  availableTabs: any;
+
+  constructor(private angularPConnect: AngularPConnectService) {}
+
+  ngOnInit(): void {
+    // First thing in initialization is registering and subscribing to the AngularPConnect service
+    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
+    this.checkAndUpdate();
+  }
+
+  ngOnDestroy() {
+    if (this.angularPConnectData.unsubscribeFn) {
+      this.angularPConnectData.unsubscribeFn();
+    }
+  }
+
+  onStateChange() {
+    this.checkAndUpdate();
+  }
+
+  checkAndUpdate() {
+    // Should always check the bridge to see if the component should
+    // update itself (re-render)
+    const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
+
+    // ONLY call updateSelf when the component should update
+    if (bUpdateSelf) {
+      this.updateSelf();
+    }
+  }
+
+  updateSelf() {
+    const children = this.pConn$?.getChildren();
+    const deferLoadedTabs = children[0];
+    this.availableTabs = getVisibleTabs(deferLoadedTabs, 'tabsSubs');
+    this.updateTabContent();
+  }
+
+  updateTabContent() {
+    const tempTabItems = getTransientTabs(this.availableTabs, this.currentTabId, this.tabItems);
+    this.tabItems = tempTabItems;
+  }
+
+  handleTabClick(event) {
+    const { index } = event;
+    this.currentTabId = index.toString();
+    tabClick(index, this.availableTabs, this.currentTabId, this.tabItems);
+    const tempTabItems = getTransientTabs(this.availableTabs, this.currentTabId, this.tabItems);
+    this.tabItems[index].content = tempTabItems[index].content;
+  }
+}

package/lib/template/three-column/config-ext.json

@@ -0,0 +1,8 @@
+{
+  "name": "ThreeColumnTab",
+  "label": "Three column",
+  "description": "Three column",
+  "type": "Template",
+  "subtype": "TAB",
+  "properties": []
+}

package/lib/template/three-column/three-column.component.html

@@ -0,0 +1,13 @@
+<div class="psdk-three-column">
+  <div *ngFor="let kid of arChildren$">
+    <div class="psdk-three-column-column" *ngIf="kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'a'">
+      <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
+    </div>
+    <div class="psdk-three-column-column" *ngIf="kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'b'">
+      <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
+    </div>
+    <div class="psdk-three-column-column" *ngIf="kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'c'">
+      <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
+    </div>
+  </div>
+</div>

package/lib/template/three-column/three-column.component.scss

@@ -0,0 +1,16 @@
+* {
+  box-sizing: border-box;
+}
+
+.psdk-three-column {
+  display: flow-root;
+  height: 100%;
+}
+
+/* Create two equal columns that floats next to each other */
+.psdk-three-column-column {
+  width: 33%;
+  float: left;
+  padding: 0rem 0.3125rem;
+  height: 100%;
+}

package/lib/template/three-column/three-column.component.spec.ts

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

package/lib/template/three-column/three-column.component.ts

@@ -0,0 +1,34 @@
+import { Component, OnInit, Input, forwardRef, OnChanges, SimpleChanges } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormGroup } from '@angular/forms';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+
+@Component({
+  selector: 'app-three-column',
+  templateUrl: './three-column.component.html',
+  styleUrls: ['./three-column.component.scss'],
+  standalone: true,
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class ThreeColumnComponent implements OnInit, OnChanges {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
+
+  arChildren$: any[];
+
+  ngOnInit() {
+    this.updateSelf();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    const { pConn$ } = changes;
+
+    if (pConn$.previousValue && pConn$.previousValue !== pConn$.currentValue) {
+      this.updateSelf();
+    }
+  }
+
+  updateSelf() {
+    this.arChildren$ = this.pConn$.getChildren() as any[];
+  }
+}

package/lib/template/three-column-page/config-ext.json

@@ -0,0 +1,8 @@
+{
+  "name": "ThreeColumnPage",
+  "label": "Three column",
+  "description": "ThreeColumn Page Template",
+  "type": "Template",
+  "subtype": "PAGE",
+  "properties": []
+}

package/lib/template/three-column-page/three-column-page.component.html

@@ -0,0 +1 @@
+<component-mapper name="ThreeColumn" [props]="{ pConn$, formGroup$ }"></component-mapper>

package/lib/template/three-column-page/three-column-page.component.spec.ts

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

package/lib/template/three-column-page/three-column-page.component.ts

@@ -0,0 +1,15 @@
+import { Component, Input, forwardRef } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+
+@Component({
+  selector: 'app-three-column-page',
+  templateUrl: './three-column-page.component.html',
+  styleUrls: ['./three-column-page.component.scss'],
+  standalone: true,
+  imports: [forwardRef(() => ComponentMapperComponent)]
+})
+export class ThreeColumnPageComponent {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
+}

package/lib/template/two-column/config-ext.json

@@ -0,0 +1,8 @@
+{
+  "name": "TwoColumn",
+  "label": "Two column",
+  "description": "TwoColumn Template",
+  "type": "Template",
+  "subtype": "FORM",
+  "properties": []
+}

package/lib/template/two-column/two-column.component.html

@@ -0,0 +1,16 @@
+<div class="psdk-two-column">
+  <div *ngFor="let kid of arChildren$">
+    <div class="psdk-two-column-left" *ngIf="kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'left'">
+      <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
+    </div>
+    <div class="psdk-two-column-right" *ngIf="kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'right'">
+      <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
+    </div>
+    <div class="psdk-two-column-column" *ngIf="kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'a'">
+      <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
+    </div>
+    <div class="psdk-two-column-column" *ngIf="kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'b'">
+      <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
+    </div>
+  </div>
+</div>

package/lib/template/two-column/two-column.component.scss

@@ -0,0 +1,28 @@
+* {
+  box-sizing: border-box;
+}
+
+.psdk-two-column {
+  display: flow-root;
+  height: 100%;
+}
+
+/* Create two equal columns that floats next to each other */
+.psdk-two-column-column {
+  width: 50%;
+  float: left;
+  padding: 0rem 0.3125rem;
+  height: 100%;
+}
+
+.psdk-two-column-left {
+  float: left;
+  min-width: 50%;
+  padding: 0rem 0.3125rem;
+}
+
+.psdk-two-column-right {
+  float: left;
+  width: 50%;
+  padding: 0rem 0.3125rem;
+}

package/lib/template/two-column/two-column.component.spec.ts

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

package/lib/template/two-column/two-column.component.ts

@@ -0,0 +1,34 @@
+import { Component, OnInit, Input, forwardRef, SimpleChanges, OnChanges } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormGroup } from '@angular/forms';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+
+@Component({
+  selector: 'app-two-column',
+  templateUrl: './two-column.component.html',
+  styleUrls: ['./two-column.component.scss'],
+  standalone: true,
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class TwoColumnComponent implements OnInit, OnChanges {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
+
+  arChildren$: any[];
+
+  ngOnInit() {
+    this.updateSelf();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    const { pConn$ } = changes;
+
+    if (pConn$.previousValue && pConn$.previousValue !== pConn$.currentValue) {
+      this.updateSelf();
+    }
+  }
+
+  updateSelf() {
+    this.arChildren$ = this.pConn$.getChildren() as any[];
+  }
+}

package/lib/template/two-column-page/config-ext.json

@@ -0,0 +1,8 @@
+{
+  "name": "TwoColumnPage",
+  "label": "Two column",
+  "description": "TwoColumn Page Template",
+  "type": "Template",
+  "subtype": "PAGE",
+  "properties": []
+}

package/lib/template/two-column-page/two-column-page.component.html

@@ -0,0 +1 @@
+<component-mapper name="TwoColumn" [props]="{ formGroup$, pConn$ }"></component-mapper>