pmds-hub 20.1.0

package/libs/pmds-cdk/src/lib/pmds-cdk-autocomplete/components/pmds-cdk-autocomplete-table/pmds-cdk-autocomplete-table.component.html

@@ -0,0 +1,134 @@
+	<ng-container>
+		@if (!!suggestions || !!data?.length || states?.isLoading) {
+			<div class="w-full mt-1 font-SantanderMicroText text-color-text-primary bg-color-surface-primary border border-color-border-default overflow-hidden animate-fade-in rounded-pmds">
+				<!-- SUGGESTIONS -->
+				<table class="w-full whitespace-nowrap block">
+					@if (!!suggestions) {
+						<thead class="block">
+						<tr class="block">
+							<p class="text-sm p-4 w-full text-wrap overflow-hidden break-all"
+							   [innerHTML]="suggestions"
+							   [attr.data-qa-id]="dataQA + componentSelector + 'table-suggestions'"
+							></p>
+						</tr>
+						</thead>
+					}
+				</table>
+				<!-- END SUGGESTIONS -->
+				<!-- NO RESULTS -->
+				@if (!data?.length && !states?.isLoading && config.noResultsLiterals) {
+					<section class="w-full flex flex-col p-4 border-t border-color-border-default items-center justify-center">
+						<span class="font-body-s-bold">{{ config.noResultsLiterals.title }}</span>
+						<span class="font-body-s-regular text-center text-color-text-error">{{ config.noResultsLiterals.msg }}</span>
+					</section>
+				}
+				<!-- NO RESULTS -->
+				<!-- TABLE -->
+				<div #scrollableDiv
+					 class="overflow-auto"
+					 (mouseenter)="updateTableHover(true)"
+					 (mouseleave)="updateTableHover(false)"
+					 [ngClass]="config.customHeight || 'max-h-[294px] mobile:max-h-[384px]'"
+					 (scroll)="onScroll()">
+					<table class="w-full whitespace-nowrap mobile:hidden">
+						@if (!states?.isError) {
+							<ng-container>
+								@if (data?.length) {
+									<tbody>
+									<!-- DYNAMIC ROWS -->
+										@for (item of data; track item; let i = $index) {
+											<tr class="relative py-4 text-sm border-t border-color-border-default bg-color-surface-primary"
+												[ngClass]="{
+													'hover:bg-color-surface-hover': rowComponentConfig.selectRowAction,
+													'first:bg-color-surface-selected-alternative' : !hoverOnTable
+												}"
+												(click)="onClick(item)">
+												<pmds-cdk-autocomplete-dynamic-row
+													[autocompleteDynamicRowComponent]="rowComponentConfig.component"
+													[data]="item"
+													[rowIndex]="i"
+													[stylesConfig]="rowComponentConfig.styles"
+													[ngClass]="{ 'cursor-pointer': rowComponentConfig.selectRowAction }"
+													[attr.data-qa-id]="dataQA + componentSelector + 'table-row-' + i"
+												/>
+											</tr>
+										}
+									<!-- END DYNAMIC ROWS -->
+									</tbody>
+								}
+							</ng-container>
+						} @else {
+							<ng-container [ngTemplateOutlet]="errorTmpl"></ng-container>
+						}
+						<!-- BUTTON -->
+						@if (config?.button?.show) {
+							<div class="h-16 w-full flex justify-center items-center border-t border-color-border-default">
+								<pmds-cdk-button
+									buttonType="tertiary"
+									[label]="config.button?.label!"
+									[dataQA]="dataQA + componentSelector + 'table-button-action'"
+									(click)="config.button?.action()"/>
+							</div>
+						}
+						<!-- END BUTTON -->
+					</table>
+					@for (item of data; track i; let i = $index) {
+						<div class="relative p-4 text-sm border-t border-color-border-default md:hidden bg-color-surface-primary"
+							 [ngClass]="{
+								'hover:bg-color-surface-hover': rowComponentConfig.selectRowAction,
+								'bg-color-surface-selected-alternative' : !hoverOnTable && i === 0
+								}"
+							 (click)="onClick(item)">
+
+							<pmds-cdk-autocomplete-dynamic-card
+								[autocompleteDynamicRowComponent]="rowComponentConfig.cardComponent || rowComponentConfig.component"
+								[data]="item"
+								[cardIndex]="i"
+								[stylesConfig]="rowComponentConfig.styles"
+								[ngClass]="{ 'cursor-pointer': rowComponentConfig.selectRowAction }"
+								[attr.data-qa-id]="dataQA + componentSelector + 'table-row-' + i"
+							/>
+						</div>
+					}
+					@if (states?.isError) {
+						<section class="md:hidden">
+							<ng-container *ngTemplateOutlet="errorTmpl"></ng-container>
+						</section>
+					}
+					<!-- END TABLE -->
+				</div>
+				<!-- LOADING -->
+				@if (states?.isLoading) {
+					<div class="flex items-center justify-center flex-col m-4">
+						<pmds-cdk-loader
+							class="w-full"
+							[isPrimary]="false"
+							[subtitle]="config.loadingLiterals"
+							[dataQA]="dataQA + componentSelector"
+						/>
+					</div>
+				}
+				<!-- END LOADING -->
+			</div>
+		}
+	</ng-container>
+	<!-- ERROR VIEW -->
+	<ng-template #errorTmpl>
+		@if (config?.error) {
+			<tr class="flex flex-col justify-center items-center h-[72px] border-t border-color-border-default"
+				[attr.data-qa-id]="dataQA + componentSelector + 'table-error-container'"
+			>
+				<p class="font-SantanderMicroTextBold text-sm leading-5"
+				   [attr.data-qa-id]="dataQA + componentSelector + 'table-error-title'"
+				>
+					{{ config.error?.title }}
+				</p>
+				<p class="text-sm leading-5 text-color-text-error"
+				   [attr.data-qa-id]="dataQA + componentSelector + 'table-error-body'"
+				>
+					{{ config.error?.body }}
+				</p>
+			</tr>
+		}
+	</ng-template>
+	<!-- END ERROR VIEW -->

