date-picker.component.html

<ng-template [ngTemplateOutlet]="mobile ? controlTemplate : desktopTemplate"></ng-template>
<ng-template #popoverMessageTemplate>
    @if (_message) {
        <fd-form-message [embedded]="true" [type]="state">
            {{ _message }}
        </fd-form-message>
    }
</ng-template>
<ng-template #desktopTemplate>
    <fd-popover
        [(isOpen)]="isOpen"
        (beforeOpen)="_beforePopoverOpen()"
        (isOpenChange)="_onOpenStateChanged($event)"
        [triggers]="[]"
        [placement]="placement"
        [disabled]="disabled"
        [focusTrapped]="true"
        [focusAutoCapture]="false"
        [appendTo]="appendTo"
    >
        <fd-popover-control>
            <ng-template [ngTemplateOutlet]="controlTemplate"></ng-template>
        </fd-popover-control>
        <fd-popover-body [attr.aria-expanded]="isOpen" [attr.aria-hidden]="!isOpen">
            @if (_showPopoverContents) {
                <ng-template [ngTemplateOutlet]="popoverMessageTemplate"></ng-template>
                <ng-content></ng-content>
                <ng-template [ngTemplateOutlet]="calendarTemplate"></ng-template>
            }
        </fd-popover-body>
    </fd-popover>
</ng-template>
<ng-template #controlTemplate>
    <fd-input-group
        #inputGroupComponent
        [state]="state"
        [disabled]="disabled"
        [isControl]="true"
        [button]="true"
        [buttonFocusable]="buttonFocusable"
        glyph="appointment-2"
        [isExpanded]="isOpen"
        [glyphAriaLabel]="'coreDatePicker.displayCalendarToggleLabel' | fdTranslate"
        [iconTitle]="'coreDatePicker.displayCalendarToggleLabel' | fdTranslate"
        (addOnButtonClicked)="toggleCalendar()"
    >
        <input
            type="text"
            class="fd-input"
            fd-input-group-input
            [disabled]="disabled"
            [placeholder]="placeholder"
            [attr.id]="inputId"
            aria-haspopup="grid"
            aria-autocomplete="none"
            [attr.aria-expanded]="isOpen"
            [attr.aria-labelledby]="ariaLabelledBy"
            [attr.aria-label]="_dateInputArialLabelKey | fdTranslate"
            [attr.aria-required]="required"
            [attr.aria-describedby]="_formValueStateMessageId"
            [ngModel]="_inputFieldDate"
            (keyup.enter)="handleInputChange($any($event.target).value, false)"
            (ngModelChange)="handleInputChange($event, true)"
            (click)="mobile && openCalendar()"
            (blur)="_onBlur($event)"
        />
    </fd-input-group>
</ng-template>
<ng-template #calendarTemplate>
    <fd-calendar
        [activeView]="activeView"
        [markWeekends]="markWeekends"
        [specialDaysRules]="specialDaysRules"
        [showWeekNumbers]="showWeekNumbers"
        [allowMultipleSelection]="allowMultipleSelection"
        [aggregatedYearGrid]="aggregatedYearGrid"
        [yearGrid]="yearGrid"
        [calType]="type"
        [rangeHoverEffect]="rangeHoverEffect"
        [disableFunction]="disableFunction"
        [disableRangeStartFunction]="disableRangeStartFunction"
        [disableRangeEndFunction]="disableRangeEndFunction"
        [selectedDate]="selectedDate"
        [selectedMultipleDates]="selectedMultipleDates"
        [selectedRangeDate]="selectedRangeDate"
        [selectedMultipleDateRanges]="selectedMultipleDateRanges"
        [startingDayOfWeek]="startingDayOfWeek"
        [previousButtonDisableFunction]="previousButtonDisableFunction"
        [nextButtonDisableFunction]="nextButtonDisableFunction"
        [mobileLandscape]="mobile && mobileLandscape"
        [mobilePortrait]="mobile && mobilePortrait"
        (selectedDateChange)="handleSingleDateChange($event)"
        (selectedMultipleDatesChange)="handleMultipleDatesChange($event)"
        (selectedRangeDateChange)="handleRangeDateChange($event)"
        (selectedMultipleDateRangesChange)="handleMultipleDateRangesChange($event)"
        (activeViewChange)="handleCalendarActiveViewChange($event)"
        (closeCalendar)="closeFromCalendar()"
    ></fd-calendar>
    @if (showTodayButton) {
        <div fd-bar barDesign="footer" class="fd-date-picker__bar">
            <div fd-bar-right>
                <fd-bar-element>
                    <button fd-button [label]="todayButtonLabel" (click)="onTodayButtonClick()"></button>
                </fd-bar-element>
            </div>
        </div>
    }
</ng-template>
<div [style.display]="'none'" aria-hidden="true">
    <div [attr.id]="_formValueStateMessageId" aria-atomic="true" aria-live="assertive">
        @switch (state) {
            @case ('success') {
                {{ 'coreDatePicker.valueStateSuccessMessage' | fdTranslate }}
            }
            @case ('information') {
                {{ 'coreDatePicker.valueStateInformationMessage' | fdTranslate }}
            }
            @case ('warning') {
                {{ 'coreDatePicker.valueStateWarningMessage' | fdTranslate }}
            }
            @case ('error') {
                {{ 'coreDatePicker.valueStateErrorMessage' | fdTranslate }}
            }
        }
        {{ _message }}
    </div>
</div>