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

package/button/src/button.component.ts

@@ -1,176 +0,0 @@
-import {
-    Component,
-    ViewEncapsulation,
-    Output,
-    EventEmitter,
-    HostBinding,
-    HostListener,
-    inject,
-    input,
-    computed
-} from '@angular/core';
-import { IconModel } from '@updevs/icons';
-import { TextModel, TextService } from '@updevs/sdk';
-import { BrandType, ButtonModel, BgColorStyleType, ButtonSizeType } from '@updevs/sdk/layout';
-import { LeftRightType, OptionalType } from '@updevs/sdk/types';
-import { BadgeConfig } from '@updevs/components/badge';
-
-@Component({
-    selector: 'upd-button',
-    templateUrl: './button.component.html',
-    styleUrls: ['./button.component.scss'],
-    encapsulation: ViewEncapsulation.None
-})
-export class ButtonComponent {
-    @HostBinding('class') get classes(): string[] {
-        return this.buttonClasses();
-    }
-    @HostBinding('title') get titleAttr(): OptionalType<string> {
-        return this.textService.getText(this._title());
-    }
-
-    /**
-     * Emitted when the button is clicked.
-     * **NOTE:** The name of the event can not be 'click'. It would generate a conflict with the HTML event of same name.
-     * That would cause strange behaviors like preventing `isDisabled` from working correctly.
-     */
-    @Output() readonly clicked = new EventEmitter<any>();
-
-    model = input<ButtonModel>();
-    text = input<TextModel>();
-    brandColorStyle = input<BrandType>();
-    customClasses = input<string>();
-    isOutline = input(false);
-    isGhost = input(false);
-    isSquare = input(false);
-    isPill = input(false);
-    isIcon = input(false);
-    isLoading = input(false);
-    /**
-     * Whether the button should act as a list (top-bottom alignment instead of left-right related to neighbors).
-     */
-    isList = input(false);
-    /**
-     * Whether the button should be floating in the bottom right corner.
-     */
-    isFloating = input(false);
-    isAction = input(false);
-    isNavigationLink = input(false);
-    isLink = input(false);
-    shouldIgnoreBtnClass = input(false);
-    iconModel = input<IconModel>();
-    iconPosition = input<LeftRightType>('left');
-    isDisabled = input(false);
-    isActive = input(false);
-    badgeConfig = input<BadgeConfig>();
-    colorStyle = input<BgColorStyleType>();
-    size = input<ButtonSizeType>('regular');
-    title = input<TextModel>();
-
-    get mainText(): string {
-        return this.textService.getText(this.text());
-    }
-    get _iconModel(): OptionalType<IconModel> {
-        return this.model()?.iconModel?.() || this.iconModel();
-    }
-    get _iconPosition(): LeftRightType {
-        return this.model()?.iconPosition() || this.iconPosition();
-    }
-    get _isIcon(): boolean {
-        return this.model()?.isIcon() || this.isIcon();
-    }
-
-    private get sizeClass(): string {
-        switch (this._size()) {
-            case 'large':
-                return 'btn-lg';
-            case 'small':
-                return 'btn-sm';
-            default:
-                return '';
-        }
-    }
-    private _size = computed(() => !!this.model() ? this.model()!.size() : this.size());
-    private _title = computed(() => !!this.model() && !!this.model()?.title ? this.model()!.title!() : this.title());
-    private _colorStyle = computed(() => !!this.model() && !!this.model()?.colorStyle ? this.model()!.colorStyle!() : this.colorStyle());
-    private _brandColorStyle = computed(() =>
-        !!this.model() && !!this.model()?.brandColorStyle ? this.model()!.brandColorStyle!() : this.brandColorStyle()
-    );
-    private buttonClasses = computed(() => {
-        const isLink = this.model()?.isLink() || this.isLink();
-        const outlineCls = this.model()?.isOutline() || this.isOutline() ? 'outline-' : '';
-        const ghostCls = this.model()?.isGhost() || this.isGhost() ? 'ghost-' : '';
-        const lClasses: string[] = this.model()?.shouldIgnoreBtnClass() || this.shouldIgnoreBtnClass() ? [] : ['btn'];
-        const customClasses = this.model()?.customClasses?.().split(' ') || this.customClasses()?.split(' ') || [];
-
-        if (!isLink && (!!outlineCls || !!ghostCls || !!this._colorStyle() || !!this._brandColorStyle())) {
-            lClasses.push(`btn-${outlineCls || ghostCls}${this._colorStyle() || this._brandColorStyle()}`);
-        } else if (!!this._colorStyle() || !!this._brandColorStyle()) {
-            lClasses.push(`link-${this._colorStyle() || this._brandColorStyle()}`);
-        }
-
-        if (this.model()?.isSquare() || this.isSquare()) {
-            lClasses.push('btn-square');
-        }
-
-        if (this.model()?.isPill() || this.isPill()) {
-            lClasses.push('btn-pill');
-        }
-
-        if (this._isIcon) {
-            lClasses.push('btn-icon');
-        }
-
-        if (this.model()?.isLoading() || this.isLoading()) {
-            lClasses.push('btn-loading');
-        }
-
-        if (this.model()?.isList() || this.isList()) {
-            lClasses.push('btn-list');
-        }
-
-        if (this.model()?.isFloating() || this.isFloating()) {
-            lClasses.push('btn-floating');
-        }
-
-        if (this.model()?.isAction() || this.isAction()) {
-            lClasses.push('btn-action');
-        }
-
-        if (this.model()?.isNavigationLink() || this.isNavigationLink()) {
-            lClasses.push('nav-link');
-        }
-
-        if (isLink) {
-            lClasses.push('btn-link');
-        }
-
-        if (this.model()?.isActive() || this.isActive()) {
-            lClasses.push('active');
-        }
-
-        if (this.model()?.isDisabled() || this.isDisabled()) {
-            lClasses.push('disabled');
-        }
-
-        if (!!this.badgeConfig() && (this.badgeConfig()!.isBlinking || this.badgeConfig()!.isNotification)) {
-            lClasses.push('position-relative');
-        }
-
-        lClasses.push(this.sizeClass);
-
-        return [...lClasses, ...customClasses];
-    });
-    private readonly textService = inject(TextService);
-
-    @HostListener('click', ['$event'])
-    onClick(event: MouseEvent): void {
-        if (!!this.model() && !!this.model()?.clickFunction) {
-            this.model()!.clickFunction!({ event, data: this });
-        } else {
-            this.clicked.emit(event);
-        }
-
-        event.stopPropagation();
-    }
-}

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