package/libs/pmds-cdk/src/lib/pmds-cdk-autocomplete/components/pmds-cdk-autocomplete-table/pmds-cdk-autocomplete-table.component.spec.ts

@@ -0,0 +1,41 @@
+////////Angular imports
+import { Type } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+////////Component imports
+import { IPmdsCdkAutocompleteTableConfig } from '../../models/pmds-cdk-autocomplete-table.model';
+import { PmdsCdkAutocompleteTableComponent } from './pmds-cdk-autocomplete-table.component';
+
+describe('NxtdTableComponent', () => {
+    let component: PmdsCdkAutocompleteTableComponent;
+    let fixture: ComponentFixture<PmdsCdkAutocompleteTableComponent>;
+    const mockTableConfig: IPmdsCdkAutocompleteTableConfig = {
+        rowComponent: {
+            component: new Type() as Type<unknown>
+        },
+        customHeight: ''
+    };
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [ PmdsCdkAutocompleteTableComponent ]
+        })
+            .compileComponents();
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(PmdsCdkAutocompleteTableComponent);
+        component = fixture.componentInstance;
+        component.config = mockTableConfig;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('on click', () => {
+        const spy = jest.spyOn(component.selectRow, 'emit');
+        component.onClick({});
+        expect(spy).toHaveBeenCalled();
+    });
+});

package/libs/pmds-cdk/src/lib/pmds-cdk-autocomplete/components/pmds-cdk-autocomplete-table/pmds-cdk-autocomplete-table.component.ts

