@updevs/components 1.0.0-alpha.9 → 1.0.0-alpha.90

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

@@ -1,23 +0,0 @@
-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

@@ -1,233 +0,0 @@
-import {
-    Component,
-    HostBinding,
-    ViewEncapsulation,
-    Input,
-    OnInit,
-    OnChanges,
-    Output,
-    EventEmitter,
-    NgZone,
-    ElementRef,
-    Renderer2,
-    RendererStyleFlags2,
-    inject, input
-} from '@angular/core';
-import {
-    BaseComponent,
-    PositioningService,
-    ComputePositionResult,
-    DomEventsService,
-    ButtonModel,
-    OverflowStrategyType
-} from '@updevs/sdk/layout';
-import { TopBottomLeftRightType, LeftRightType } from '@updevs/sdk/types';
-import { TextService } from '@updevs/sdk';
-
-import { DropdownItem } from './models/dropdown-item';
-import { DropdownActionClickedModel } from './models/dropdown-action-clicked.model';
-
-@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?: LeftRightType;
-    @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[];
-    /**
-     * Minimum height of the component.
-     */
-    @Input() minHeight?: number;
-    /**
-     * 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;
-    /**
-     * Minimum width of the component.
-     */
-    @Input() minWidth?: 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>();
-
-    textOverflowStrategy = input<OverflowStrategyType>('wrap');
-
-    readonly textService = inject(TextService);
-    get isOpen(): boolean {
-        return this._isOpen;
-    }
-    get overflowClass(): string {
-        switch (this.textOverflowStrategy()) {
-            case 'no-wrap':
-                return 'text-nowrap';
-            case 'wrap':
-                return 'text-wrap';
-            case 'word-break':
-                return 'text-break';
-            default:
-                return 'text-truncate';
-        }
-    }
-
-    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(): void {
-        this.updateStyle();
-    }
-
-    onSelect(item: DropdownItem): void {
-        this.selectedItem.emit(item);
-    }
-
-    onCheckboxChange(item: DropdownItem, isChecked: boolean): void {
-        item.isChecked = isChecked;
-        this.checkboxChanged.emit(item);
-    }
-
-    adaptAction(btn: ButtonModel, item: DropdownItem): ButtonModel {
-        const defaultFunction = btn.clickFunction;
-        btn.clickFunction = (evt) => {
-            evt.event?.preventDefault();
-            evt.event?.stopPropagation();
-
-            if (!!defaultFunction) {
-                defaultFunction({ event: evt.event, data: { item, button: btn } as DropdownActionClickedModel });
-            }
-        };
-        return btn;
-    }
-
-    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;
-        const width = Math.abs(reference.width);
-        let widthOffset = 0;
-
-        if (!!this.maxWidth) {
-            this.renderer.setStyle(ddElement, 'max-width', `${this.maxWidth}px`, RendererStyleFlags2.Important);
-        }
-
-        if (!!this.minWidth) {
-            this.renderer.setStyle(ddElement, 'min-width', `${this.minWidth}px`, RendererStyleFlags2.Important);
-            widthOffset = (this.minWidth > width ? this.minWidth - width : 0) / 2;
-        }
-
-        this.renderer.setStyle(ddElement, 'position', result.strategy, RendererStyleFlags2.Important);
-        this.renderer.setStyle(ddElement, 'width', `${width}px`, RendererStyleFlags2.Important);
-        this.renderer.setStyle(ddElement, 'left', `${result.x - widthOffset}px`, RendererStyleFlags2.Important);
-        this.renderer.setStyle(ddElement, 'top', `${result.y}px`, RendererStyleFlags2.Important);
-    }
-}

package/dropdown/src/models/dropdown-action-clicked.model.ts

@@ -1,8 +0,0 @@
-import { ButtonModel } from '@updevs/sdk/layout';
-
-import { DropdownItem } from './dropdown-item';
-
-export interface DropdownActionClickedModel {
-    button: ButtonModel;
-    item: DropdownItem;
-}

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

