@updevs/components 1.0.0-alpha.1 → 1.0.0-alpha.3

package/dropdown/src/dropdown.component.html

@@ -0,0 +1,32 @@
+<h6 *ngIf="!!header" class="dropdown-header">{{header}}</h6>
+
+<ng-container *ngFor="let item of items">
+    <ng-container [ngSwitch]="item.type">
+        <ng-container *ngSwitchCase="'divider'">
+            <div class="dropdown-divider"></div>
+        </ng-container>
+        <ng-container *ngSwitchCase="'default'">
+            <upd-button [customClasses]="'dropdown-item' + (item.isDisabled ? ' disabled' : '') +(item.isActive ? ' active' : '')"
+                [shouldIgnoreBtnClass]="true" (clicked)="onSelect(item)">
+                <upd-icon *ngIf="!!item.icon" [model]="item.icon" customClasses="dropdown-item-icon"></upd-icon>
+                <ng-container *ngIf="!!item.leftBoxText || !!item.leftBoxImage">
+                    <span style="background-image: url({{item.leftBoxImage}})"
+                        class="avatar avatar-xs rounded me-2">{{item.leftBoxText}}</span>
+                </ng-container>
+                {{item.text}}
+                <span *ngIf="!!item.badgeColor" class="badge bg-{{item.badgeColor}} ms-auto">{{item.badgeText}}</span>
+            </upd-button>
+        </ng-container>
+        <ng-container *ngSwitchCase="'radio'">
+            <upd-radio (selected)="onSelect(item)" [label]="item.text" [isChecked]="item.isChecked || false"
+                [wrapperClasses]="'dropdown-item' + (item.isDisabled ? ' disabled' : '') +(item.isActive ? ' active' : '')"></upd-radio>
+        </ng-container>
+        <ng-container *ngSwitchCase="'checkbox'">
+            <upd-checkbox (changed)="onCheckboxChange(item, $event)" [label]="item.text" [isChecked]="item.isChecked || false"
+                [isSwitch]="item.isSwitch || false"
+                [wrapperClasses]="'dropdown-item' + (item.isDisabled ? ' disabled' : '') +(item.isActive ? ' active' : '')"></upd-checkbox>
+        </ng-container>
+    </ng-container>
+</ng-container>
+
+<ng-content></ng-content>

package/dropdown/src/dropdown.component.scss

@@ -0,0 +1,19 @@
+.dropdown-show {
+    display: inline-block !important;
+    width: 100% !important;
+    position: relative;
+    top: 0 !important;
+    margin-bottom: 1rem !important;
+}
+
+.dropdown-item > .form-check {
+    margin-bottom: 0 !important;
+}
+
+.dropdown-item {
+    cursor: pointer !important;
+}
+
+.dropdown-overflow {
+    overflow-y: auto !important;
+}

package/dropdown/src/dropdown.component.spec.ts

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

package/dropdown/src/dropdown.component.ts