@@ -0,0 +1,127 @@
+////////Angular imports
+import { NgClass, NgTemplateOutlet } from '@angular/common';
+import {
+	Component,
+	ElementRef,
+	EventEmitter,
+	Input,
+	OnChanges,
+	OnInit,
+	Output,
+	SimpleChanges,
+	ViewChild
+} from '@angular/core';
+////////PPMDS libraries
+import { PmdsCdkButtonComponent } from '../../../pmds-cdk-button/pmds-cdk-button.component';
+import { PmdsCdkLoaderComponent } from '../../../pmds-cdk-loader/pmds-cdk-loader.component';
+////////Component imports
+import {
+	PmdsCdkAutocompleteDynamicRowComponent
+} from './pmds-cdk-autocomplete-dynamic-row/pmds-cdk-autocomplete-dynamic-row.component';
+import {
+	IPmdsCdkAutocompleteDynamicRowComponentConfig,
+	IPmdsCdkAutocompleteTableConfig
+} from '../../models/pmds-cdk-autocomplete-table.model';
+import { IPmdsCdkAutocompleteStates } from '../../models/pmds-cdk-autocomplete.model';
+import {
+	PmdsCdkAutocompleteDynamicCardComponent
+} from './pmds-cdk-autocomplete-dynamic-card/pmds-cdk-autocomplete-dynamic-card.component';
+
+@Component({
+	selector: 'pmds-cdk-autocomplete-table',
+	standalone: true,
+	imports: [
+		NgClass,
+		NgTemplateOutlet,
+		PmdsCdkAutocompleteDynamicRowComponent,
+		PmdsCdkAutocompleteDynamicCardComponent,
+		PmdsCdkButtonComponent,
+		PmdsCdkLoaderComponent
+	],
+	templateUrl: './pmds-cdk-autocomplete-table.component.html'
+})
+export class PmdsCdkAutocompleteTableComponent implements OnInit, OnChanges {
+	@ViewChild('scrollableDiv') scrollableDiv!: ElementRef;
+
+	private _states!: IPmdsCdkAutocompleteStates;
+	@Input()
+	get states(): IPmdsCdkAutocompleteStates {
+		return this._states;
+	}
+
+	set states(value: IPmdsCdkAutocompleteStates) {
+		if (value) {
+			this._states = value;
+		}
+	}
+
+	@Input() config!: IPmdsCdkAutocompleteTableConfig;
+	@Input() data!: unknown[];
+	@Input() dataQA!: string;
+	@Input() suggestions!: string;
+	@Input() paginationInfo = {
+		total: 0,
+		actualPage: 1,
+		itemsPage: 10
+	};
+
+	@Output() scrollEnd: EventEmitter<void> = new EventEmitter();
+	@Output() selectRow: EventEmitter<unknown> = new EventEmitter();
+
+	componentSelector = 'pmds-cdk-autocomplete-table-'
+	noMoreData = false;
+	dataCurrentPage!: any[];
+	hoverOnTable = false;
+	rowComponentConfig!: IPmdsCdkAutocompleteDynamicRowComponentConfig;
+
+	ngOnInit() {
+		if (this.config && this.config?.rowComponent) {
+			const {rowComponent} = this.config;
+			this.rowComponentConfig = rowComponent;
+		}
+	}
+
+	ngOnChanges(changes: SimpleChanges) {
+		this.noMoreData = changes['data']?.currentValue?.length && this.paginationInfo.total && changes['data']?.currentValue?.length >= this.paginationInfo.total;
+
+		if (this.paginationInfo.actualPage === 1 && this.scrollableDiv)
+			this.scrollableDiv.nativeElement.scrollTo(0, 0);
+
+
+		if (changes['data']?.currentValue?.length > this.paginationInfo.itemsPage) {
+			const data = changes['data']?.currentValue;
+			this.dataCurrentPage = [];
+			for (
+				let index =
+					this.paginationInfo.itemsPage * (this.paginationInfo.actualPage - 1);
+				index < data.length;
+				index++
+			) {
+				const element = data[index];
+				this.dataCurrentPage.push(element);
+			}
+		} else {
+			this.dataCurrentPage = changes['data']?.currentValue;
+		}
+	}
+
+	onClick(item: unknown) {
+		this.rowComponentConfig?.selectRowAction
+			? this.rowComponentConfig.selectRowAction(item)
+			: null;
+		this.selectRow.emit(item);
+	}
+
+	onScroll() {
+		const element = this.scrollableDiv.nativeElement;
+		if (element.scrollTop + element.clientHeight >= element.scrollHeight && !this.noMoreData && this.data.length) {
+			setTimeout(() => {
+				this.scrollEnd.emit();
+			}, 300);
+		}
+	}
+
+	updateTableHover(hover: boolean) {
+		this.hoverOnTable = hover;
+	}
+}

