feat(core): created a new legend section

added a few inputs to legend item

minor classes changes

used BuildClass

can insert a legend programatically with SpecialDays

made programmable through SpecialDayRules

adding a focusing service to filter legend days

modified the calendar legend docs

connected the legend to days, can be logged

remove unfocused classes

calendar cells focus/unfocus dynamically

legends are only focusing on their own calendar and not others

some written tests

calendar legend test passing

finished the tests for legend item

finished last test and made couple changes to docs

added path to index.ts

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;
+
+    /** 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);
+    }
+}