@@ -0,0 +1,182 @@
+import {
+    Component,
+    HostBinding,
+    ViewEncapsulation,
+    Input,
+    OnInit,
+    OnChanges,
+    SimpleChanges,
+    Output,
+    EventEmitter,
+    NgZone,
+    ElementRef,
+    Renderer2,
+    RendererStyleFlags2,
+    inject
+} from '@angular/core';
+import { BaseComponent, PositioningService, ComputePositionResult, DomEventsService } from '@updevs/sdk/layout';
+import { TopBottomLeftRightType } from '@updevs/sdk/types';
+
+import { DropdownItem } from './models/dropdown-item';
+
+@Component({
+    selector: 'upd-dropdown',
+    templateUrl: './dropdown.component.html',
+    styleUrls: ['./dropdown.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class DropdownComponent extends BaseComponent implements OnInit, OnChanges {
+    @HostBinding('class') localWrapperClasses = '';
+
+    @Input() items: DropdownItem[] = [];
+    @Input() header?: string;
+    @Input()
+    set isOpen(value: boolean) {
+        this.updateOpenState(value);
+
+        if (this.shouldCloseOnOutsideClick) {
+            this.closeOnOutsideClick();
+        }
+    }
+    @Input() shouldCloseOnOutsideClick = false;
+    @Input() arrowType?: 'left' | 'right';
+    @Input() wrapperClasses = '';
+    /**
+     * Elements that won't trigger the close of the dropdown if clicked upon.
+     * Only works when `shouldCloseOnOutsideClick` is set to true.
+     */
+    @Input() elementsExcludedFromOutsideClick?: HTMLElement[];
+    /**
+     * Maximum height of the component.
+     * If set, scroll bars will be used when the content's size is bigger than the component's.
+     */
+    @Input() maxHeight?: number;
+    /**
+     * Maximum width of the component.
+     * If set, scroll bars will be used when the content's size is bigger than the component's.
+     */
+    @Input() maxWidth?: number;
+    /**
+     * If set, the position of the dropdown will be set according to this element.
+     */
+    @Input() dropdownReference?: ElementRef;
+    /**
+     * If a reference is provided, this will be the position of the dropdown in relation to that reference.
+     */
+    @Input() dropdownReferencePosition: TopBottomLeftRightType = 'bottom';
+
+    @Output() readonly isOpenChange = new EventEmitter<boolean>();
+    @Output() readonly selectedItem = new EventEmitter<DropdownItem>();
+    @Output() readonly checkboxChanged = new EventEmitter<DropdownItem>();
+
+    get isOpen(): boolean {
+        return this._isOpen;
+    }
+
+    private baseWrapperClasses = 'dropdown-menu';
+    private _isOpen = false;
+    private readonly dropdownElement: HTMLElement;
+    private readonly ngZone = inject(NgZone);
+    private readonly elementRef = inject(ElementRef);
+    private readonly renderer = inject(Renderer2);
+    private readonly positioningService = inject(PositioningService);
+    private readonly domEventsService = inject(DomEventsService);
+
+    constructor() {
+        super();
+        this.dropdownElement = this.elementRef.nativeElement;
+    }
+
+    ngOnInit(): void {
+        this.updateStyle();
+    }
+
+    ngOnChanges(changes: SimpleChanges): void {
+        this.updateStyle();
+    }
+
+    onSelect(item: DropdownItem): void {
+        this.selectedItem.emit(item);
+    }
+
+    onCheckboxChange(item: DropdownItem, isChecked: boolean): void {
+        item.isChecked = isChecked;
+        this.checkboxChanged.emit(item);
+    }
+
+    private closeOnOutsideClick(): void {
+        const excludedElements = [];
+
+        if (!!this.dropdownReference) {
+            excludedElements.push(this.dropdownReference.nativeElement);
+        }
+
+        const outsideClickSub = this.domEventsService.startOutsideClickListener(
+            () => this.ngZone.run(() => {
+                this.updateOpenState(false);
+                this.ngZone.run(() => this.updateWrapperClasses());
+            }),
+            this.dropdownElement,
+            true,
+            ...excludedElements
+        );
+        this.addSubscriptions(outsideClickSub);
+    }
+
+    private updateStyle(): void {
+        this.updateWrapperClasses();
+        this.updateMaxHeight();
+        this.startPositionUpdate();
+    }
+
+    private updateWrapperClasses(): void {
+        this.localWrapperClasses = this.baseWrapperClasses + ' ' + this.wrapperClasses;
+
+        if (this.isOpen) {
+            this.localWrapperClasses += ' dropdown-show';
+        }
+
+        if (!!this.arrowType) {
+            this.localWrapperClasses += ' dropdown-menu-arrow' + (this.arrowType === 'right' ? ' dropdown-menu-end' : '');
+        }
+
+        if (!!this.maxHeight) {
+            this.localWrapperClasses += ' dropdown-overflow';
+        }
+    }
+
+    private updateOpenState(isOpen: boolean): void {
+        this._isOpen = isOpen;
+        this.isOpenChange.emit(isOpen);
+    }
+
+    private updateMaxHeight(): void {
+        this.renderer.setStyle(this.dropdownElement, 'max-height', `${this.maxHeight}px`, RendererStyleFlags2.Important);
+    }
+
+    private startPositionUpdate(): void {
+        if (!this.dropdownReference) {
+            return;
+        }
+
+        this.ngZone.runOutsideAngular(() =>
+            this.positioningService
+                .computePosition(this.dropdownReference!, this.elementRef, { placement: this.dropdownReferencePosition })
+                .subscribe(resp => this.updatePosition(resp))
+        );
+    }
+
+    private updatePosition(result: ComputePositionResult): void {
+        const reference = this.dropdownReference!.nativeElement.getBoundingClientRect();
+        const ddElement = this.dropdownElement;
+
+        if (!!this.maxWidth) {
+            this.renderer.setStyle(ddElement, 'max-width', `${this.maxWidth}px`, RendererStyleFlags2.Important);
+        }
+
+        this.renderer.setStyle(ddElement, 'position', result.strategy, RendererStyleFlags2.Important);
+        this.renderer.setStyle(ddElement, 'width', `${Math.abs(reference.width)}px`, RendererStyleFlags2.Important);
+        this.renderer.setStyle(ddElement, 'left', `${result.x}px`, RendererStyleFlags2.Important);
+        this.renderer.setStyle(ddElement, 'top', `${result.y}px`, RendererStyleFlags2.Important);
+    }
+}

package/dropdown/src/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/dropdown/src/models/dropdown-item.ts

@@ -0,0 +1,22 @@
+import { BgColorStyleType } from '@updevs/sdk/layout';
+import { IconModel } from '@updevs/icons';
+
+import { DropdownItemType } from './dropdown-item.type';
+
+export interface DropdownItem {
+    id?: any;
+    text?: string;
+    icon?: IconModel;
+    type: DropdownItemType;
+    /**
+     * If type is checkbox, and this is set, the switch style will be used.
+     */
+    isSwitch?: boolean;
+    isDisabled?: boolean;
+    isActive?: boolean;
+    leftBoxText?: string;
+    leftBoxImage?: string;
+    badgeColor?: BgColorStyleType;
+    badgeText?: string;
+    isChecked?: boolean;
+}

package/dropdown/src/models/dropdown-item.type.ts

@@ -0,0 +1 @@
+export type DropdownItemType = 'default' | 'radio' | 'checkbox' | 'divider';

package/dropdown/src/models/public-api.ts

@@ -0,0 +1,2 @@
+export * from './dropdown-item';
+export * from './dropdown-item.type';

package/dropdown/src/public-api.ts

@@ -0,0 +1,3 @@
+export * from './models/public-api';
+export * from './dropdown.component';
+export * from './upd-dropdown.module';

package/dropdown/src/upd-dropdown.module.ts

@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { UpdIconsModule } from '@updevs/icons';
+import { UpdButtonModule } from '@updevs/components/button';
+import { UpdRadioModule } from '@updevs/components/form-controls/radio';
+import { UpdCheckboxModule } from '@updevs/components/form-controls/checkbox';
+
+import { DropdownComponent } from './dropdown.component';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        UpdIconsModule,
+        UpdRadioModule,
+        UpdCheckboxModule,
+        UpdButtonModule
+    ],
+    declarations: [
+        DropdownComponent
+    ],
+    exports: [
+        DropdownComponent
+    ]
+})
+export class UpdDropdownModule {}

