feat(core): created a new legend section

libs/core/calendar/calendar-legend/calendar-legend-focusing.service.spec.ts

@@ -0,0 +1,85 @@
+import { TestBed } from '@angular/core/testing';
+import { CalendarLegendFocusingService } from './calendar-legend-focusing.service';
+
+describe('CalendarLegendFocusingService', () => {
+    let service: CalendarLegendFocusingService;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({});
+        service = TestBed.inject(CalendarLegendFocusingService);
+    });
+
+    it('should be created', () => {
+        expect(service).toBeTruthy();
+    });
+
+    it('should set focus on a cell and update the BehaviorSubject', () => {
+        const mockElement = document.createElement('div');
+        const mockCalIndex = 1;
+        const mockSpecialNumber = 5;
+
+        service.setFocusOnCell(mockElement, mockCalIndex, mockSpecialNumber);
+
+        expect(service.focusedElement).toBe(mockElement);
+        expect(service.calIndex).toBe(mockCalIndex);
+        expect(service.specialNumber).toBe(mockSpecialNumber);
+
+        service.cellSubject$.subscribe((value) => {
+            expect(value).toEqual({
+                cell: mockElement,
+                calIndex: mockCalIndex,
+                cellNumber: mockSpecialNumber
+            });
+        });
+    });
+
+    it('should set focus on a cell without a special number', () => {
+        const mockElement = document.createElement('div');
+        const mockCalIndex = 2;
+
+        service.setFocusOnCell(mockElement, mockCalIndex);
+
+        expect(service.focusedElement).toBe(mockElement);
+        expect(service.calIndex).toBe(mockCalIndex);
+        expect(service.specialNumber).toBeUndefined();
+
+        service.cellSubject$.subscribe((value) => {
+            expect(value).toEqual({
+                cell: mockElement,
+                calIndex: mockCalIndex,
+                cellNumber: null
+            });
+        });
+    });
+
+    it('should get the currently focused special number', () => {
+        const mockSpecialNumber = 10;
+        const mockElement = document.createElement('div');
+
+        service.setFocusOnCell(mockElement, 0, mockSpecialNumber);
+        const focusedSpecialNumber = service.getFocusedElement();
+
+        expect(focusedSpecialNumber).toBe(mockSpecialNumber);
+    });
+
+    it('should clear the focused element and update the BehaviorSubject', () => {
+        const mockElement = document.createElement('div');
+        const mockCalIndex = 3;
+        const mockSpecialNumber = 15;
+
+        service.setFocusOnCell(mockElement, mockCalIndex, mockSpecialNumber);
+
+        service.clearFocusedElement();
+
+        expect(service.focusedElement).toBeNull();
+        expect(service.specialNumber).toBeNull();
+
+        service.cellSubject$.subscribe((value) => {
+            expect(value).toEqual({
+                cell: null,
+                calIndex: null,
+                cellNumber: null
+            });
+        });
+    });
+});

libs/core/calendar/calendar-legend/calendar-legend-focusing.service.ts

@@ -0,0 +1,60 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class CalendarLegendFocusingService {
+    /** Subject to emit the focused element */
+    cellSubject = new BehaviorSubject<{ cell: HTMLElement | null; calIndex: number | null; cellNumber: number | null }>(
+        {
+            cell: null,
+            calIndex: null,
+            cellNumber: null
+        }
+    );
+
+    /** Observable to emit the focused element */
+    cellSubject$ = this.cellSubject.asObservable();
+
+    /** the current focused element */
+    focusedElement: HTMLElement | null;
+
+    /** Special Number */
+    specialNumber: number | null;
+
+    /** Calendar Index */
+    calIndex: number;
+
+    /** Setting the elements that are getting currently focused */
+    setFocusOnCell(legendItem: HTMLElement, calIndex: number, specialNumber?: number): void {
+        this.focusedElement = legendItem;
+        this.calIndex = calIndex;
+        if (specialNumber) {
+            this.specialNumber = specialNumber;
+            this.cellSubject.next({ cell: legendItem, calIndex, cellNumber: specialNumber });
+        }
+    }
+
+    /** Getting the elements that are getting currently focused */
+    getFocusedElement(): number | null {
+        return this.specialNumber;
+    }
+
+    /** Setting the index of the calendar */
+    setCalIndex(calIndex: number): void {
+        this.calIndex = calIndex;
+    }
+
+    /** Getting the index of the calendar */
+    getCalIndex(): number {
+        return this.calIndex;
+    }
+
+    /** Clearing the focused element */
+    clearFocusedElement(): void {
+        this.focusedElement = null;
+        this.specialNumber = null;
+        this.cellSubject.next({ cell: null, calIndex: null, cellNumber: null });
+    }
+}

libs/core/calendar/calendar-legend/calendar-legend-item.component.scss

@@ -0,0 +1 @@
+@import 'fundamental-styles/dist/calendar';

libs/core/calendar/calendar-legend/calendar-legend-item.component.spec.ts

