@norwegian/core-components 6.49.0 → 6.50.1

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

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

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

@@ -0,0 +1,294 @@
+/**
+ * @license
+ * Copyright Norwegian Air Shuttle. All Rights Reserved.
+ */
+import { EventEmitter, ElementRef, AfterViewChecked, OnInit, OnDestroy } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+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 { DeviceHelper } from '../../core/services/device/device-helper.service';
+import { DatepickerComponent } from '../datepicker/datepicker.component';
+import * as i0 from "@angular/core";
+/**
+ * @description
+ * Norwegian Datepicker Combo Component | New design | Beta
+ */
+export declare class DatepickerComboNewComponent extends NasComponentBase implements OnInit, AfterViewChecked, OnDestroy {
+    private dateService;
+    private deviceHelper;
+    inboundLowerLimitDate: UtcDate;
+    datepickerOutbound: DatepickerComponent;
+    datepickerInbound: ElementRef;
+    container: ElementRef;
+    /**
+     * @property Input
+     * @description
+     * Adds 'aria-label' to the backdrops.
+     */
+    ariaLabelBackdrop: string;
+    /**
+     * @property Input
+     * @description
+     * Sets outbound datepicker open.
+     */
+    get outboundOpen(): boolean;
+    set outboundOpen(value: boolean);
+    /**
+     * @property Input
+     * @description
+     * Sets inbound datepicker open.
+     */
+    get inboundOpen(): boolean;
+    set inboundOpen(value: 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
+     * Disable possibility to select outbound dates.
+     */
+    outboundDisabled: boolean;
+    /**
+     * @property Input
+     * @description
+     * Disable possibility to select inbound dates.
+     */
+    inboundDisabled: boolean;
+    /**
+     * @property Input
+     * @description
+     * Remove the inbound datepicker if set.
+     */
+    outboundOnly: boolean;
+    /**
+     * @property Input
+     * @description
+     * Label for outbound datepicker.
+     */
+    outboundLabel: string;
+    /**
+     * @property Input
+     * @description
+     * Label for inbound datepicker.
+     */
+    inboundLabel: string;
+    /**
+     * @property Input
+     * @description
+     * Sets the datepickers in availability mode where available dates can be added.
+     */
+    availability: boolean;
+    /**
+     * @property Input
+     * @description
+     * Available dates for outbound calendar.
+     */
+    outboundAvailableDates: Array<UtcDate>;
+    /**
+     * @property Input
+     * @description
+     * Available dates for inbound calendar.
+     */
+    inboundAvailableDates: Array<UtcDate>;
+    /**
+     * @property Input
+     * @description
+     * If set, Enables the time dropdown selector alongside datepicker.
+     */
+    times: Array<UtcDate>;
+    /**
+     * @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.
+     */
+    nasFormControlNameOutbound: string;
+    /**
+     * @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.
+     */
+    nasFormControlNameInbound: string;
+    /**
+     * @property Input
+     * @description
+     * Selected datefor outbound calendar.
+     */
+    get outboundSelectedDate(): UtcDate;
+    set outboundSelectedDate(date: UtcDate);
+    /**
+     * @property Input
+     * @description
+     * Selected datefor inbound calendar.
+     */
+    get inboundSelectedDate(): UtcDate;
+    set inboundSelectedDate(date: UtcDate);
+    /**
+     * @property Input
+     * @description
+     * enable to disable backdrop.
+     */
+    disableBackdrop: boolean;
+    /**
+     * @property Input
+     * @description
+     * Sets the outbound selected time in the time selector.
+     */
+    outboundSelectedTime: UtcDate;
+    /**
+     * @property Input
+     * @description
+     * Sets the inbound selected time in the time selector.
+     */
+    inboundSelectedTime: 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 Input
+     * @description
+     * Sets a relative number to decide when the inbound lower limit date should be based on selected outbound date.
+     *
+     * The lower limit date for inbound is set by default equal to the selected outbound date.
+     *
+     * If this number is positive, the inbound lower limit date will add the number of days to the selected outbound date.
+     * If this number is negative, the inbound lower limit date will subtract the number of days to the selected outbound date.
+     */
+    inboundLowerLimitDateOffset: number;
+    /**
+     * @property Output
+     * @description
+     * When selected datehas been changed on the outbound calendar.
+     */
+    outboundSelectedDateChange: EventEmitter<UtcDate>;
+    /**
+     * @property Output
+     * @description
+     * When selected datehas been changed on the inbound calendar.
+     */
+    inboundSelectedDateChange: EventEmitter<UtcDate>;
+    /**
+     * @property Output
+     * @description
+     * Outbound datepicker is open or closed.
+     */
+    outboundOpenChange: EventEmitter<boolean>;
+    /**
+     * @property Output
+     * @description
+     * Inbound datepicker is open or closed.
+     */
+    inboundOpenChange: EventEmitter<boolean>;
+    /**
+     * @property Output
+     * @description
+     * Outbound calendar changes month.
+     */
+    outboundMonthChange: EventEmitter<UtcDate>;
+    /**
+     * @property Output
+     * @description
+     * Inbound calendar changes month.
+     */
+    inboundMonthChange: EventEmitter<UtcDate>;
+    /**
+     * @property Output
+     * @description
+     * When a user has actively changed the date.
+     */
+    focusOnNextChange: EventEmitter<any>;
+    /**
+     * @property Output
+     * @description
+     * When a user has pressed shift + tab to go to previous control.
+     */
+    focusOnPreviousChange: EventEmitter<KeyboardEvent | MouseEvent>;
+    get inboundSelectedMonth(): UtcDate;
+    set inboundSelectedMonth(month: UtcDate);
+    private outboundSelectedDateValue;
+    private inboundSelectedDateValue;
+    private inboundSelectedMonthValue;
+    private inboundOpenValue;
+    private outboundOpenValue;
+    private containerWidth;
+    private inboundValueChangesSubscription;
+    private outboundValueChangesSubscription;
+    constructor(dateService: DateHelper, deviceHelper: DeviceHelper);
+    ngOnInit(): void;
+    ngAfterViewChecked(): void;
+    onFocusOnNext(event: KeyboardEvent | MouseEvent): void;
+    onFocusOnPrevious(event: KeyboardEvent): void;
+    onInboundFocusOnPrevious(): void;
+    onOutboundMonthChange(date: UtcDate): void;
+    getMainClass(): Array<ClassModel>;
+    checkOutboundOnly(): boolean;
+    checkInboundDisabled(): boolean;
+    ngOnDestroy(): void;
+    private updateContainerWidth;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DatepickerComboNewComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DatepickerComboNewComponent, "nas-datepicker-combo-new", never, { "ariaLabelBackdrop": { "alias": "ariaLabelBackdrop"; "required": false; }; "outboundOpen": { "alias": "outboundOpen"; "required": false; }; "inboundOpen": { "alias": "inboundOpen"; "required": false; }; "noAvailableFlightsLabel": { "alias": "noAvailableFlightsLabel"; "required": false; }; "availableFlightsLabel": { "alias": "availableFlightsLabel"; "required": false; }; "disablePastSelection": { "alias": "disablePastSelection"; "required": false; }; "outboundDisabled": { "alias": "outboundDisabled"; "required": false; }; "inboundDisabled": { "alias": "inboundDisabled"; "required": false; }; "outboundOnly": { "alias": "outboundOnly"; "required": false; }; "outboundLabel": { "alias": "outboundLabel"; "required": false; }; "inboundLabel": { "alias": "inboundLabel"; "required": false; }; "availability": { "alias": "availability"; "required": false; }; "outboundAvailableDates": { "alias": "outboundAvailableDates"; "required": false; }; "inboundAvailableDates": { "alias": "inboundAvailableDates"; "required": false; }; "times": { "alias": "times"; "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; }; "nasFormControlNameOutbound": { "alias": "nasFormControlNameOutbound"; "required": false; }; "nasFormControlNameInbound": { "alias": "nasFormControlNameInbound"; "required": false; }; "outboundSelectedDate": { "alias": "outboundSelectedDate"; "required": false; }; "inboundSelectedDate": { "alias": "inboundSelectedDate"; "required": false; }; "disableBackdrop": { "alias": "disableBackdrop"; "required": false; }; "outboundSelectedTime": { "alias": "outboundSelectedTime"; "required": false; }; "inboundSelectedTime": { "alias": "inboundSelectedTime"; "required": false; }; "ariaLabelPreviousMonth": { "alias": "ariaLabelPreviousMonth"; "required": false; }; "ariaLabelNextMonth": { "alias": "ariaLabelNextMonth"; "required": false; }; "inboundLowerLimitDateOffset": { "alias": "inboundLowerLimitDateOffset"; "required": false; }; }, { "outboundSelectedDateChange": "outboundSelectedDateChange"; "inboundSelectedDateChange": "inboundSelectedDateChange"; "outboundOpenChange": "outboundOpenChange"; "inboundOpenChange": "inboundOpenChange"; "outboundMonthChange": "outboundMonthChange"; "inboundMonthChange": "inboundMonthChange"; "focusOnNextChange": "focusOnNextChange"; "focusOnPreviousChange": "focusOnPreviousChange"; }, never, never, false, never>;
+}

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

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./datepicker-combo-new.component";
+import * as i2 from "@angular/common";
+import * as i3 from "../datepicker-new/datepicker-new.module";
+import * as i4 from "../../core/directives/nas-class/nas-class.module";
+export declare class DatepickerComboNewModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DatepickerComboNewModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DatepickerComboNewModule, [typeof i1.DatepickerComboNewComponent], [typeof i2.CommonModule, typeof i3.DatepickerNewModule, typeof i4.NasClassModule], [typeof i1.DatepickerComboNewComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DatepickerComboNewModule>;
+}

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

@@ -0,0 +1,2 @@
+export * from './datepicker-combo-new.component';
+export * from './datepicker-combo-new.module';

package/lib/components/datepicker-new/calendar-new/calendar-date.model.d.ts

@@ -0,0 +1,5 @@
+import { UtcDate } from '../../../core';
+export interface CalendarDateModel {
+    date: UtcDate;
+    model: string;
+}

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

@@ -0,0 +1,159 @@
+/**
+ * @license
+ * Copyright Norwegian Air Shuttle. All Rights Reserved.
+ */
+import { DatePipe } from '@angular/common';
+import { ElementRef, EventEmitter, OnInit, QueryList } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { WeekStart } from './enums/week-start.enum';
+import { DayModel } from './models/day.model';
+import { SelectOptionModel } from './models/select-option.model';
+import { WeekModel } from './models/week.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 { CalendarService } from '../services/calendar.service';
+import * as i0 from "@angular/core";
+export declare class CalendarNewComponent extends NasComponentBase implements OnInit {
+    dateService: DateHelper;
+    datePipe: DatePipe;
+    private calendarService;
+    weeks: Array<WeekModel>;
+    months: SelectOptionModel[];
+    weekdays: string[];
+    isPreviousMonthDisabled: boolean;
+    previousMonthRef: ElementRef<HTMLButtonElement>;
+    nextMonthRef: ElementRef<HTMLButtonElement>;
+    tableCells: QueryList<ElementRef>;
+    dateButtons: QueryList<ElementRef>;
+    calendarContent: ElementRef;
+    monthSelectRef: SelectComponent;
+    /**
+     * @description
+     * Label for no available flights.
+     */
+    noAvailableFlightsLabel: string;
+    /**
+     * @description
+     * Label for available flights.
+     */
+    availableFlightsLabel: string;
+    /**
+     * @description
+     * Disable possibility to select dates in the past.
+     */
+    disablePastSelection?: boolean;
+    /**
+     * @description
+     * The lowest date allowed.
+     */
+    get lowerLimitDate(): UtcDate;
+    set lowerLimitDate(date: UtcDate);
+    /**
+    * @description
+    * Current month date to be displayed. It will take precedence over selected date input, if it is set.
+    */
+    date: UtcDate;
+    /**
+     * @description
+     * Desides if the week should start on a monday or sunday. Defaults to monday.
+     */
+    weekStart: WeekStart;
+    /**
+     * @description
+     * Display week numbers.
+     */
+    displayWeekNumbers: boolean;
+    /**
+     * @description
+     * Sets the datepicker in availability mode where available dates can be added.
+     */
+    availability: boolean;
+    /**
+     * @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;
+    /**
+     * @description
+     * An array with all the available dates of the month for seats.
+     */
+    get availableDates(): Array<UtcDate>;
+    set availableDates(dates: Array<UtcDate>);
+    /**
+     * @description
+     * Gets or sets the active date
+     */
+    get activeDate(): UtcDate;
+    set activeDate(date: UtcDate);
+    get selectedDate(): UtcDate;
+    set selectedDate(date: UtcDate);
+    nasFormGroup: FormGroup;
+    nasFormControlName: string;
+    dateDisplayFormat: string;
+    ariaLabelPreviousMonth: string;
+    ariaLabelNextMonth: string;
+    /**
+     * @description
+     * Month selected by the user by clicking in drop down for month selection or month navigation buttons.
+     */
+    monthChange: EventEmitter<UtcDate>;
+    /**
+     * @description
+     * When a user has actively changed the date.
+     */
+    focusOnNextChange: EventEmitter<KeyboardEvent | MouseEvent>;
+    /**
+     * @description
+     * When selected date has been changed.
+     */
+    selectedDateChange: EventEmitter<UtcDate>;
+    /**
+     * @description
+     * When active date has been changed.
+     */
+    activeDateChange: EventEmitter<UtcDate>;
+    get selectedMonth(): SelectOptionModel;
+    set selectedMonth(option: SelectOptionModel);
+    get nextMonthDisabled(): boolean;
+    get currentMonthModel(): string;
+    /**
+     * @description
+     * Is in use by DatepickerComponent
+     */
+    get activeDateCell(): HTMLElement;
+    private maxMonthIndex;
+    private activeDateValue;
+    private availableDatesValue;
+    private currentMonth;
+    private selectedValue;
+    private availableDays;
+    private monthNames;
+    private lowerLimitDateValue;
+    private selectedDateValue;
+    private shouldFocusCalendarOnAvailableDatesUpdate;
+    constructor(dateService: DateHelper, datePipe: DatePipe, calendarService: CalendarService);
+    ngOnInit(): void;
+    dateKeyDown(event: KeyboardEvent): void;
+    onPreviousMonthKeydown(event: KeyboardEvent): void;
+    onNextMonthKeydown(event: KeyboardEvent): void;
+    onNextMonthMousedown(): void;
+    onPreviousMonthMousedown(): void;
+    onMonthSelectKeydown(event: KeyboardEvent): void;
+    focusElement(event: KeyboardEvent, elementToFocus: HTMLElement): void;
+    setActiveDate(): void;
+    onMouseDown(date: string, event: MouseEvent): void;
+    onDayFocus(day: DayModel): void;
+    onDayClick(day: DayModel): void;
+    setSelectedDate(date: UtcDate): void;
+    getCellButtonClass(day: DayModel): ClassModel;
+    getNextMonth(): void;
+    getPreviousMonth(): void;
+    setPreviousMonthDisabled(): void;
+    private applySelectedDateChanges;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CalendarNewComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CalendarNewComponent, "nas-calendar-new", never, { "noAvailableFlightsLabel": { "alias": "noAvailableFlightsLabel"; "required": false; }; "availableFlightsLabel": { "alias": "availableFlightsLabel"; "required": false; }; "disablePastSelection": { "alias": "disablePastSelection"; "required": false; }; "lowerLimitDate": { "alias": "lowerLimitDate"; "required": false; }; "date": { "alias": "date"; "required": false; }; "weekStart": { "alias": "weekStart"; "required": false; }; "displayWeekNumbers": { "alias": "displayWeekNumbers"; "required": false; }; "availability": { "alias": "availability"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "availableDates": { "alias": "availableDates"; "required": false; }; "activeDate": { "alias": "activeDate"; "required": false; }; "selectedDate": { "alias": "selectedDate"; "required": false; }; "nasFormGroup": { "alias": "nasFormGroup"; "required": false; }; "nasFormControlName": { "alias": "nasFormControlName"; "required": false; }; "dateDisplayFormat": { "alias": "dateDisplayFormat"; "required": false; }; "ariaLabelPreviousMonth": { "alias": "ariaLabelPreviousMonth"; "required": false; }; "ariaLabelNextMonth": { "alias": "ariaLabelNextMonth"; "required": false; }; }, { "monthChange": "monthChange"; "focusOnNextChange": "focusOnNextChange"; "selectedDateChange": "selectedDateChange"; "activeDateChange": "activeDateChange"; }, never, never, false, never>;
+}

package/lib/components/datepicker-new/calendar-new/enums/week-start.enum.d.ts

@@ -0,0 +1,4 @@
+export declare enum WeekStart {
+    monday = 0,
+    sunday = 1
+}

package/lib/components/datepicker-new/calendar-new/models/day.model.d.ts

@@ -0,0 +1,10 @@
+export interface DayModel {
+    date: string;
+    index?: number;
+    isSelected?: boolean;
+    isEmpty?: boolean;
+    isDisabled?: boolean;
+    isAvailable?: boolean;
+    isActive?: boolean;
+    isWithinRange?: boolean;
+}

package/lib/components/datepicker-new/calendar-new/models/select-option.model.d.ts

@@ -0,0 +1,4 @@
+export interface SelectOptionModel {
+    value: string;
+    title: string;
+}

package/lib/components/datepicker-new/calendar-new/models/week.model.d.ts

@@ -0,0 +1,5 @@
+import { DayModel } from './day.model';
+export interface WeekModel {
+    days: Array<DayModel>;
+    weekNumber: number;
+}