@@ -1,21 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { UpdIconsModule } from '@updevs/icons';
-import { UpdBadgeModule } from '@updevs/components/badge';
-
-import { ButtonComponent } from './button.component';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        UpdIconsModule,
-        UpdBadgeModule
-    ],
-    declarations: [
-        ButtonComponent
-    ],
-    exports: [
-        ButtonComponent
-    ]
-})
-export class UpdButtonModule {}

package/calendar/index.ts

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

package/calendar/ng-package.json

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

package/calendar/src/calendar.component.html

@@ -1,34 +0,0 @@
-@switch (currentView) {
-    @case ('month') {
-        <upd-calendar-month-view [(activeDate)]="activeDate" [isRange]="isRange" [selected]="selected" [dateFilter]="dateFilter"
-            [maxDate]="maxDate" [minDate]="minDate" [dateClass]="dateClass" [comparisonStart]="comparisonStart"
-            [comparisonEnd]="comparisonEnd" [startDateAccessibleName]="startDateAccessibleName"
-            [endDateAccessibleName]="endDateAccessibleName" (userSelection)="_dateSelected($event)" (dragStarted)="_dragStarted($event)"
-            (dragEnded)="_dragEnded($event)" [activeDrag]="_activeDrag">
-        </upd-calendar-month-view>
-    }
-    @case ('year') {
-        YEAR!
-            <!--        <upd-calendar-year-view-->
-            <!--            [(activeDate)]="activeDate"-->
-            <!--            [selected]="selected"-->
-            <!--            [dateFilter]="dateFilter"-->
-            <!--            [maxDate]="maxDate"-->
-            <!--            [minDate]="minDate"-->
-            <!--            [dateClass]="dateClass"-->
-            <!--            (monthSelected)="_monthSelectedInYearView($event)"-->
-            <!--            (selectedChange)="_goToDateInView($event, 'month')"></upd-calendar-year-view>-->
-    }
-    @case ('multi-year') {
-        MUUMUMUULTI-YEAR!
-            <!--        <upd-calendar-multi-year-view-->
-            <!--            [(activeDate)]="activeDate"-->
-            <!--            [selected]="selected"-->
-            <!--            [dateFilter]="dateFilter"-->
-            <!--            [maxDate]="maxDate"-->
-            <!--            [minDate]="minDate"-->
-            <!--            [dateClass]="dateClass"-->
-            <!--            (yearSelected)="_yearSelectedInMultiYearView($event)"-->
-            <!--            (selectedChange)="_goToDateInView($event, 'year')"></upd-calendar-multi-year-view>-->
-    }
-}