package/libs/pmds-cdk/src/lib/pmds-cdk-autocomplete/index.ts

@@ -0,0 +1,3 @@
+export * from './models/pmds-cdk-autocomplete-table.model';
+export * from './models/pmds-cdk-autocomplete.model';
+export * from './pmds-cdk-autocomplete.component';

package/libs/pmds-cdk/src/lib/pmds-cdk-autocomplete/models/pmds-cdk-autocomplete-table.model.ts

@@ -0,0 +1,35 @@
+////////Angular imports
+import { Type } from "@angular/core";
+
+export interface IPmdsCdkAutocompleteTableConfig {
+    rowComponent?: IPmdsCdkAutocompleteDynamicRowComponentConfig;
+    error?: {
+        title: string;
+        body?: string;
+    }
+    button?: {
+        label: string;
+        show: boolean;
+        action: () => void;
+    },
+    customHeight?: string;
+	loadingLiterals?: string,
+    noResultsLiterals?: {
+        title: string,
+        msg: string
+    };
+
+}
+
+export interface IPmdsCdkAutocompleteDynamicRowComponentConfig {
+    component: Type<unknown>;
+    cardComponent?: Type<unknown>;
+    styles?: string;
+    selectRowAction?: (row: unknown) => void;
+}
+
+export interface IPmdsCdkAutocompleteRowConfigParam<T> {
+    data: T;
+    rowIndex: number;
+    stylesConfig?: string;
+}

package/libs/pmds-cdk/src/lib/pmds-cdk-autocomplete/models/pmds-cdk-autocomplete.model.ts

@@ -0,0 +1,41 @@
+////////Angular imports
+import { Type } from "@angular/core";
+////////Third party libraries
+import { Observable } from "rxjs";
+////////Component imports
+import { IPmdsCdkAutocompleteTableConfig } from "./pmds-cdk-autocomplete-table.model";
+
+export interface IPmdsCdkAutocompleteConfig {
+    customWidth?: string;
+    input?: IPmdsCdkAutompleteInputConfig;
+    table: IPmdsCdkAutocompleteTableConfig;
+}
+
+export interface IPmdsCdkAutompleteInputConfig {
+    customWidth?: string;
+    icon?: string;
+    labelComponent?: IPmdsCdkAutocompleteDynamicLabelComponentConfig;
+    placeholder?: string;
+    type?: string;
+};
+
+export interface IPmdsCdkAutocompleteStates {
+    isError?: boolean;
+    isLoading?: boolean;
+}
+
+export interface IPmdsCdkAutocompleteSuggestions {
+    search: string;
+    total?: number;
+}
+
+export interface IPmdsCdkAutocompleteDynamicLabelComponentConfig {
+    component: Type<unknown>;
+}
+
+export interface IPmdsCdkAutocompleteLabelConfigParam<T> {
+  data: Observable<T>;
+}
+
+export const PMDS_CDK_AUTOCOMPLETE_DEFAULT_THROTTLE_TIME = 500;
+export const PMDS_CDK_AUTOCOMPLETE_DEFAULT_DEBOUNCE_TIME = 250;

package/libs/pmds-cdk/src/lib/pmds-cdk-autocomplete/pmds-cdk-autocomplete.component.html