package/form/ng-package.json

@@ -0,0 +1,7 @@
+{
+    "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+    "dest": "../../../../node_modules/@updevs/components/form",
+    "lib": {
+        "entryFile": "src/index.ts"
+    }
+}

package/form/src/form.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@NgModule({
+    declarations: [],
+    imports: [
+        CommonModule
+    ]
+})
+export class FormModule {}

package/form/src/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/form/src/public-api.ts

@@ -0,0 +1 @@
+export * from './form.module';

package/form-controls/checkbox/ng-package.json

@@ -0,0 +1,7 @@
+{
+    "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+    "dest": "../../../../node_modules/@updevs/components/form-controls/checkbox",
+    "lib": {
+        "entryFile": "src/index.ts"
+    }
+}

package/form-controls/checkbox/src/checkbox.component.html

@@ -0,0 +1,7 @@
+<label class="form-check" [class.form-check-inline]="isInline" [class.form-switch]="isSwitch">
+    <input type="checkbox" (change)="changed.emit(isChecked)" [disabled]="isDisabled" [ngClass]="classes" [value]="value"
+        [attr.name]="name" [attr.readonly]="isReadOnly ? '' : undefined" [(ngModel)]="isChecked">
+    <span *ngIf="!!label" class="form-check-label">{{label}}</span>
+    <span *ngIf="!!description" class="form-check-description">{{description}}</span>
+    <div *ngIf="validationStatus === 'invalid' && !!invalidStatusText" class="invalid-feedback">{{invalidStatusText}}</div>
+</label>

package/form-controls/checkbox/src/checkbox.component.spec.ts

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

package/form-controls/checkbox/src/checkbox.component.ts

