@pega/angular-sdk-overrides 0.23.1

package/lib/designSystemExtension/rich-text-editor/rich-text-editor.component.ts

@@ -0,0 +1,89 @@
+import { Component, Input, Output, EventEmitter, OnChanges } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
+import { EditorModule, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular';
+
+declare let tinymce: any;
+
+@Component({
+  selector: 'app-rich-text-editor',
+  templateUrl: './rich-text-editor.component.html',
+  styleUrls: ['./rich-text-editor.component.scss'],
+  standalone: true,
+  imports: [CommonModule, EditorModule, ReactiveFormsModule],
+  providers: [{ provide: TINYMCE_SCRIPT_SRC, useValue: 'tinymce/tinymce.min.js' }]
+})
+export class RichTextEditorComponent implements OnChanges {
+  @Input() placeholder;
+  @Input() disabled;
+  @Input() readonly;
+  @Input() value;
+  @Input() label;
+  @Input() required;
+  @Input() info;
+  @Input() error;
+  @Input() testId;
+
+  @Output() onBlur: EventEmitter<any> = new EventEmitter();
+  @Output() onChange: EventEmitter<any> = new EventEmitter();
+
+  richText = new FormControl();
+
+  ngOnChanges() {
+    if (this.required) {
+      this.richText.addValidators(Validators.required);
+    }
+
+    if (this.disabled) {
+      this.richText.disable();
+    } else {
+      this.richText.enable();
+    }
+
+    if (this.value) {
+      this.richText.setValue(this.value);
+    }
+  }
+
+  filePickerCallback = cb => {
+    const input = document.createElement('input');
+    input.setAttribute('type', 'file');
+    input.setAttribute('accept', 'image/*');
+
+    input.addEventListener('change', (e: any) => {
+      const file = e.target.files[0];
+
+      const reader: any = new FileReader();
+      reader.addEventListener('load', () => {
+        /*
+            Note: Now we need to register the blob in TinyMCEs image blob
+            registry. In the next release this part hopefully won't be
+            necessary, as we are looking to handle it internally.
+        */
+        const blobId = `blobid${new Date().getTime()}`;
+        console.log('editorRef', tinymce.activeEditor);
+        const blobCache = tinymce.activeEditor.editorUpload.blobCache;
+        const base64 = reader.result.split(',')[1];
+        const blobInfo = blobCache.create(blobId, file, base64);
+        blobCache.add(blobInfo);
+
+        /* call the callback and populate the Title field with the file name */
+        cb(blobInfo.blobUri(), { title: file.name });
+      });
+      reader.readAsDataURL(file);
+    });
+
+    input.click();
+  };
+
+  blur() {
+    if (tinymce.activeEditor) {
+      const editorValue = tinymce.activeEditor.getContent({ format: 'html' });
+      this.onBlur.emit(editorValue);
+    }
+  }
+
+  change(event) {
+    this.onChange.emit(event);
+  }
+}

package/lib/designSystemExtension/wss-quick-create/wss-quick-create.component.html

@@ -0,0 +1,13 @@
+<div class="wss-quick-create-header">
+  <h1 class="quick-link-heading">{{ heading$ }}</h1>
+  <ul class="quick-link-ul-list">
+    <li *ngFor="let element of actions$" class="quick-link-list">
+      <button mat-raised-button color="primary" class="quick-link-button" mat-icon-button (click)="element.onClick()">
+        <span class="quick-link-button-span">
+          <img *ngIf="element.icon" class="quick-link-icon" [src]="element.icon" />
+          <span>{{ element.label }}</span>
+        </span>
+      </button>
+    </li>
+  </ul>
+</div>

package/lib/designSystemExtension/wss-quick-create/wss-quick-create.component.scss

@@ -0,0 +1,43 @@
+.quick-link-ul-list {
+  list-style: none;
+  padding: 0;
+  grid-template-columns: repeat(auto-fill, minmax(min(40ch, 100%), 1fr));
+  display: grid;
+  gap: calc(1rem);
+}
+
+.quick-link-list {
+  background-color: #3f51b5;
+  color: white;
+  border-radius: 8px;
+}
+
+.quick-link-button {
+  text-transform: capitalize !important;
+  font-size: 16px !important;
+  color: white !important;
+  cursor: pointer;
+  padding: calc(0.5rem * 2) !important;
+  height: 6rem;
+  width: 100%;
+  justify-content: start !important;
+  background-color: transparent;
+  border: 0;
+}
+
+.quick-link-icon {
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
+  filter: invert(100%);
+}
+
+.quick-link-button-span {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.quick-link-heading {
+  margin-top: 8px;
+}

package/lib/designSystemExtension/wss-quick-create/wss-quick-create.component.spec.ts

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

package/lib/designSystemExtension/wss-quick-create/wss-quick-create.component.ts

@@ -0,0 +1,15 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+// import { Button } from '@angular/material'
+
+@Component({
+  selector: 'wss-quick-create',
+  templateUrl: './wss-quick-create.component.html',
+  styleUrls: ['./wss-quick-create.component.scss'],
+  standalone: true,
+  imports: [CommonModule]
+})
+export class WssQuickCreateComponent {
+  @Input() actions$: any;
+  @Input() heading$: any;
+}

package/lib/field/auto-complete/auto-complete.component.html

@@ -0,0 +1,32 @@
+<div *ngIf="displayMode$; else noDisplayMode">
+  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$, hideLabel }"></component-mapper>
+</div>
+<ng-template #noDisplayMode>
+  <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
+    <div [formGroup]="formGroup$" *ngIf="bVisible$">
+      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
+        <mat-label>{{ label$ }}</mat-label>
+        <input
+          matInput
+          [placeholder]="placeholder"
+          [formControl]="fieldControl"
+          [attr.data-test-id]="testId"
+          [value]="value$"
+          [required]="bRequired$"
+          [matAutocomplete]="auto"
+          (input)="fieldOnChange($event)"
+          (blur)="fieldOnBlur($event)"
+        />
+        <mat-autocomplete #auto="matAutocomplete" autoActiveFirstOption (optionSelected)="optionChanged($event)">
+          <mat-option *ngFor="let opt of filteredOptions | async" [value]="opt.value">
+            <span>{{ opt.value }}</span>
+          </mat-option>
+        </mat-autocomplete>
+        <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
+      </mat-form-field>
+    </div>
+  </div>
+</ng-template>
+<ng-template #noEdit>
+  <component-mapper *ngIf="bVisible$ !== false" name="Text" [props]="{ pConn$, formatAs$: 'text' }"></component-mapper>
+</ng-template>

package/lib/field/auto-complete/auto-complete.component.scss

@@ -0,0 +1,20 @@
+.psdk-full-width {
+  width: 100%;
+}
+
+.psdk-label-readonly {
+  font-size: 1rem;
+  display: block;
+  transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px);
+  -ms-transform: translateY(-1.28125em) scale(0.75);
+  width: 133.33333%;
+}
+
+.psdk-data-readonly {
+  padding-top: 0.625rem;
+  width: 100%;
+}
+
+::ng-deep .mat-mdc-form-field-infix {
+  width: auto;
+}