@@ -0,0 +1,90 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { LegendItemComponent } from './calendar-legend-item.component';
+
+describe('LegendItemComponent', () => {
+    let component: LegendItemComponent;
+    let fixture: ComponentFixture<LegendItemComponent>;
+
+    beforeEach(waitForAsync(() => {
+        TestBed.configureTestingModule({
+            imports: [LegendItemComponent]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(LegendItemComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('should emit focusedElementEvent with the correct id on focus', () => {
+        const spy = jest.spyOn(component.focusedElementEvent, 'emit');
+        component.onFocus();
+        expect(spy).toHaveBeenCalledWith(component.id);
+    });
+
+    it('should apply the correct CSS classes when inputs change', () => {
+        component.type = 'appointment';
+        component.circle = true;
+        component.color = 'placeholder-10';
+
+        // Trigger ngOnChanges to rebuild the CSS classes
+        component.ngOnChanges();
+
+        const cssClasses = component.buildComponentCssClass();
+        expect(cssClasses).toContain('fd-calendar-legend__item');
+        expect(cssClasses).toContain('fd-calendar-legend__item--appointment');
+        expect(cssClasses).toContain('fd-calendar-legend__item--placeholder-10');
+    });
+
+    it('should update CSS classes dynamically when input signals change', () => {
+        component.type = 'appointment';
+        fixture.detectChanges();
+
+        let cssClasses = component.buildComponentCssClass();
+        expect(cssClasses).toContain('fd-calendar-legend__item--appointment');
+
+        // Update inputSignal value
+        component.type = '';
+        fixture.detectChanges();
+
+        cssClasses = component.buildComponentCssClass();
+        expect(cssClasses).not.toContain('fd-calendar-legend__item--appointment');
+    });
+
+    it('should handle color input dynamically via inputSignals', () => {
+        component.color = 'placeholder-9';
+        fixture.detectChanges();
+
+        const cssClasses = component.buildComponentCssClass();
+        expect(cssClasses).toContain('fd-calendar-legend__item--placeholder-9');
+
+        component.color = 'placeholder-10';
+        fixture.detectChanges();
+
+        const updatedCssClasses = component.buildComponentCssClass();
+        expect(updatedCssClasses).toContain('fd-calendar-legend__item--placeholder-10');
+        expect(updatedCssClasses).not.toContain('fd-calendar-legend__item--placeholder-9');
+    });
+
+    it('should add appointment class when circle input is true', () => {
+        component.circle = true;
+        fixture.detectChanges();
+
+        const appointmentClass = component.getAppointmentClass();
+        expect(appointmentClass).toBe('fd-calendar-legend__item--appointment');
+    });
+
+    it('should not add appointment class when circle is false and type is not appointment', () => {
+        component.circle = false;
+        component.type = '';
+        fixture.detectChanges();
+
+        const appointmentClass = component.getAppointmentClass();
+        expect(appointmentClass).toBe('');
+    });
+});

libs/core/calendar/calendar-legend/calendar-legend-item.component.ts

@@ -0,0 +1,107 @@
+import { CommonModule } from '@angular/common';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    ElementRef,
+    EventEmitter,
+    Input,
+    OnChanges,
+    OnInit,
+    Output,
+    ViewEncapsulation,
+    input
+} from '@angular/core';
+import { CssClassBuilder, Nullable, applyCssClass } from '@fundamental-ngx/cdk/utils';
+
+let id = 0;
+
+@Component({
+    selector: 'fd-calendar-legend-item',
+    standalone: true,
+    imports: [CommonModule],
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    template: `
+        <span class="fd-calendar-legend__marker"></span>
+        <span class="fd-calendar-legend__text">
+            <ng-content>{{ text }}</ng-content>
+        </span>
+    `,
+    host: {
+        '[attr.id]': 'id',
+        '(focus)': 'onFocus()',
+        tabindex: '0'
+    }
+})
+export class LegendItemComponent implements OnChanges, OnInit, CssClassBuilder {
+    /** The text of the legend item */
+    @Input() text: string | undefined;
+
+    /** The color of the legend item marker */
+    @Input() color: string;
+
+    /** Sending the focused item to parent */
+    @Output() focusedElementEvent = new EventEmitter<string>();
+
+    /** The type of the legend item  */
+    @Input() type: Nullable<string> = '';
+
+    /** If the marker is a circle or a square */
+    @Input() circle = false;
+
+    /** The id of the legend item */
+    @Input() id = `fd-calendar-legend-item-${id++}`;
+
+    /** The aria-label of the legend item */
+    ariaLabel = input<string>();
+
+    /** The aria-labelledby of the legend item */
+    ariaLabelledBy = input<string>();
+
+    /** The aria-describedby of the legend item */
+    ariaDescribedBy = input<string>();
+
+    /** @hidden */
+    class: string;
+
+    /** @hidden */
+    constructor(public elementRef: ElementRef) {}
+
+    /** @hidden */
+    @applyCssClass
+    buildComponentCssClass(): string[] {
+        return [
+            `fd-calendar-legend__item ${this.getTypeClass()} ${this.getAppointmentClass()} ${this.getColorClass()}`
+        ];
+    }
+
+    /** @hidden */
+    ngOnChanges(): void {
+        this.buildComponentCssClass();
+    }
+
+    /** @hidden */
+    ngOnInit(): void {
+        this.buildComponentCssClass();
+    }
+
+    /** @hidden */
+    getTypeClass(): string {
+        return this.type ? `fd-calendar-legend__item--${this.type}` : '';
+    }
+
+    /** @hidden */
+    getAppointmentClass(): string {
+        return this.circle || this.type === 'appointment' ? `fd-calendar-legend__item--appointment` : '';
+    }
+
+    /** @hidden */
+    getColorClass(): string {
+        return this.color ? `fd-calendar-legend__item--${this.color}` : '';
+    }
+
+    /** @hidden */
+    onFocus(): void {
+        this.focusedElementEvent.emit(this.id);
+    }
+}