@@ -0,0 +1,48 @@
+import { Component, SimpleChanges, Input, OnInit, OnChanges, ViewEncapsulation, HostBinding, Output, EventEmitter } from '@angular/core';
+import { ValidationStatusType } from '@updevs/components';
+
+@Component({
+    selector: 'upd-checkbox',
+    templateUrl: './checkbox.component.html',
+    styleUrls: ['./checkbox.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class CheckboxComponent implements OnInit, OnChanges {
+    @HostBinding('class') @Input() wrapperClasses = '';
+
+    @Input() label?: string;
+    @Input() value?: any;
+    @Input() customClasses?: string;
+    @Input() name?: string;
+    @Input() description?: string;
+    @Input() isDisabled = false;
+    @Input() isReadOnly = false;
+    @Input() isChecked = false;
+    @Input() isInline = false;
+    @Input() isSwitch = false;
+    @Input() validationStatus?: ValidationStatusType;
+    @Input() invalidStatusText?: string;
+
+    @Output() readonly changed = new EventEmitter<boolean>();
+
+    classes: string[] = [];
+
+    ngOnInit(): void {
+        this.updateClasses();
+    }
+
+    ngOnChanges(changes: SimpleChanges): void {
+        this.updateClasses();
+    }
+
+    private updateClasses(): void {
+        const lClasses: string[] = ['form-check-input'];
+
+        if (!!this.validationStatus) {
+            const statusCls = `is-${this.validationStatus}`;
+            lClasses.push(statusCls);
+        }
+
+        this.classes = [...lClasses, ...(this.customClasses || '').split(' ')];
+    }
+}

package/form-controls/checkbox/src/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/form-controls/checkbox/src/public-api.ts

@@ -0,0 +1,3 @@
+export * from './checkbox.component';
+export * from './upd-checkbox.module';
+

package/form-controls/checkbox/src/upd-checkbox.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { CheckboxComponent } from './checkbox.component';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        FormsModule
+    ],
+    declarations: [
+        CheckboxComponent
+    ],
+    exports: [
+        CheckboxComponent
+    ]
+})
+export class UpdCheckboxModule {}

package/form-controls/input/ng-package.json

@@ -0,0 +1,7 @@
+{
+    "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+    "dest": "../../../../node_modules/@updevs/components/form-controls/input",
+    "lib": {
+        "entryFile": "src/index.ts"
+    }
+}

package/form-controls/input/src/directives/input-append.directive.spec.ts

@@ -0,0 +1,8 @@
+import { InputAppendDirective } from './input-append.directive';
+
+describe('InputAppendDirective', () => {
+  it('should create an instance', () => {
+    const directive = new InputAppendDirective();
+    expect(directive).toBeTruthy();
+  });
+});

package/form-controls/input/src/directives/input-append.directive.ts

@@ -0,0 +1,11 @@
+import { Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+    selector: 'ng-template[updInputAppend]'
+})
+export class InputAppendDirective {
+    constructor(
+        public templateRef: TemplateRef<any>
+    ) {
+    }
+}

package/form-controls/input/src/directives/input-prepend.directive.spec.ts

@@ -0,0 +1,8 @@
+import { InputPrependDirective } from './input-prepend.directive';
+
+describe('InputPrependDirective', () => {
+  it('should create an instance', () => {
+    const directive = new InputPrependDirective();
+    expect(directive).toBeTruthy();
+  });
+});

package/form-controls/input/src/directives/input-prepend.directive.ts

@@ -0,0 +1,11 @@
+import { Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+    selector: 'ng-template[updInputPrepend]'
+})
+export class InputPrependDirective {
+    constructor(
+        public templateRef: TemplateRef<any>
+    ) {
+    }
+}

package/form-controls/input/src/directives/public-api.ts

@@ -0,0 +1,2 @@
+export * from './input-append.directive';
+export * from './input-prepend.directive';

package/form-controls/input/src/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/form-controls/input/src/input.component.html