package/lib/field/auto-complete/auto-complete.component.spec.ts

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

package/lib/field/auto-complete/auto-complete.component.ts

@@ -0,0 +1,345 @@
+import { Component, OnInit, Input, ChangeDetectorRef, forwardRef, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { MatOptionModule } from '@angular/material/core';
+import { MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { interval, Observable } from 'rxjs';
+import { map, startWith } from 'rxjs/operators';
+import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
+import { Utils } from '@pega/angular-sdk-components';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { DatapageService } from '@pega/angular-sdk-components';
+import { handleEvent } from '@pega/angular-sdk-components';
+import { PConnFieldProps } from '@pega/angular-sdk-components';
+
+interface AutoCompleteProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on AutoComplete here
+  deferDatasource?: boolean;
+  datasourceMetadata?: any;
+  onRecordChange?: any;
+  additionalProps?: object;
+  listType: string;
+  parameters?: any;
+  datasource: any;
+  columns: any[];
+}
+
+@Component({
+  selector: 'app-auto-complete',
+  templateUrl: './auto-complete.component.html',
+  styleUrls: ['./auto-complete.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatAutocompleteModule,
+    MatOptionModule,
+    forwardRef(() => ComponentMapperComponent)
+  ]
+})
+export class AutoCompleteComponent implements OnInit, OnDestroy {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
+
+  // Used with AngularPConnect
+  angularPConnectData: AngularPConnectData = {};
+  configProps$: AutoCompleteProps;
+
+  label$ = '';
+  value$ = '';
+  bRequired$ = false;
+  bReadonly$ = false;
+  bDisabled$ = false;
+  bVisible$ = true;
+  displayMode$?: string = '';
+  controlName$: string;
+  bHasForm$ = true;
+  options$: any[];
+  componentReference = '';
+  testId: string;
+  listType: string;
+  columns = [];
+  helperText: string;
+  placeholder: string;
+
+  fieldControl = new FormControl('', null);
+  parameters: {};
+  hideLabel: boolean;
+  filteredOptions: Observable<any[]>;
+  filterValue = '';
+
+  constructor(
+    private angularPConnect: AngularPConnectService,
+    private cdRef: ChangeDetectorRef,
+    private utils: Utils,
+    private dataPageService: DatapageService
+  ) {}
+
+  async ngOnInit(): Promise<void> {
+    // First thing in initialization is registering and subscribing to the AngularPConnect service
+    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
+    this.controlName$ = this.angularPConnect.getComponentID(this);
+
+    // Then, continue on with other initialization
+
+    // call updateSelf when initializing
+    // this.updateSelf();
+    await this.checkAndUpdate();
+
+    if (this.formGroup$) {
+      // add control to formGroup
+      this.formGroup$.addControl(this.controlName$, this.fieldControl);
+      this.fieldControl.setValue(this.value$);
+      this.bHasForm$ = true;
+    } else {
+      this.bReadonly$ = true;
+      this.bHasForm$ = false;
+    }
+
+    this.filteredOptions = this.fieldControl.valueChanges.pipe(
+      startWith(''),
+      map(value => this._filter(value || ''))
+    );
+  }
+
+  ngOnDestroy(): void {
+    if (this.formGroup$) {
+      this.formGroup$.removeControl(this.controlName$);
+    }
+
+    if (this.angularPConnectData.unsubscribeFn) {
+      this.angularPConnectData.unsubscribeFn();
+    }
+  }
+
+  private _filter(value: string): string[] {
+    const filterVal = (value || this.filterValue).toLowerCase();
+    return this.options$?.filter(option => option.value.toLowerCase().includes(filterVal));
+  }
+
+  // Callback passed when subscribing to store change
+  async onStateChange() {
+    await this.checkAndUpdate();
+  }
+
+  async 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) {
+      await this.updateSelf();
+    }
+  }
+
+  // updateSelf
+  async updateSelf(): Promise<void> {
+    // starting very simple...
+
+    // moved this from ngOnInit() and call this from there instead...
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as AutoCompleteProps;
+
+    if (this.configProps$.value != undefined) {
+      const index = this.options$?.findIndex(element => element.key === this.configProps$.value);
+      this.value$ = index > -1 ? this.options$[index].value : this.configProps$.value;
+    }
+
+    this.setPropertyValuesFromProps();
+
+    const context = this.pConn$.getContextName();
+    const { columns, datasource } = this.generateColumnsAndDataSource();
+
+    if (columns) {
+      this.columns = this.preProcessColumns(columns);
+    }
+    // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
+    setTimeout(() => {
+      if (this.configProps$.required != null) {
+        this.bRequired$ = this.utils.getBooleanValue(this.configProps$.required);
+      }
+      this.cdRef.detectChanges();
+    });
+
+    if (this.configProps$.visibility != null) {
+      this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
+    }
+
+    // disabled
+    if (this.configProps$.disabled != undefined) {
+      this.bDisabled$ = this.utils.getBooleanValue(this.configProps$.disabled);
+    }
+
+    if (this.bDisabled$) {
+      this.fieldControl.disable();
+    } else {
+      this.fieldControl.enable();
+    }
+
+    if (this.configProps$.readOnly != null) {
+      this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
+    }
+
+    this.componentReference = (this.pConn$.getStateProps() as any).value;
+    if (this.listType === 'associated') {
+      this.options$ = this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject('')); // 1st arg empty string until typedef marked correctly
+    }
+
+    if (!this.displayMode$ && this.listType !== 'associated') {
+      const results = await this.dataPageService.getDataPageData(datasource, this.parameters, context);
+      this.fillOptions(results);
+    }
+
+    // trigger display of error message with field control
+    if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
+      const timer = interval(100).subscribe(() => {
+        this.fieldControl.setErrors({ message: true });
+        this.fieldControl.markAsTouched();
+
+        timer.unsubscribe();
+      });
+    }
+  }
+
+  setPropertyValuesFromProps() {
+    this.testId = this.configProps$.testId;
+    this.label$ = this.configProps$.label;
+    this.placeholder = this.configProps$.placeholder || '';
+    this.displayMode$ = this.configProps$.displayMode;
+    this.listType = this.configProps$.listType;
+    this.hideLabel = this.configProps$.hideLabel;
+    this.helperText = this.configProps$.helperText;
+    this.parameters = this.configProps$?.parameters;
+  }
+
+  generateColumnsAndDataSource() {
+    let datasource = this.configProps$.datasource;
+    let columns = this.configProps$.columns;
+    // const { deferDatasource, datasourceMetadata } = this.configProps$;
+    const { deferDatasource, datasourceMetadata }: any = this.pConn$.getConfigProps();
+    // convert associated to datapage listtype and transform props
+    // Process deferDatasource when datapage name is present. WHhen tableType is promptList / localList
+    if (deferDatasource && datasourceMetadata?.datasource?.name) {
+      this.listType = 'datapage';
+      datasource = datasourceMetadata.datasource.name;
+      const { parameters, propertyForDisplayText, propertyForValue } = datasourceMetadata.datasource;
+      this.parameters = this.flattenParameters(parameters);
+      const displayProp = propertyForDisplayText?.startsWith('@P') ? propertyForDisplayText.substring(3) : propertyForDisplayText;
+      const valueProp = propertyForValue?.startsWith('@P') ? propertyForValue.substring(3) : propertyForValue;
+      columns = [
+        {
+          key: 'true',
+          setProperty: 'Associated property',
+          value: valueProp
+        },
+        {
+          display: 'true',
+          primary: 'true',
+          useForSearch: true,
+          value: displayProp
+        }
+      ];
+    }
+
+    return { columns, datasource };
+  }
+
+  fillOptions(results: any) {
+    const optionsData: any[] = [];
+    const displayColumn = this.getDisplayFieldsMetaData(this.columns);
+    results?.forEach(element => {
+      const obj = {
+        key: element[displayColumn.key] || element.pyGUID,
+        value: element[displayColumn.primary]?.toString()
+      };
+      optionsData.push(obj);
+    });
+    this.options$ = optionsData;
+  }
+
+  flattenParameters(params = {}) {
+    const flatParams = {};
+    Object.keys(params).forEach(key => {
+      const { name, value: theVal } = params[key];
+      flatParams[name] = theVal;
+    });
+
+    return flatParams;
+  }
+
+  getDisplayFieldsMetaData(columnList) {
+    const displayColumns = columnList.filter(col => col.display === 'true');
+    const metaDataObj: any = { key: '', primary: '', secondary: [] };
+    const keyCol = columnList.filter(col => col.key === 'true');
+    metaDataObj.key = keyCol.length > 0 ? keyCol[0].value : 'auto';
+    for (let index = 0; index < displayColumns.length; index += 1) {
+      if (displayColumns[index].primary === 'true') {
+        metaDataObj.primary = displayColumns[index].value;
+      } else {
+        metaDataObj.secondary.push(displayColumns[index].value);
+      }
+    }
+    return metaDataObj;
+  }
+
+  preProcessColumns(columnList) {
+    return columnList?.map(col => {
+      const tempColObj = { ...col };
+      tempColObj.value = col.value && col.value.startsWith('.') ? col.value.substring(1) : col.value;
+      return tempColObj;
+    });
+  }
+
+  fieldOnChange(event: Event) {
+    // this works - this.pConn$.setValue( this.componentReference, `property: ${this.componentReference}`);
+    // this works - this.pConn$.setValue( this.componentReference, this.fieldControl.value);
+    // PConnect wants to use changeHandler for onChange
+    // this.angularPConnect.changeHandler( this, event);
+    this.filterValue = (event.target as HTMLInputElement).value;
+
+    this.angularPConnectData.actions?.onChange(this, event);
+  }
+
+  optionChanged(event: MatAutocompleteSelectedEvent) {
+    this.angularPConnectData.actions?.onChange(this, event);
+  }
+
+  fieldOnBlur(event: Event) {
+    let key = '';
+    const el = event?.target as HTMLInputElement;
+    if (el?.value) {
+      const index = this.options$?.findIndex(element => element.value === el.value);
+      key = index > -1 ? (key = this.options$[index].key) : el.value;
+    }
+
+    const value = key;
+    const actionsApi = this.pConn$?.getActionsApi();
+    const propName = (this.pConn$?.getStateProps() as any).value;
+    handleEvent(actionsApi, 'changeNblur', propName, value);
+    if (this.configProps$?.onRecordChange) {
+      el.value = value;
+      this.configProps$.onRecordChange(event);
+    }
+  }
+
+  getErrorMessage() {
+    let errMessage = '';
+
+    // look for validation messages for json, pre-defined or just an error pushed from workitem (400)
+    if (this.fieldControl.hasError('message')) {
+      errMessage = this.angularPConnectData.validateMessage ?? '';
+      return errMessage;
+    }
+    if (this.fieldControl.hasError('required')) {
+      errMessage = 'You must enter a value';
+    } else if (this.fieldControl.errors) {
+      errMessage = this.fieldControl.errors.toString();
+    }
+
+    return errMessage;
+  }
+}

