@norwegian/core-components 6.50.0 → 6.50.1

package/lib/components/datepicker-new/datepicker-new.component.d.ts

@@ -0,0 +1,272 @@
+/**
+ * @license
+ * Copyright Norwegian Air Shuttle. All Rights Reserved.
+ */
+import { DatePipe } from '@angular/common';
+import { ElementRef, EventEmitter, OnInit } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { CalendarNewComponent } from './calendar-new/calendar-new.component';
+import { SelectOptionModel } from './calendar-new/models/select-option.model';
+import { NasComponentBase } from '../../core/base/nas-component.base';
+import { ClassModel } from '../../core/models/class.model';
+import { UtcDate } from '../../core/models/utc-date.model';
+import { DateHelper } from '../../core/services/date/date-helper.service';
+import { SelectComponent } from '../select/select.component';
+import * as i0 from "@angular/core";
+/**
+ * @description
+ * Norwegian Date Picker Component | New design | Beta
+ */
+export declare class DatepickerNewComponent extends NasComponentBase implements OnInit {
+    private datePipe;
+    private dateService;
+    timeOptions: Array<SelectOptionModel>;
+    model: string;
+    show: boolean;
+    selectedTimeOption: SelectOptionModel;
+    showTimes: boolean;
+    get showBackdrop(): boolean;
+    set showBackdrop(value: boolean);
+    input: ElementRef;
+    calendar: CalendarNewComponent;
+    datePickerContent: ElementRef;
+    timeSelector: SelectComponent;
+    time: SelectComponent;
+    /**
+     * @property Input
+     * @description
+     * Adds 'aria-label' to the backdrops.
+     */
+    ariaLabelBackdrop: string;
+    /**
+     * @property Input
+     * @description
+     * A boolean value when set will disable showing the backdrop on popup open
+     */
+    disableBackdrop: boolean;
+    /**
+     * @property Input
+     * @description
+     * Label for no available flights.
+     */
+    noAvailableFlightsLabel: string;
+    /**
+     * @property Input
+     * @description
+     * Label for available flights.
+     */
+    availableFlightsLabel: string;
+    /**
+     * @property Input
+     * @description
+     * Disable possibility to select dates in the past.
+     */
+    disablePastSelection: boolean;
+    /**
+     * @property Input
+     * @description
+     * The lowest date allowed.
+     */
+    get lowerLimitDate(): UtcDate;
+    set lowerLimitDate(date: UtcDate);
+    /**
+     * @property Input
+     * @description
+     * Sets the datepicker in availability mode where available dates can be added.
+     */
+    availability: boolean;
+    /**
+     * @property Input
+     * @description
+     * An array with all the available (selectable) dates of the month.
+     */
+    availableDates: Array<UtcDate>;
+    /**
+     * @property Input
+     * @description
+     * boolean value to disable or enable the input of the date picker.
+     */
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    /**
+     * @property Input
+     * @description
+     * A place holder string for the input for date picker.
+     */
+    placeholder: string;
+    /**
+     * @property Input
+     * @description
+     * this will set the required attribute on the input so suer has to date-picker the date.
+     */
+    required: boolean;
+    /**
+     * @property Input
+     * @description
+     * Is used to indicate the IDs of the elements that describe the date picker input.
+     */
+    ariaDescribedby: string;
+    /**
+     * @property Input
+     * @description
+     * Aria label for input that enables date-picker popup once clicked. For accessibility web standards.
+     */
+    ariaLabel: string;
+    /**
+     * @property Input
+     * @description
+     * The display format of the date when user has selected the date and it is being shown in the input box for the date picker.
+     * Please look at the angular Date pipe for valid formats and variations.
+     */
+    dateDisplayFormat: string;
+    /**
+     * @property Input
+     * @description
+     * The time display format.
+     */
+    timeDisplayFormat: string;
+    /**
+     * @property Input
+     * @description
+     * A locale code for the locale format rules to use. When not supplied, uses the value of LOCALE_ID, which is en-US by default.
+     * This requires that registerLocaleData is called with the respective locale.
+     */
+    locale: string;
+    /**
+     * @property Input
+     * @description
+     * A modifier to remove the padding and margins around the element.
+     */
+    compact: boolean;
+    /**
+     * @property Input
+     * @description
+     * Adds the parent's form group.
+     * It requires that the consumer included ReactiveFormsModule in it's module.
+     * It is requiered to be filled if nasFormControlName added.
+     */
+    nasFormGroup: FormGroup;
+    /**
+     * @property Input
+     * @description
+     * Sets a formControlName directive to the input.
+     * It requires that the consumer included ReactiveFormsModule in it's module.
+     * It requiers that the nasFormGroup input is filled.
+     */
+    nasFormControlName: string;
+    /**
+     * @property Input
+     * @description
+     * An array of times to be added in the time selector.
+     */
+    get times(): Array<UtcDate>;
+    set times(times: Array<UtcDate>);
+    /**
+     * @property Input
+     * @description
+     * The calendar is open or closed.
+     */
+    get open(): boolean;
+    set open(open: boolean);
+    /**
+     * @property Input
+     * @description
+     * Set selected month.
+     */
+    get selectedMonth(): UtcDate;
+    set selectedMonth(month: UtcDate);
+    /**
+     * @property Input
+     * @description
+     * Gets or sets the selected Date in the date picker. Setting this date will highlight the date in the date picker
+     * and user can change it by clicking from any other enabled dates
+     * or by navigating betrween months and selecting from different available month.
+     */
+    get selectedDate(): UtcDate;
+    set selectedDate(date: UtcDate);
+    /**
+     * @property Input
+     * @description
+     * Sets the selected time in the time selector.
+     */
+    get selectedTime(): UtcDate;
+    set selectedTime(time: UtcDate);
+    /**
+     * @property Input
+     * @description
+     * ARIA label for the previous month button in the calendar.
+     */
+    ariaLabelPreviousMonth: string;
+    /**
+     * @property Input
+     * @description
+     * ARIA label for the next month button in the calendar.
+     */
+    ariaLabelNextMonth: string;
+    /**
+     * @property Output
+     * @description
+     * Date selected by the user by clicking in date-picker date-box.
+     */
+    selectedDateChange: EventEmitter<UtcDate>;
+    /**
+     * @property Output
+     * @description
+     * Month selected by the user by clicking in drop down for month selection or month navigation buttons.
+     */
+    selectedMonthChange: EventEmitter<UtcDate>;
+    /**
+     * @property Output
+     * @description
+     * The calendar is open or closed.
+     */
+    openChange: EventEmitter<boolean>;
+    /**
+     * @property Output
+     * @description
+     * When a user has actively changed the date.
+     */
+    focusOnNextChange: EventEmitter<KeyboardEvent | MouseEvent>;
+    /**
+     * @property Output
+     * @description
+     * When a user has pressed shift + tab to go to previous control.
+     */
+    focusOnPreviousChange: EventEmitter<KeyboardEvent | MouseEvent>;
+    get activeDate(): UtcDate;
+    set activeDate(date: UtcDate);
+    private openCalendarTimeout;
+    private activeDateTimeout;
+    private selectedDateValue;
+    private openValue;
+    private activeDateValue;
+    private timesValue;
+    private selectedTimeValue;
+    private selectedMonthValue;
+    private disabledValue;
+    private forceNotOpenCalendar;
+    private lowerLimitDateValue;
+    constructor(datePipe: DatePipe, dateService: DateHelper);
+    ngOnInit(): void;
+    onInputKeydownShiftTab(event: KeyboardEvent): void;
+    onCalendarKeyDown(event: KeyboardEvent): void;
+    onTimeSelectorKeydown(event: KeyboardEvent): void;
+    setFocusOnTimeSelectorOrNext(event: KeyboardEvent | MouseEvent): void;
+    onMonthChange(currentMonth: UtcDate): void;
+    onMouseDownDatepicker(): void;
+    openCalendar(): void;
+    onTimeSelected(option: SelectOptionModel): void;
+    onTimeSelectorClick(): void;
+    getMainClass(): Array<ClassModel>;
+    getLabelClass(): ClassModel;
+    closeCalendar(): void;
+    selectDate(event: KeyboardEvent): void;
+    private isActiveElementMonthButtons;
+    private setFocusOnActiveDateAsync;
+    private isModelValid;
+    private allDays;
+    private someValidDaysEqualsSelectedDay;
+    private date;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DatepickerNewComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DatepickerNewComponent, "nas-datepicker-new", never, { "ariaLabelBackdrop": { "alias": "ariaLabelBackdrop"; "required": false; }; "disableBackdrop": { "alias": "disableBackdrop"; "required": false; }; "noAvailableFlightsLabel": { "alias": "noAvailableFlightsLabel"; "required": false; }; "availableFlightsLabel": { "alias": "availableFlightsLabel"; "required": false; }; "disablePastSelection": { "alias": "disablePastSelection"; "required": false; }; "lowerLimitDate": { "alias": "lowerLimitDate"; "required": false; }; "availability": { "alias": "availability"; "required": false; }; "availableDates": { "alias": "availableDates"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "ariaDescribedby": { "alias": "ariaDescribedby"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "dateDisplayFormat": { "alias": "dateDisplayFormat"; "required": false; }; "timeDisplayFormat": { "alias": "timeDisplayFormat"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "compact": { "alias": "compact"; "required": false; }; "nasFormGroup": { "alias": "nasFormGroup"; "required": false; }; "nasFormControlName": { "alias": "nasFormControlName"; "required": false; }; "times": { "alias": "times"; "required": false; }; "open": { "alias": "open"; "required": false; }; "selectedMonth": { "alias": "selectedMonth"; "required": false; }; "selectedDate": { "alias": "selectedDate"; "required": false; }; "selectedTime": { "alias": "selectedTime"; "required": false; }; "ariaLabelPreviousMonth": { "alias": "ariaLabelPreviousMonth"; "required": false; }; "ariaLabelNextMonth": { "alias": "ariaLabelNextMonth"; "required": false; }; }, { "selectedDateChange": "selectedDateChange"; "selectedMonthChange": "selectedMonthChange"; "openChange": "openChange"; "focusOnNextChange": "focusOnNextChange"; "focusOnPreviousChange": "focusOnPreviousChange"; }, never, ["*"], false, never>;
+}

package/lib/components/datepicker-new/datepicker-new.module.d.ts

@@ -0,0 +1,16 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./datepicker-new.component";
+import * as i2 from "./calendar-new/calendar-new.component";
+import * as i3 from "@angular/common";
+import * as i4 from "../cover/cover.module";
+import * as i5 from "../select/select.module";
+import * as i6 from "../icon/icon.module";
+import * as i7 from "../../core/directives/nas-class/nas-class.module";
+import * as i8 from "@angular/forms";
+import * as i9 from "../spinner/spinner.module";
+import * as i10 from "../backdrop/backdrop.module";
+export declare class DatepickerNewModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DatepickerNewModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DatepickerNewModule, [typeof i1.DatepickerNewComponent, typeof i2.CalendarNewComponent], [typeof i3.CommonModule, typeof i4.CoverModule, typeof i5.SelectModule, typeof i6.IconModule, typeof i7.NasClassModule, typeof i8.FormsModule, typeof i9.SpinnerModule, typeof i8.ReactiveFormsModule, typeof i10.BackdropModule], [typeof i1.DatepickerNewComponent, typeof i2.CalendarNewComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DatepickerNewModule>;
+}

package/lib/components/datepicker-new/index.d.ts

@@ -0,0 +1,4 @@
+export * from './datepicker-new.component';
+export * from './calendar-new/calendar-new.component';
+export * from './datepicker-new.module';
+export * from './calendar-new/calendar-date.model';

package/lib/components/datepicker-new/services/calendar.service.d.ts

@@ -0,0 +1,27 @@
+import { DatePipe } from '@angular/common';
+import { UtcDate } from '../../../core/models/utc-date.model';
+import { DateHelper } from '../../../core/services/date/date-helper.service';
+import { SelectOptionModel } from '../../select/models/select-option.model';
+import { WeekStart } from '../calendar-new/enums/week-start.enum';
+import { DayModel } from '../calendar-new/models/day.model';
+import { WeekModel } from '../calendar-new/models/week.model';
+import * as i0 from "@angular/core";
+export declare class CalendarService {
+    private datePipe;
+    private dateService;
+    constructor(datePipe: DatePipe, dateService: DateHelper);
+    getMonthNames(locale?: string): Array<string>;
+    getWeekdays(weekStart: WeekStart, locale?: string): Array<string>;
+    updateAvailableDaysWithSelectedDate(availableDays: Array<DayModel>, selectedDate: UtcDate): void;
+    setActiveDate(date: UtcDate, weeks: Array<WeekModel>): void;
+    getDays(weeks: Array<WeekModel>): Array<DayModel>;
+    getWeeks(availableDays: Array<DayModel>, weekStart: WeekStart): Array<WeekModel>;
+    getCurrentMonth(date?: UtcDate): UtcDate;
+    getMonthsSelectOptions(disablePastSelection: boolean, maxMonthIndex: number, monthNames: Array<string>): Array<SelectOptionModel>;
+    getSelectedMonth(months: Array<SelectOptionModel>, currentMonth: UtcDate): SelectOptionModel;
+    getAvailableDays(currentMonth: UtcDate, availableDates: Array<UtcDate>, availability: boolean, disablePastSelection: boolean, lowerLimitDate: UtcDate, activeDate: UtcDate, selectedDate: UtcDate): Array<DayModel>;
+    private isAvailable;
+    private getMonday;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CalendarService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<CalendarService>;
+}

package/lib/components/index.d.ts

@@ -35,7 +35,9 @@ export * from './journey-availability/index';
 export * from './chip/index';
 export * from './tab-group/index';
 export * from './datepicker/index';
+export * from './datepicker-new/index';
 export * from './datepicker-combo/index';
+export * from './datepicker-combo-new/index';
 export * from './phone-number/index';
 export * from './autocomplete/index';
 export * from './trip-summary/index';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@norwegian/core-components",
-  "version": "6.50.0",
+  "version": "6.50.1",
   "peerDependencies": {
     "@angular/common": ">=16.0.0 < 19.0.0",
     "@angular/core": ">=16.0.0 < 19.0.0"