@@ -0,0 +1,82 @@
+<ng-container *ngIf="!!appendTemplate || !!prependTemplate; else structureTpl">
+    <ng-template [ngTemplateOutlet]="labelTpl"></ng-template>
+    <div class="input-group" [class.input-group-flat]="isInputGroupFlat">
+        <ng-container *ngIf="!!prependTemplate">
+            <div *ngIf="!isPrependButton" class="input-group-text">
+                <ng-template [ngTemplateOutlet]="prependTemplate.templateRef"></ng-template>
+            </div>
+            <ng-template *ngIf="isPrependButton" [ngTemplateOutlet]="prependTemplate.templateRef"></ng-template>
+        </ng-container>
+        <ng-template [ngTemplateOutlet]="inputTpl"></ng-template>
+        <ng-container *ngIf="!!appendTemplate">
+            <div *ngIf="!isAppendButton" class="input-group-text">
+                <ng-template [ngTemplateOutlet]="appendTemplate.templateRef"></ng-template>
+            </div>
+            <ng-template *ngIf="isAppendButton" [ngTemplateOutlet]="appendTemplate.templateRef"></ng-template>
+        </ng-container>
+    </div>
+</ng-container>
+
+<ng-template #structureTpl>
+    <ng-template *ngIf="!!prependIconModel || !!appendIconModel || isLoading; else inputTpl" [ngTemplateOutlet]="inputIconTpl"></ng-template>
+</ng-template>
+
+<ng-template #inputTpl>
+    <ng-container *ngIf="(!hint && !hintTemplate); else hintTpl">
+        <ng-template *ngIf="shouldDisplayInnerLabel && !isFloating" [ngTemplateOutlet]="labelTpl"></ng-template>
+        <ng-template [ngTemplateOutlet]="basicInputTpl"></ng-template>
+        <ng-template *ngIf="shouldDisplayInnerLabel && isFloating" [ngTemplateOutlet]="labelTpl"></ng-template>
+    </ng-container>
+</ng-template>
+
+<ng-template #inputIconTpl>
+    <ng-template [ngTemplateOutlet]="labelTpl"></ng-template>
+    <div class="input-icon">
+        <span *ngIf="!!prependIconModel || (isLoading && loaderPosition === 'prepend')" class="input-icon-addon">
+            <ng-container *ngIf="!!prependIconModel; else loaderTpl">
+                <upd-icon [model]="prependIconModel"></upd-icon>
+            </ng-container>
+        </span>
+        <ng-template [ngTemplateOutlet]="inputTpl"></ng-template>
+        <span *ngIf="!!appendIconModel || (isLoading && loaderPosition === 'append')" class="input-icon-addon">
+            <ng-container *ngIf="!!appendIconModel; else loaderTpl">
+                <upd-icon [model]="appendIconModel"></upd-icon>
+            </ng-container>
+        </span>
+    </div>
+</ng-template>
+
+<ng-template #hintTpl>
+    <ng-template [ngTemplateOutlet]="labelTpl"></ng-template>
+    <div class="row g-2">
+        <div class="col">
+            <ng-template [ngTemplateOutlet]="basicInputTpl"></ng-template>
+        </div>
+        <div class="col-auto align-self-center">
+            <span class="form-help" [updPopover]="hint" [updPopoverTemplate]="hintTemplate"
+                [updPopoverActAsTooltip]="hintAsTooltip">?</span>
+        </div>
+    </div>
+</ng-template>
+
+<ng-template #loaderTpl>
+    <div class="spinner-border spinner-border-sm text-muted" role="status"></div>
+</ng-template>
+
+<ng-template #basicInputTpl>
+    <ng-container *ngIf="!!mask; else defaultInputTpl">
+        <input [updMask]="mask" [updMaskConfig]="maskConfig" [attr.type]="type" [attr.maxlength]="maxLength" [disabled]="isDisabled"
+            [ngClass]="classes" [placeholder]="placeholder" [value]="value || ''" [attr.name]="name"
+            [attr.readonly]="isReadOnly ? '' : undefined" (input)="onInputChange($event)"/>
+    </ng-container>
+    <ng-template #defaultInputTpl>
+        <input [attr.type]="type" [attr.maxlength]="maxLength" [disabled]="isDisabled" [ngClass]="classes"
+            [placeholder]="placeholder" [value]="value || ''" [attr.name]="name" [attr.readonly]="isReadOnly ? '' : undefined"
+            (input)="onInputChange($event)"/>
+    </ng-template>
+    <div *ngIf="validationStatus === 'invalid' && !!invalidStatusText" class="invalid-feedback">{{invalidStatusText}}</div>
+</ng-template>
+
+<ng-template #labelTpl>
+    <label *ngIf="!!label" class="form-label" [class.required]="isRequired">{{label}}</label>
+</ng-template>

package/form-controls/input/src/input.component.scss

@@ -0,0 +1,13 @@
+.input-group-text .form-check > .form-check-input {
+    margin: 0 !important;
+}
+
+.input-group-text > upd-checkbox {
+    height: 16px !important; // TODO: validate if it won't break other sizes.
+}
+
+.input-group-text .form-check {
+    margin: 0 !important;
+    padding-left: 0 !important;
+    min-height: 16px !important;
+}

package/form-controls/input/src/input.component.spec.ts

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