@@ -1,26 +0,0 @@
-import { BgColorStyleType, ButtonModel } from '@updevs/sdk/layout';
-import { IconModel } from '@updevs/icons';
-import { TextModel } from '@updevs/sdk';
-
-import { DropdownItemType } from './dropdown-item.type';
-import { ToolbarType } from './toolbar.type';
-
-export interface DropdownItem {
-    id?: any;
-    text?: TextModel;
-    icon?: IconModel;
-    type: DropdownItemType;
-    toolbarType?: ToolbarType;
-    /**
-     * 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;
-    actionButtons?: ButtonModel[];
-}

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

@@ -1,25 +0,0 @@
-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/index.ts

@@ -1 +0,0 @@
-export * from './src/index';

package/form/ng-package.json

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

package/form/src/components/dynamic-field/dynamic-field.component.html

@@ -1,83 +0,0 @@
-@switch (field().type) {
-    @case (DynamicFieldType.Input) {
-        <upd-input [name]="field().name" [label]="field().label" [placeholder]="field().placeholder" [hint]="field().hint"
-            [hintAsTooltip]="field().hintAsTooltip || false" [validationStatus]="validationStatus"
-            [validationStatusDescriptions]="validationStatusDescriptions" [layout]="layout()" [isDisabled]="field().isDisabled || false"
-            [type]="field().inputType || 'text'" [labelColSize]="field().labelColSize" [value]="formControl.value"
-            (valueChange)="formControl.setValue($event)" (blurred)="onBlur()"></upd-input>
-    }
-    @case (DynamicFieldType.Checkbox) {
-        <upd-checkbox [name]="field().name" [label]="field().label" [hint]="field().hint" [hintAsTooltip]="field().hintAsTooltip || false"
-            [validationStatus]="validationStatus" [validationStatusDescriptions]="validationStatusDescriptions" [value]="true"
-            [isDisabled]="field().isDisabled || false" [isChecked]="formControl.value" [isInline]="checkboxField.isInline || false"
-            [isSwitch]="checkboxField.isSwitch || false" (changed)="formControl.setValue($event)"></upd-checkbox>
-    }
-    @case (DynamicFieldType.CheckboxGroup) {
-        @if (!!field().label) {
-            <label class="form-label">{{ getText(field().label) }}</label>
-        }
-
-        @for (option of checkboxGroupOptionsKeys; track option) {
-            <upd-checkbox [name]="field().name" [label]="getOptionDescription(option, 'checkbox')" [hint]="field().hint"
-                [hintAsTooltip]="field().hintAsTooltip || false" [validationStatus]="validationStatus"
-                [validationStatusDescriptions]="validationStatusDescriptions" [value]="option" [isDisabled]="field().isDisabled || false"
-                [isChecked]="formControl.value" [isInline]="checkboxField.isInline || false" [isSwitch]="checkboxField.isSwitch || false"
-                (changed)="formControl.setValue(option)"></upd-checkbox>
-        }
-    }
-    @case (DynamicFieldType.Radio) {
-        <upd-radio [name]="field().name" [label]="field().label" [hint]="field().hint" [hintAsTooltip]="field().hintAsTooltip || false"
-            [validationStatus]="validationStatus" [validationStatusDescriptions]="validationStatusDescriptions" [value]="true"
-            [isChecked]="formControl.value" [isDisabled]="field().isDisabled || false" [isInline]="radioField.isInline || false"
-            (selected)="formControl.setValue($event)">
-        </upd-radio>
-    }
-    @case (DynamicFieldType.RadioGroup) {
-        @if (!!field().label) {
-            <label class="form-label">{{ getText(field().label) }}</label>
-        }
-
-        @for (option of radioGroupOptionsKeys; track option) {
-            <upd-radio [name]="field().name" [label]="getOptionDescription(option, 'radio')" [hint]="field().hint"
-                [hintAsTooltip]="field().hintAsTooltip || false" [validationStatus]="validationStatus"
-                [validationStatusDescriptions]="validationStatusDescriptions" [value]="option" [isDisabled]="field().isDisabled || false"
-                [isChecked]="formControl.value" [isInline]="checkboxField.isInline || false"
-                (selected)="formControl.setValue(option)"></upd-radio>
-        }
-    }
-    @case (DynamicFieldType.Select) {
-        <upd-select [name]="field().name" [label]="field().label" [hint]="field().hint" [hintAsTooltip]="field().hintAsTooltip || false"
-            [validationStatus]="validationStatus" [validationStatusDescriptions]="validationStatusDescriptions"
-            [useSystemStyle]="singleSelectField.useSystemStyle || false" [isDisabled]="field().isDisabled || false"
-            [items]="selectField.items" [layout]="layout()" [labelColSize]="field().labelColSize" [store]="selectField.store!"
-            [observable]="selectField.observable" [itemKey]="selectField.itemKey" [itemValue]="selectField.itemValue"
-            [dropdownMaxHeight]="selectField.dropdownMaxHeight || SelectDefaults.dropdownMaxHeight"
-            [typeaheadDebounce]="selectField.typeaheadDebounce || SelectDefaults.typeaheadDebounce"
-            [shouldAutoSearch]="selectField.shouldAutoSearch || SelectDefaults.shouldAutoSearch"
-            [shouldCloseOnOutsideClick]="selectField.shouldCloseOnOutsideClick || SelectDefaults.shouldCloseOnOutsideClick"
-            (selectedItem)="formControl.setValue($event?.value)"></upd-select>
-    }
-    @case (DynamicFieldType.SelectMultiple) {
-        <upd-select-multiple [name]="field().name" [label]="field().label" [hint]="field().hint"
-            [hintAsTooltip]="field().hintAsTooltip || false" [validationStatus]="validationStatus"
-            [validationStatusDescriptions]="validationStatusDescriptions" [isDisabled]="field().isDisabled || false"
-            [items]="selectField.items" [layout]="layout()" [labelColSize]="field().labelColSize" [store]="selectField.store!"
-            [observable]="selectField.observable" [itemKey]="selectField.itemKey" [itemValue]="selectField.itemValue"
-            [dropdownMaxHeight]="selectField.dropdownMaxHeight || SelectDefaults.dropdownMaxHeight"
-            [typeaheadDebounce]="selectField.typeaheadDebounce || SelectDefaults.typeaheadDebounce"
-            [shouldAutoSearch]="selectField.shouldAutoSearch || SelectDefaults.shouldAutoSearch"
-            [shouldCloseOnOutsideClick]="selectField.shouldCloseOnOutsideClick || SelectDefaults.shouldCloseOnOutsideClick"
-            (selectedIds)="formControl.setValue($event)"></upd-select-multiple>
-    }
-    @case (DynamicFieldType.Label) {
-        <label class="form-label">{{ getText(field().label) }}</label>
-    }
-    @case (DynamicFieldType.TextArea) {
-        <upd-textarea [name]="field().name" [label]="field().label" [placeholder]="field().placeholder" [hint]="field().hint"
-            [hintAsTooltip]="field().hintAsTooltip || false" [validationStatus]="validationStatus"
-            [validationStatusDescriptions]="validationStatusDescriptions" [isDisabled]="field().isDisabled || false"
-            [value]="formControl.value" [customClasses]="textareaField.customClasses" [wrapperClasses]="textareaField.wrapperClasses"
-            [maxLength]="textareaField.maxLength" [rows]="textareaField.rows"
-            [displayCharactersCount]="textareaField.displayCharactersCount || false"></upd-textarea>
-    }
-}

package/form/src/components/dynamic-field/dynamic-field.component.scss

@@ -1 +0,0 @@
-

package/form/src/components/dynamic-field/dynamic-field.component.spec.ts

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

package/form/src/components/dynamic-field/dynamic-field.component.ts

@@ -1,102 +0,0 @@
-import { Component, OnInit, HostBinding, inject, InputSignal, input } from '@angular/core';
-import { FormGroup, FormControl } from '@angular/forms';
-import { TextModel, TextService } from '@updevs/sdk';
-import { OptionalType } from '@updevs/sdk/types';
-import { BaseComponent } from '@updevs/sdk/layout';
-import { ColumnSizeHelper, HorizontalVerticalType, ValidationStatusType } from '@updevs/components';
-import { Defaults as SelectDefaults } from '@updevs/components/form-controls/select';
-
-import { ErrorsHelper } from '../../tools/errors-helper';
-import { DynamicFieldType } from '../../models/enums/dynamic-field.type';
-import { DynamicFieldModel } from '../../models/dynamic-field.model';
-import { CheckboxFieldModel } from '../../models/checkbox-field.model';
-import { RadioFieldModel } from '../../models/radio-field.model';
-import { SelectFieldModel } from '../../models/select-field.model';
-import { SingleSelectFieldModel } from '../../models/single-select-field.model';
-import { CheckboxGroupFieldModel } from '../../models/checkbox-group-field.model';
-import { RadioGroupFieldModel } from '../../models/radio-group-field.model';
-import { TextareaFieldModel } from '../../models/textarea-field.model';
-
-@Component({
-    selector: 'upd-dynamic-field',
-    templateUrl: './dynamic-field.component.html',
-    styleUrl: './dynamic-field.component.scss'
-})
-export class DynamicFieldComponent extends BaseComponent implements OnInit {
-    @HostBinding('class') wrapperClasses = '';
-
-    DynamicFieldType = DynamicFieldType;
-    SelectDefaults = SelectDefaults;
-    formGroup: InputSignal<FormGroup> = input.required();
-    field: InputSignal<DynamicFieldModel> = input.required();
-    layout: InputSignal<HorizontalVerticalType> = input.required();
-    validationStatus?: ValidationStatusType;
-    validationStatusDescriptions: TextModel[] = [];
-    get formControl(): FormControl {
-        return this.formGroup().controls[this.field().name] as FormControl;
-    }
-    get checkboxField(): CheckboxFieldModel {
-        return this.field() as CheckboxFieldModel;
-    }
-    get checkboxGroupField(): CheckboxGroupFieldModel {
-        return this.field() as CheckboxGroupFieldModel;
-    }
-    get radioField(): CheckboxFieldModel {
-        return this.field() as RadioFieldModel;
-    }
-    get radioGroupField(): RadioGroupFieldModel {
-        return this.field() as RadioGroupFieldModel;
-    }
-    get selectField(): SelectFieldModel {
-        return this.field() as SelectFieldModel;
-    }
-    get singleSelectField(): SingleSelectFieldModel {
-        return this.field() as SingleSelectFieldModel;
-    }
-    get textareaField(): TextareaFieldModel {
-        return this.field() as TextareaFieldModel;
-    }
-    get checkboxGroupOptionsKeys(): string[] {
-        return Object.keys(this.checkboxGroupField.options);
-    }
-    get radioGroupOptionsKeys(): string[] {
-        return Object.keys(this.radioGroupField.options);
-    }
-
-    private readonly errorsHelper = inject(ErrorsHelper);
-    private readonly textService = inject(TextService);
-
-    ngOnInit(): void {
-        const statusSub = this.formControl.statusChanges.subscribe(status => {
-            if (status === 'INVALID') {
-                this.validationStatusDescriptions = this.errorsHelper.getMessages(this.formControl)
-                    .map(t => ({ text: t, isTranslated: true }));
-                this.validationStatus = 'invalid';
-            } else {
-                this.validationStatusDescriptions = [];
-                this.validationStatus = this.field().showValidStatus ? 'valid' : undefined;
-            }
-        });
-
-        this.setupWrapperClasses();
-        this.addSubscriptions(statusSub);
-    }
-
-    onBlur(): void {
-        if (this.field().shouldValidateOnBlur) {
-            this.formControl.updateValueAndValidity();
-        }
-    }
-
-    getText(textModel?: TextModel): string {
-        return this.textService.getText(textModel);
-    }
-
-    getOptionDescription(key: string, type: 'checkbox' | 'radio'): OptionalType<TextModel> {
-        return type === 'checkbox' ? this.checkboxGroupField.options[key] : this.radioGroupField.options[key];
-    }
-
-    private setupWrapperClasses(): void {
-        this.wrapperClasses = ColumnSizeHelper.getSizeClasses(this.field().colSize);
-    }
-}

package/form/src/form.component.html

@@ -1,26 +0,0 @@
-<ng-container *transloco="let t; prefix: 'UpDevs.Form'">
-    <div [class.card]="isCard()">
-        @if (!!titleText) {
-            <div [class.card-header]="isCard()">
-                <h3 [class.card-title]="isCard()">{{ titleText }}</h3>
-            </div>
-        }
-        <div [class.card-body]="isCard()">
-            @for (row of rows(); track row; let isFirst = $first) {
-                <div class="row" [class.mt-4]="!isFirst">
-                    @for (field of row.fields; track field.name) {
-                        <upd-dynamic-field [layout]="layout()" [field]="field" [formGroup]="formGroup()"></upd-dynamic-field>
-                    }
-                </div>
-            }
-        </div>
-
-        @if (hasActionsSection()) {
-            <div [class.card-footer]="isCard()" [class.mt-4]="!isCard()">
-                <upd-button colorStyle="primary" (clicked)="submit()">
-                    {{ t('Submit') }}
-                </upd-button>
-            </div>
-        }
-    </div>
-</ng-container>

package/form/src/form.component.scss

@@ -1 +0,0 @@
-

package/form/src/form.component.spec.ts

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