@@ -0,0 +1,135 @@
+@if (!skeleton) {
+	<section
+		class="relative w-full font-body-m-regular h-[72px]"
+		[ngClass]="config.input?.customWidth || 'w-full'"
+	>
+		<div
+			class="flex items-center justify-center"
+			(click)="label = null; inputForm.focus()"
+		>
+			<!-- INPUT -->
+			<input
+				class="py-3 px-3 pr-12 h-12 border border-color-border-default w-full text-base outline-none pt-7 peer text-color-text-primary [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none rounded-pmds"
+				#inputForm
+				aria-label="autocomplete"
+				pmdsTitle
+				[disabled]="isDisabled"
+				[value]="value"
+				[type]="config.input?.type"
+				(input)="onInput($event)"
+				(focusin)="onFocusIn(); this.updateClearButtonOnFocus(true)"
+				(focusout)="onFocusOut(); this.updateClearButtonOnFocus(false)"
+				(keyup.enter)="onEnter()"
+				[ngClass]="{
+				'border-color-border-default focus:border-color-border-focus':
+					!showError && !isDisabled && !focusin,
+				'border-color-border-error focus:border-color-border-error border-b-1':
+					(showError && !isDisabled && !focusin) ||
+					(label === null &&
+						value.length === 0 &&
+						!focusin &&
+						!showError &&
+						labelErrorNotSelected),
+				'border-color-border-focus': focusin,
+				'!pr-20': (value && !label && !isDisabled) || focusin,
+				'border-color-border-disabled text-color-text-disabled bg-color-surface-disabled pointer-event pointer-events-none':
+					isDisabled
+			}"
+				[attr.data-qa-id]="dataQA + componentSelector + 'input'"
+				placeholder=" "
+			/>
+			<!-- END INPUT -->
+			<!-- PLACEHOLDER -->
+			<label
+				class="absolute max-w-[80%] cursor-text font-body-xs-regular pt-1 top-0 left-3 transform duration-300 peer-placeholder-shown:top-3 peer-placeholder-shown:pt-0 peer-placeholder-shown:font-body-m-regular peer-focus:top-0 peer-focus:pt-1 peer-focus:font-body-xs-regular"
+				[ngClass]="{
+				'text-color-text-tertiary': !isDisabled,
+				'text-color-text-disabled pointer-event pointer-events-none':
+					isDisabled
+			}"
+				[attr.data-qa-id]="dataQA + componentSelector + 'placeholder'"
+				(click)="inputForm.focus()"
+				pmdsTitle
+			>
+				{{ config.input?.placeholder }}
+			</label>
+			<!-- END PLACEHOLDER -->
+			<!-- DYNAMIC LABEL -->
+			@if (config.input?.labelComponent) {
+				<pmds-cdk-autocomplete-dynamic-label
+					[autocompleteDynamicLabelComponent]="(config.input?.labelComponent)!.component"
+					[data]="label"
+					[ngClass]="{
+						'text-color-text-disabled pointer-event pointer-events-none':
+							isDisabled
+					}"
+					[attr.data-qa-id]="dataQA + componentSelector + 'selection-label'"
+					(setInput)="onSetInput($event)"
+				/>
+			}
+			<!-- END DYNAMIC LABEL -->
+			<!-- CLEAR -->
+			@if (value && !label && !isDisabled) {
+				<div class="absolute flex items-center justify-center text-[8px] w-4 h-4 top-4 cursor-pointer rounded-full text-color-text-secondary bg-color-text-primary animate-fade-in_fast"
+					 [ngClass]="{
+						'right-14': config.input?.icon,
+						'right-5': !config.input?.icon
+					}"
+					 [attr.data-qa-id]="dataQA + componentSelector + 'button-clear'"
+					 (mousedown)="onClear()"
+					 (mouseup)="inputForm.focus()"
+				>
+					<div>&#10005;</div>
+				</div>
+			}
+
+			<!-- END CLEAR -->
+			<!-- ICON -->
+			@if (config.input?.icon) {
+				<div class="absolute flex items-center justify-center cursor-text top-3 right-[1rem] text-color-icon-info animate-fade-in_fast"
+					 [ngClass]="{
+						'text-color-icon-disabled pointer-events-none': isDisabled
+					}"
+					 [attr.data-qa-id]="dataQA + componentSelector + 'icon'"
+					 (click)="focusin && inputForm.focus()"
+				>
+					<div [class]="config.input?.icon + ' text-2xl'"></div>
+				</div>
+			}
+			<!-- END ICON -->
+		</div>
+		<!-- FORM ERROR MESSAGES -->
+		<pmds-cdk-form-error-message
+			[control]="control"
+			[controlName]="formControlName"
+			[hidden]="!showError || focusin"
+			[label]="labelError"
+			[dataQA]="dataQA + componentSelector"
+			[literalsErrorFn]="literalsErrorFn"
+		/>
+		<!-- END FORM ERROR MESSAGES -->
+		@if (label === null && value.length === 0 && !focusin && !showError && labelErrorNotSelected) {
+			<section class="h-5 pt-[2px]">
+				<div class="text-color-text-error font-body-xs-regular ml-3">
+					{{ labelErrorNotSelected }}
+				</div>
+			</section>
+		}
+		<!-- TABLE -->
+		<pmds-cdk-autocomplete-table
+			class="z-[11] absolute left-0 right-0"
+			(click)="omitClose = true"
+			[config]="config.table"
+			[data]="data"
+			[states]="states"
+			[suggestions]="suggestions"
+			[dataQA]="dataQA + componentSelector"
+			[paginationInfo]="paginationInfo"
+			(selectRow)="onSelectRow($event)"
+			(scrollEnd)="onScrollEnd()"
+		/>
+		<!-- END TABLE -->
+	</section>
+} @else {
+	<pmds-cdk-autocomplete-skeleton class="h-[72px]" [dataQA]="dataQA + componentSelector" />
+}