package/calendar/src/calendar.component.scss

@@ -1 +0,0 @@
-

package/calendar/src/calendar.component.spec.ts

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

package/calendar/src/calendar.component.ts

@@ -1,290 +0,0 @@
-import {
-    AfterContentInit,
-    AfterViewChecked,
-    ChangeDetectorRef,
-    Component,
-    EventEmitter,
-    Input,
-    OnChanges,
-    Output,
-    SimpleChange,
-    SimpleChanges,
-    ViewChild,
-    inject
-} from '@angular/core';
-import { OptionalType } from '@updevs/sdk/types';
-import { DateService } from '@updevs/sdk/core';
-
-import { DateRangeModel } from './models/date-range.model';
-import { CalendarViewType } from './types/calendar-view.type';
-import { CalendarUserEventModel } from './models/calendar-user-event.model';
-import { CalendarCellClassFunctionType } from './types/calendar-cell-class-function.type';
-import { CalendarMonthViewComponent } from './components/calendar-month-view/calendar-month-view.component';
-import { CalendarYearViewComponent } from './components/calendar-year-view/calendar-year-view.component';
-import { CalendarMultiYearViewComponent } from './components/calendar-multi-year-view/calendar-multi-year-view.component';
-
-@Component({
-    selector: 'upd-calendar',
-    templateUrl: './calendar.component.html',
-    styleUrl: './calendar.component.scss'
-})
-export class CalendarComponent implements AfterContentInit, AfterViewChecked, OnChanges {
-    /** Reference to the current month view component. */
-    @ViewChild(CalendarMonthViewComponent) monthView?: CalendarMonthViewComponent;
-
-    /** Reference to the current year view component. */
-    @ViewChild(CalendarYearViewComponent) yearView?: CalendarYearViewComponent;
-
-    /** Reference to the current multi-year view component. */
-    @ViewChild(CalendarMultiYearViewComponent) multiYearView?: CalendarMultiYearViewComponent;
-
-    /** A date representing the period (month or year) to start the calendar in. */
-    @Input()
-    get startAt(): OptionalType<Date> {
-        return this._startAt;
-    }
-    set startAt(value: OptionalType<Date>) {
-        this._startAt = this.dateService.getValidOrUndefined(this.dateService.deserialize(value));
-    }
-
-    /**
-     * Whether the calendar should be started in month or year view.
-     */
-    @Input() startView: CalendarViewType = 'month';
-    /**
-     * The currently selected date.
-     */
-    @Input()
-    get selected(): DateRangeModel | OptionalType<Date> {
-        return this._selected;
-    }
-    set selected(value: DateRangeModel | OptionalType<Date>) {
-        console.log('setting selected', value);
-        if (value instanceof DateRangeModel) {
-            this._selected = value;
-        } else {
-            this._selected = this.dateService.getValidOrUndefined(this.dateService.deserialize(value));
-        }
-    }
-    /**
-     * The minimum selectable date.
-     */
-    @Input()
-    get minDate(): OptionalType<Date> {
-        return this._minDate;
-    }
-    set minDate(value: OptionalType<Date>) {
-        this._minDate = this.dateService.getValidOrUndefined(this.dateService.deserialize(value));
-    }
-    /**
-     * The maximum selectable date.
-     */
-    @Input()
-    get maxDate(): OptionalType<Date> {
-        return this._maxDate;
-    }
-    set maxDate(value: OptionalType<Date>) {
-        this._maxDate = this.dateService.getValidOrUndefined(this.dateService.deserialize(value));
-    }
-    /**
-     * Function used to filter which dates are selectable.
-     */
-    @Input() dateFilter?: (date: Date) => boolean;
-
-    /** Function that can be used to add custom CSS classes to dates. */
-    @Input() dateClass?: CalendarCellClassFunctionType;
-
-    /** Start of the comparison range. */
-    @Input() comparisonStart?: Date;
-
-    /** End of the comparison range. */
-    @Input() comparisonEnd?: Date;
-
-    /** ARIA Accessible name of the `<input matStartDate/>` */
-    @Input() startDateAccessibleName?: string;
-
-    /** ARIA Accessible name of the `<input matEndDate/>` */
-    @Input() endDateAccessibleName?: string;
-    /** Whether the user is currently selecting a range of dates. */
-    @Input() isRange = false;
-
-    /** Emits when the currently selected date changes. */
-    @Output() readonly selectedChange = new EventEmitter<OptionalType<Date>>();
-
-    /**
-     * Emits the year chosen in multiyear view.
-     * This doesn't imply a change on the selected date.
-     */
-    @Output() readonly yearSelected = new EventEmitter<Date>();
-
-    /**
-     * Emits the month chosen in year view.
-     * This doesn't imply a change on the selected date.
-     */
-    @Output() readonly monthSelected = new EventEmitter<Date>();
-
-    /**
-     * Emits when the current view changes.
-     */
-    @Output() readonly viewChanged = new EventEmitter<CalendarViewType>(true);
-
-    /** Emits when any date is selected. */
-    @Output() readonly userSelection = new EventEmitter<CalendarUserEventModel<OptionalType<Date>>>();
-
-    /** Emits a new date range value when the user completes a drag drop operation. */
-    @Output() readonly userDragDrop = new EventEmitter<CalendarUserEventModel<DateRangeModel>>();
-
-    /**
-     * The current active date. This determines which time period is shown and which date is
-     * highlighted when using keyboard navigation.
-     */
-    get activeDate(): Date {
-        return this._clampedActiveDate;
-    }
-    set activeDate(value: Date) {
-        this._clampedActiveDate = this.dateService.clamp(value, this.minDate, this.maxDate);
-        this._changeDetectorRef.markForCheck();
-    }
-
-    /** Whether the calendar is in month view. */
-    get currentView(): CalendarViewType {
-        return this._currentView;
-    }
-    set currentView(value: CalendarViewType) {
-        const viewChangedResult = this._currentView !== value ? value : undefined;
-        this._currentView = value;
-        this._moveFocusOnNextTick = true;
-
-        this._changeDetectorRef.markForCheck();
-
-        if (viewChangedResult) {
-            this.viewChanged.emit(viewChangedResult);
-        }
-    }
-
-    /** Origin of active drag, or null when dragging is not active. */
-    protected _activeDrag?: CalendarUserEventModel<Date>;
-
-    private _clampedActiveDate!: Date;
-    private _startAt?: Date;
-    private _selected?: DateRangeModel | Date;
-    private _minDate?: Date;
-    private _maxDate?: Date;
-
-    /**
-     * Used for scheduling that focus should be moved to the active cell on the next tick.
-     * We need to schedule it, rather than do it immediately, because we have to wait
-     * for Angular to re-evaluate the view children.
-     */
-    private _moveFocusOnNextTick = false;
-    private _currentView!: CalendarViewType;
-
-    private readonly dateService = inject(DateService);
-    private readonly _changeDetectorRef = inject(ChangeDetectorRef);
-
-    ngAfterContentInit(): void {
-        this.activeDate = this.startAt || new Date();
-        // Assign to the private property since we don't want to move focus on init.
-        this._currentView = this.startView;
-    }
-
-    ngAfterViewChecked(): void {
-        if (this._moveFocusOnNextTick) {
-            this._moveFocusOnNextTick = false;
-            this.focusActiveCell();
-        }
-    }
-
-    ngOnChanges(changes: SimpleChanges): void {
-        // Ignore date changes that are at a different time on the same day. This fixes issues where
-        // the calendar re-renders when there is no meaningful change to [minDate] or [maxDate]
-        // (#24435).
-        const minDateChange: OptionalType<SimpleChange> =
-            changes['minDate'] && !this.dateService.areEqual(changes['minDate'].previousValue, changes['minDate'].currentValue)
-                ? changes['minDate']
-                : undefined;
-        const maxDateChange: OptionalType<SimpleChange> =
-            changes['maxDate'] && !this.dateService.areEqual(changes['maxDate'].previousValue, changes['maxDate'].currentValue)
-                ? changes['maxDate']
-                : undefined;
-
-        const change = minDateChange || maxDateChange || changes['dateFilter'];
-
-        if (change && !change.firstChange) {
-            const view = this._getCurrentViewComponent();
-
-            if (view) {
-                // We need to `detectChanges` manually here, because the `minDate`, `maxDate` etc. are
-                // passed down to the view via data bindings which won't be up-to-date when we call `_init`.
-                this._changeDetectorRef.detectChanges();
-                view.init();
-            }
-        }
-    }
-
-    /** Focuses the active date. */
-    focusActiveCell() {
-        this._getCurrentViewComponent().focusActiveCell(false);
-    }
-
-    /** Updates today's date after an update of the active date */
-    updateTodaysDate() {
-        this._getCurrentViewComponent().init();
-    }
-
-    /** Handles date selection in the month view. */
-    _dateSelected(event: CalendarUserEventModel<OptionalType<Date>>): void {
-        const date = event.value;
-
-        if (this.selected instanceof DateRangeModel || (date && !this.dateService.areEqual(date, this.selected))) {
-            this.selectedChange.emit(date);
-        }
-
-        this.userSelection.emit(event);
-    }
-
-    /** Handles year selection in the multiyear view. */
-    _yearSelectedInMultiYearView(normalizedYear: Date) {
-        this.yearSelected.emit(normalizedYear);
-    }
-
-    /** Handles month selection in the year view. */
-    _monthSelectedInYearView(normalizedMonth: Date) {
-        this.monthSelected.emit(normalizedMonth);
-    }
-
-    /** Handles year/month selection in the multi-year/year views. */
-    _goToDateInView(date: Date, view: CalendarViewType): void {
-        this.activeDate = date;
-        this.currentView = view;
-    }
-
-    /** Called when the user starts dragging to change a date range. */
-    _dragStarted(event: CalendarUserEventModel<Date>) {
-        this._activeDrag = event;
-    }
-
-    /**
-     * Called when a drag completes. It may end in cancelation or in the selection
-     * of a new range.
-     */
-    _dragEnded(event: CalendarUserEventModel<OptionalType<DateRangeModel>>) {
-        if (!this._activeDrag) {
-            return;
-        }
-
-        if (event.value) {
-            this.userDragDrop.emit(event as CalendarUserEventModel<DateRangeModel>);
-        }
-
-        this._activeDrag = undefined;
-    }
-
-    /** Returns the component instance that corresponds to the current calendar view. */
-    private _getCurrentViewComponent(): CalendarMonthViewComponent | CalendarYearViewComponent | CalendarMultiYearViewComponent {
-        // The return type is explicitly written as a union to ensure that the Closure compiler does
-        // not optimize calls to _init(). Without the explicit return type, TypeScript narrows it to
-        // only the first component type. See https://github.com/angular/components/issues/22996.
-        return (this.monthView || this.yearView || this.multiYearView)!;
-    }
-}