package/lib/field/auto-complete/config-ext.json

@@ -0,0 +1,10 @@
+{
+  "name": "AutoComplete",
+  "label": "Search box",
+  "description": "Picklist",
+  "type": "Field",
+  "subtype": "Picklist",
+  "componentKey": "AutoComplete",
+  "icon": "",
+  "properties": []
+}

package/lib/field/cancel-alert/cancel-alert.component.html

@@ -0,0 +1,18 @@
+<div *ngIf="bShowAlert$" class="psdk-cancel-alert-background">
+  <div class="psdk-cancel-alert-top">
+    <h3 *ngIf="heading$ != ''">{{ heading$ }}</h3>
+    <div>
+      <p>{{ body1$ }}</p>
+      <p>{{ body2$ }}</p>
+    </div>
+    <mat-grid-list cols="2" rowHeight="6.25rem">
+      <mat-grid-tile>
+        <button mat-raised-button color="secondary" (click)="buttonClick('save')">{{ localizedVal('Save for later', localeCategory) }}</button>
+      </mat-grid-tile>
+      <mat-grid-tile>
+        <button mat-raised-button color="secondary" (click)="buttonClick('continue')">{{ localizedVal('Continue Working', localeCategory) }}</button>
+        <button mat-raised-button color="primary" (click)="buttonClick('delete')">{{ localizedVal('Delete', localeCategory) }}</button>
+      </mat-grid-tile>
+    </mat-grid-list>
+  </div>
+</div>

package/lib/field/cancel-alert/cancel-alert.component.scss

@@ -0,0 +1,24 @@
+.psdk-cancel-alert-background {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  background-color: rgba(100, 100, 100, 0.4);
+  position: fixed;
+  z-index: 9999;
+  top: 0px;
+  left: 0px;
+}
+
+.psdk-cancel-alert-top {
+  display: table;
+  margin: auto;
+  min-width: 550px;
+  background-color: white;
+  border: 1px solid black;
+  border-radius: 10px;
+  padding: 20px;
+  box-shadow: 0 0 10px 3px #777;
+}

package/lib/field/cancel-alert/cancel-alert.component.spec.ts

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