package/libs/pmds-cdk/src/lib/pmds-cdk-autocomplete/pmds-cdk-autocomplete.component.spec.ts

@@ -0,0 +1,95 @@
+////////Angular imports
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ControlContainer, FormControl, FormGroup, FormGroupDirective } from '@angular/forms';
+////////Component imports
+import { PmdsCdkAutocompleteComponent } from './pmds-cdk-autocomplete.component';
+import { PmdsCdkAutocompleteDynamicLabelComponent } from './components/pmds-cdk-autocomplete-dynamic-label/pmds-cdk-autocomplete-dynamic-label.component';
+import { PmdsCdkAutocompleteDynamicRowComponent } from './components/pmds-cdk-autocomplete-table/pmds-cdk-autocomplete-dynamic-row/pmds-cdk-autocomplete-dynamic-row.component';
+import { IPmdsCdkAutocompleteConfig } from './models/pmds-cdk-autocomplete.model';
+
+describe('PmdsCdkAutocompleteComponent', () => {
+    let component: PmdsCdkAutocompleteComponent;
+    let fixture: ComponentFixture<PmdsCdkAutocompleteComponent>;
+    
+    const fg: FormGroup = new FormGroup({
+        'control': new FormControl('')
+    });
+    let fgd: FormGroupDirective;
+
+    const mockAutocompleteConfig: IPmdsCdkAutocompleteConfig = {
+        input: {
+            labelComponent: {
+                component: PmdsCdkAutocompleteDynamicLabelComponent
+            }
+        },
+        table: {
+            rowComponent: {
+                component: PmdsCdkAutocompleteDynamicRowComponent
+            }
+        }
+    };
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [
+                PmdsCdkAutocompleteComponent,
+                PmdsCdkAutocompleteDynamicLabelComponent,
+                PmdsCdkAutocompleteDynamicRowComponent
+            ],
+            providers: [
+                {
+                    provide: ControlContainer, useValue: fgd
+                }
+            ]
+        })
+            .compileComponents();
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(PmdsCdkAutocompleteComponent);
+        component = fixture.componentInstance;
+        fgd = new FormGroupDirective([], []);
+        fgd.form = fg;
+        component.control = fg;
+        component.config = mockAutocompleteConfig;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('write value', () => {
+        component.onInput({ target: { value: '1' } } as any);
+        expect(component.value).toBe('1');
+    })
+
+    it('register form reactive methods', () => {
+        const fn = () => undefined;
+        component.writeValue('1');
+        expect(component.value).toBe('1');
+        component.writeValue('');
+        expect(component.value).toBe('');
+        component.control.markAsDirty();
+        component.control.markAsTouched();
+        component.registerOnChange(fn);
+        component.registerOnTouched(fn);
+        expect(component.control.touched).toBeTruthy();
+    });
+
+    it('enter value', () => {
+        component.onEnter();
+        component['debouncerKeyEnter$'].subscribe(r => expect(r).toBeTruthy());
+    });
+
+    it('select row', () => {
+        component.onSelectRow({ target: { value:'1' } } as any);
+        expect(component.label).toStrictEqual({ target: { value: '1' } });
+    });
+
+    it('set input', () => {
+        component.onSetInput({ target: { value:'1' } } as any);
+        expect(component.value).toBeDefined();
+    });
+
+});