package/calendar/src/components/calendar-body/calendar-body.component.html

@@ -1,75 +0,0 @@
-<div class="container">
-    <!--
-      If there's not enough space in the first row, create a separate label row. We mark this row as
-      aria-hidden because we don't want it to be read out as one of the weeks in the month.
-    -->
-    @if (firstRowOffset < labelMinRequiredCells) {
-        <div class="row seven-cols" aria-hidden="true">
-            <div class="col-7 p-1 d-flex align-items-center" [style.min-height.px]="40">
-                {{ label }}
-            </div>
-        </div>
-    }
-
-    <!-- Create the first row separately so we can include a special spacer cell. -->
-    @for (row of rows; track trackRow(row); let rowIndex = $index) {
-        <div class="row seven-cols">
-            <!--
-              This cell is purely decorative, but we can't put `aria-hidden` or `role="presentation"` on it,
-              because it throws off the week days for the rest of the row on NVDA. The aspect ratio of the
-              table cells is maintained by setting the top and bottom padding as a percentage of the width
-              (a variant of the trick described here: https://www.w3schools.com/howto/howto_css_aspect_ratio.asp).
-            -->
-            @if (rowIndex === 0 && firstRowOffset) {
-                <div [ngClass]="colspanClass" class="p-1 d-flex align-items-center" [style.min-height.px]="40">
-                    {{ firstRowOffset >= labelMinRequiredCells ? label : '' }}
-                </div>
-            }
-
-            <!--
-              Each gridcell in the calendar contains a button, which signals to assistive technology that the
-              cell is interactable, as well as the selection state via `aria-pressed`. See #23476 for
-              background.
-            -->
-            @for (item of row; track item.id; let colIndex = $index) {
-                <div class="col-1 justify-content-center p-1 d-flex align-items-center cursor-pointer" [attr.data-upd-row]="rowIndex"
-                    [attr.data-upd-col]="colIndex" [style.min-height.px]="40"
-                    [class.bg-secondary-lt]="hoveredDate === getIndex(rowIndex, colIndex)" [class.border]="isActiveCell(rowIndex, colIndex)"
-                    [class.border-secondary]="isActiveCell(rowIndex, colIndex)" [class.bg-azure]="isSelected(item.compareValue)"
-                    [class.text-azure-fg]="isSelected(item.compareValue)" [tabindex]="isActiveCell(rowIndex, colIndex) ? 0 : -1"
-                    [class.upd-calendar-body-disabled]="!item.isEnabled" [class.bg-danger]="isRangeStart(item.compareValue)"
-                    [class.text-danger-fg]="isRangeStart(item.compareValue)" [class.bg-muted]="isRangeEnd(item.compareValue)"
-                    [class.text-muted-fg]="isRangeEnd(item.compareValue)"
-                    [class.upd-calendar-body-range-end]="isRangeEnd(item.compareValue)"
-                    [class.upd-calendar-body-in-range]="isInRange(item.compareValue)"
-                    [class.upd-calendar-body-comparison-bridge-start]="isComparisonBridgeStart(item.compareValue, rowIndex, colIndex)"
-                    [class.upd-calendar-body-comparison-bridge-end]="isComparisonBridgeEnd(item.compareValue, rowIndex, colIndex)"
-                    [class.upd-calendar-body-comparison-start]="isComparisonStart(item.compareValue)"
-                    [class.upd-calendar-body-comparison-end]="isComparisonEnd(item.compareValue)"
-                    [class.upd-calendar-body-in-comparison-range]="isInComparisonRange(item.compareValue)"
-                    [class.rounded-start]="isPreviewStart(item.compareValue)" [class.rounded-end]="isPreviewEnd(item.compareValue)"
-                    [class.border-top]="isInPreview(item.compareValue)" [class.fw-bold]="isInPreview(item.compareValue)"
-                    [class.border-bottom]="isInPreview(item.compareValue)" [class.border-secondary-lt]="isInPreview(item.compareValue)"
-                    [attr.aria-label]="item.ariaLabel" [attr.aria-disabled]="!item.isEnabled || undefined"
-                    [attr.aria-pressed]="isSelected(item.compareValue)"
-                    [attr.aria-current]="todayValue === item.compareValue ? 'date' : undefined"
-                    [attr.aria-describedby]="getDescribedby(item.compareValue)" (click)="cellClicked(item, $event)"
-                    (focus)="emitActiveDateChange(item)" (mouseenter)="onDateEnter(getIndex(rowIndex, colIndex))"
-                    (mouseleave)="onDateLeave()">
-                    <span [class.upd-calendar-body-selected]="isSelected(item.compareValue)"
-                        [class.upd-calendar-body-comparison-identical]="isComparisonIdentical(item.compareValue)"
-                        [class.upd-calendar-body-today]="todayValue === item.compareValue">
-                            {{ item.displayValue }}
-                    </span>
-                </div>
-            }
-        </div>
-    }
-
-    <label [id]="startDateLabelId" class="upd-calendar-body-hidden-label">
-        {{ startDateAccessibleName }}
-    </label>
-    <label [id]="endDateLabelId" class="upd-calendar-body-hidden-label">
-        {{ endDateAccessibleName }}
-    </label>
-</div>

package/calendar/src/components/calendar-body/calendar-body.component.scss

@@ -1 +0,0 @@
-@import '../../../../assets/styles/seven-columns';

package/calendar/src/components/calendar-body/calendar-body.component.spec.ts

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