@norwegian/core-components 5.1.0

package/lib/components/phone-number/phone-number.component.d.ts

@@ -0,0 +1,278 @@
+/**
+ * @license
+ * Copyright Norwegian Air Shuttle. All Rights Reserved.
+ */
+import { EventEmitter } from '@angular/core';
+import { NasComponentBase } from '../../core/base/nas-component.base';
+import { SelectOptionModel } from '../select/models/select-option.model';
+import { ClassModel } from '../../core/models/class.model';
+import { FormGroup } from '@angular/forms';
+/**
+ * @description
+ * Norwegian Phone number Component | Form Controls
+ */
+export declare class PhoneNumberComponent extends NasComponentBase {
+    /**
+     * @description
+     * A record containing country codes.
+     * @example
+     * ```html
+     * <nas-phone-number [options]="options"></nas-phone-number>
+     * ```
+     */
+    options: Array<SelectOptionModel>;
+    /**
+     * @description
+     * Preferred options will be listed on top.
+     * @example
+     * ```html
+     * <nas-phone-number [preferred-options]="preferredOptions"></nas-phone-number>
+     * ```
+     */
+    preferredOptions: Array<SelectOptionModel>;
+    /**
+   * @description
+   * Single Phone number prefix/country code, if exists will replace the dropdown selector for countrycode
+   * @example
+   * ```html
+   * <nas-phone-number [prefixCountryCode]="'+47'"></nas-phone-number>
+   * ```
+   */
+    prefixCountryCode: string;
+    /**
+   * @description
+   * A record containing label for phone number.
+   * @example
+   * ```html
+   * <nas-phone-number [label]="phone number"></nas-phone-number>
+   * ```
+   */
+    label: string;
+    /**
+   * @description
+   * A record containing label for options. Only in use when preferredOptions are used.
+   * @example
+   * ```html
+   * <nas-phone-number><nas-optgroup [label]="optionsLabel">...</nas-phone-number>
+   * ```
+   */
+    optionsLabel: string;
+    /**
+   * @description
+   * A record containing label for preferredOptions. Only in use when preferredOptions are used.
+   * @example
+   * ```html
+   * <nas-phone-number><nas-optgroup [label]="preferredOptionsLabel">...</nas-phone-number>
+   * ```
+   */
+    preferredOptionsLabel: string;
+    /**
+  * @description
+  * A record containing place holder for native input element of phone number.
+  * @example
+  * ```html
+  * <nas-phone-number [placeholder]="phone number"></nas-phone-number>
+  * ```
+  */
+    placeholder: string;
+    /**
+     * @description
+     * The ID of the native input element
+     * @example
+     * ```html
+     * <nas-phone-number [id]="'phoneNumber'"></nas-phone-number>
+     * ```
+     */
+    id: string;
+    /**
+     * @description
+     * The type of the native input element. Default value is number
+     * @example
+     * ```html
+     * <nas-phone-number [type]="'text'"></nas-phone-number>
+     * ```
+     */
+    type: string;
+    /**
+     * @description
+     * Whether the control is in an error state.
+     * @example
+     * ```html
+     * <nas-phone-number error></nas-phone-number>
+     * ```
+     */
+    error: boolean;
+    /**
+     * @description
+     * Whether the native input element is disabled or no, with disabled styling.
+     * @example
+     * ```html
+     * <nas-phone-number disabled></nas-phone-number>
+     * ```
+     */
+    disabled: boolean;
+    /**
+     * @description
+     * Set spaceless styling (removing spacing)
+     * @example
+     * ```html
+     * <nas-phone-number spaceless></nas-phone-number>
+     * ```
+     */
+    spaceless: boolean;
+    /**
+     * @description
+     * Set loading styling of input
+     * @example
+     * ```html
+     * <nas-phone-number loading></nas-phone-number>
+     * ```
+     */
+    loading: boolean;
+    /**
+     * @description
+     * The error message to display when error occur. Error attribute need to be true.
+     * @example
+     * ```html
+     * <nas-phone-number [errorMessage]="'please fill in the phone number field'"></nas-phone-number>
+     * ```
+     */
+    errorMessage: string;
+    /**
+     * @description
+     * Sets the info text related to the input
+     * @example
+     * ```html
+     * <nas-phone-number [info]="'please write 8 digit phone number without spaces'"></nas-phone-number>
+     * ```
+     */
+    info: string;
+    /**
+     * @description
+     * Sets the icon on the input
+     * @example
+     * ```html
+     * <nas-phone-number [icon]="'remove'"></nas-phone-number>
+     * ```
+     */
+    icon: string;
+    /**
+     * @description
+     * Whether the element is readonly.
+     * @example
+     * ```html
+     * <nas-phone-number readonly></nas-phone-number>
+     * ```
+     */
+    readonly: boolean;
+    /**
+     * @description
+     * Sets aria describedby for accessibility
+     * @example
+     * ```html
+     * <nas-phone-number [aria-describedby]="'phone number field'"></nas-phone-number>
+     * ```
+     */
+    ariaDescribedby: string;
+    /**
+     * @description
+     * Sets the required attribute on the native input element.
+     *  @example
+     * ```html
+     * <nas-phone-number required></nas-phone-number>
+     * ```
+     */
+    required: boolean;
+    /**
+     * @description
+     * Sets a formControlName directive to the select.
+     * It requires that the consumer included ReactiveFormsModule in it's module.
+     * It requiers that the nasFormGroup input is filled.
+     * @example
+     * ```html
+     * <nas-phone-number [nasFormControlName]="'phoneNumber'"></nas-phone-number>
+     * ```
+     */
+    nasFormControlName: string;
+    /**
+     * @description
+     * Sets a formControlName directive to the select.
+     * It requires that the consumer included ReactiveFormsModule in it's module.
+     * It requiers that the nasFormGroup input is filled.
+     * @example
+     * ```html
+     * <nas-phone-number [nasFormControlNamePrefix]="'phoneNumberPrefix'"></nas-phone-number>
+     * ```
+     */
+    nasFormControlNamePrefix: string;
+    /**
+     * @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.
+     * @example
+     * ```html
+     * <nas-phone-number [nasFormGroup]="myForm"></nas-phone-number>
+     * ```
+     */
+    nasFormGroup: FormGroup;
+    /**
+     * @description
+     * A model binded with native input element of phone number component.
+     * @example
+     * ```html
+     * <nas-phone-number [(model)]="model"></nas-phone-number>
+     * ```
+     */
+    private modelValue;
+    get model(): string;
+    set model(value: string);
+    /**
+    * @description
+    * An output event that fies when input value changes.
+    * @example
+     * ```html
+     * <nas-phone-number (modelChange)="onModelChange()"></nas-phone-number>
+     * ```
+    */
+    modelChange: EventEmitter<string>;
+    /**
+     * @description
+     * Add custom CSS class to the selector.
+     * @example
+     * ```html
+     * <nas-phone-number [cssClass]="cssClass"></nas-phone-number>
+     * ```
+     */
+    cssClass: ClassModel;
+    /**
+     * @description
+     * The default selected value.
+     * @example
+     * ```html
+     * <nas-phone-number [selectedValue]="selectedValue"></nas-phone-number>
+     * ```
+     */
+    selectedValue: SelectOptionModel;
+    /**
+     * @description
+     * Gets or sets the selected value.
+     * @example
+     * ```html
+     * <nas-phone-number [(selected)]="selected"></nas-phone-number>
+     * ```
+     */
+    get selected(): SelectOptionModel;
+    set selected(option: SelectOptionModel);
+    /**
+     * @description
+     * An event that is fired every time a selection is done.
+     * @example
+     * ```html
+     * <nas-phone-number (selectedChange)="onSelectedChange($event)"></nas-phone-number>
+     * ```
+     */
+    selectedChange: EventEmitter<SelectOptionModel>;
+    constructor();
+    mainClass(): ClassModel;
+}

package/lib/components/phone-number/phone-number.module.d.ts

@@ -0,0 +1,2 @@
+export declare class PhoneNumberModule {
+}

package/lib/components/premium-toggle/index.d.ts

@@ -0,0 +1,2 @@
+export * from './premium-toggle.component';
+export * from './premium-toggle.module';

package/lib/components/premium-toggle/premium-toggle.component.d.ts

@@ -0,0 +1,51 @@
+import { OnInit, EventEmitter } from '@angular/core';
+import { NasComponentBase } from '../../core/base/nas-component.base';
+import { OptionModel } from '../toggle/models/options.model';
+/**
+ * @description
+ * Norwegian Premium Toggle Component | Functional
+*/
+export declare class PremiumToggleComponent extends NasComponentBase implements OnInit {
+    selectedValue: OptionModel;
+    options: Array<OptionModel>;
+    /**
+     * @description
+     * Sets the initial selected value on the toggle. Is either 'standard' or 'premium'.
+     * @example
+     * ```html
+     * <nas-premium-toggle [defaultValue]="'premium'"></nas-premium-toggle>
+     * ```
+     */
+    defaultValue: string;
+    /**
+     * @description
+     * A label for the standard alternative.
+     * @example
+     * ```html
+     * <nas-premium-toggle [standardLabel]="'Standard'"></nas-premium-toggle>
+     * ```
+     */
+    standardLabel: string;
+    /**
+     * @description
+     * A label for the premium alternative.
+     * @example
+     * ```html
+     * <nas-premium-toggle [premiumLabel]="'Premium'"></nas-premium-toggle>
+     * ```
+     */
+    premiumLabel: string;
+    /**
+     * @description
+     * An event that is fired every time a toggle is performed.
+     * @example
+     * ```html
+     * <nas-premium-toggle (handleChange)="onHandleChange($event)"></nas-premium-toggle>
+     * ```
+     */
+    handleChange: EventEmitter<string>;
+    constructor();
+    ngOnInit(): void;
+    reset(): void;
+    onChange(option: OptionModel): void;
+}

package/lib/components/premium-toggle/premium-toggle.module.d.ts

@@ -0,0 +1,2 @@
+export declare class PremiumToggleModule {
+}

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

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

package/lib/components/radio/radio.component.d.ts

@@ -0,0 +1,115 @@
+import { FormGroup } from '@angular/forms';
+import { NasComponentBase, ClassModel } from '../../core';
+import { EventEmitter } from '@angular/core';
+/**
+ * @license
+ * Copyright Norwegian Air Shuttle. All Rights Reserved.
+ * @description
+ * Norwegian radio button Component | Form Controls
+ */
+export declare class RadioComponent extends NasComponentBase {
+    private checkedValue;
+    /**
+    * @description
+    * The ID of the native input element
+    */
+    id: string;
+    /**
+     * @description
+     * The value of the radio button, represented as a string
+     */
+    value: string;
+    /**
+     * @description
+     * Sets the name attribute of the native radio input
+     */
+    name: string;
+    /**
+     * @description
+     * Sets error styling of the radio input
+     */
+    error: boolean;
+    /**
+     * @description
+     * Sets the radio input disabled with disabled styling. This will not work in combination with reactive forms.
+     */
+    disabled: boolean;
+    /**
+     * @description
+     * Sets the radio component to strong styling
+     */
+    strong: boolean;
+    /**
+     * @description
+     * Sets the display css property to block
+     */
+    block: boolean;
+    /**
+     * @description
+     * Removed the bottom margin
+     */
+    spaceless: boolean;
+    /**
+     * @description
+     * String to set tabIndex on native input element
+     */
+    tabIndex: number;
+    /**
+     * @description
+     * Sets required attribute on native radio input element
+     */
+    required: boolean;
+    /**
+     * @description
+     * Used to set the 'aria-label' attribute on the underlying input element.
+     */
+    ariaLabel: string;
+    /**
+     * @description
+     * The 'aria-labelledby' attribute takes precedence as the element's text alternative.
+     */
+    ariaDescribedby: string;
+    /**
+     * @description
+     * The 'aria-describedby' attribute is read after the element's label and field type.
+     */
+    ariaLabelledby: string;
+    /**
+     * @description
+     * Set the radio button checked.
+     * @example
+     * <nas-radio checked></nas-radio>
+     */
+    get checked(): boolean;
+    set checked(input: boolean);
+    /**
+     * @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.
+     * @example
+     * <nas-input [nasFormControlName]="'username'"></nas-input>
+     */
+    nasFormControlName: string;
+    /**
+     * @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.
+     * @example
+     * <nas-input [nasFormGroup]="loginGroup"></nas-input>
+     */
+    nasFormGroup: FormGroup;
+    /**
+     * @description
+     * Listen for checked change events.
+     * @example
+     * <nas-radio (checkedChange)="onCheckedChange($event)"></nas-radio>
+     */
+    checkedChange: EventEmitter<boolean>;
+    private componentId;
+    get inputId(): string;
+    constructor();
+    mainClass(): ClassModel;
+    onChange(event: Event): void;
+}

package/lib/components/radio/radio.module.d.ts

@@ -0,0 +1,2 @@
+export declare class RadioModule {
+}

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

@@ -0,0 +1,5 @@
+export * from './select.component';
+export * from './option/option.component';
+export * from './optgroup/optgroup.component';
+export * from './select.module';
+export * from './models/select-option.model';

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

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

package/lib/components/select/optgroup/optgroup.component.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright Norwegian Air Shuttle. All Rights Reserved.
+ */
+import { AfterViewChecked, QueryList, ElementRef } from '@angular/core';
+import { OptionComponent } from '../option/option.component';
+import { NasComponentBase } from '../../../core';
+export declare class OptgroupComponent extends NasComponentBase implements AfterViewChecked {
+    private elementRef;
+    optionComponents: QueryList<OptionComponent>;
+    /**
+     * @description
+     * Sets the label on the group.
+     * @example
+     * ```html
+     * <nas-optgroup [label]="'Label name'"></nas-optgroup>
+     * ```
+     */
+    label: string;
+    constructor(elementRef: ElementRef);
+    ngAfterViewChecked(): void;
+}

package/lib/components/select/option/option.component.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright Norwegian Air Shuttle. All Rights Reserved.
+ */
+import { ElementRef, AfterViewChecked } from '@angular/core';
+import { SelectOptionModel } from '../models/select-option.model';
+import { NasComponentBase } from '../../../core';
+export declare class OptionComponent extends NasComponentBase implements AfterViewChecked {
+    private elementRef;
+    /**
+     * @description
+     * Add option.
+     * @example
+     * ```html
+     * <nas-option [option]="option"></nas-option>
+     * ```
+     */
+    option: SelectOptionModel;
+    constructor(elementRef: ElementRef<HTMLElement>);
+    ngAfterViewChecked(): void;
+}

package/lib/components/select/select.component.d.ts

@@ -0,0 +1,156 @@
+/**
+ * @license
+ * Copyright Norwegian Air Shuttle. All Rights Reserved.
+ */
+import { EventEmitter, ElementRef, ChangeDetectorRef, OnChanges, QueryList, AfterContentInit, AfterViewChecked } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+import { NasComponentBase } from '../../core';
+import { ClassModel } from '../../core/models';
+import { SelectOptionModel } from './models/select-option.model';
+import { OptionComponent } from './option/option.component';
+import { OptgroupComponent } from './optgroup/optgroup.component';
+/**
+ * @description
+ * Norwegian Select Component | Form Controls
+ */
+export declare class SelectComponent extends NasComponentBase implements OnChanges, AfterViewChecked, AfterContentInit {
+    private change;
+    selectControl: FormControl;
+    labelWidth: number;
+    selectTitle: string;
+    hasContent: boolean;
+    selectTitleWrapper: ElementRef;
+    errorMessageWrapper: ElementRef;
+    select: ElementRef<HTMLSelectElement>;
+    optionComponents: QueryList<OptionComponent>;
+    optgroupComponents: QueryList<OptgroupComponent>;
+    private optionsValue;
+    /**
+     * @description
+     * Add custom inline styling.
+     */
+    inline?: boolean;
+    /**
+     * @description
+     * Add custom label styling.
+     */
+    label: string;
+    /**
+     * @description
+     * Sets block styling.
+     */
+    block?: boolean;
+    /**
+     * @description
+     * Sets spaceless styling.
+     */
+    spaceless?: boolean;
+    /**
+     * @description
+     * Sets compact styling.
+     */
+    compact?: boolean;
+    /**
+     * @description
+     * Sets simple styling.
+     */
+    simple?: boolean;
+    /**
+     * @description
+     * Sets light styling.
+     */
+    light?: boolean;
+    /**
+     * @description
+     * Sets fill styling.
+     */
+    fill?: boolean;
+    /**
+     * @description
+     * Sets error styling.
+     */
+    error?: boolean;
+    /**
+     * @description
+     * The error message to display when error occur. Error attribute need to be true.
+     */
+    errorMessage?: string;
+    /**
+     * @description
+     * Sets disabled styling.
+     */
+    disabled?: boolean;
+    /**
+     * @description
+     * Makes the select component autogrow.
+     */
+    autogrow?: boolean;
+    /**
+     * @description
+     * Add custom CSS class to the selector.
+     */
+    cssClass: ClassModel;
+    /**
+     * @description
+     * Sets a formControlName directive to the select.
+     * It requires that the consumer included ReactiveFormsModule in it's module.
+     * It requiers that the nasFormGroup input is filled.
+     * @example
+     * ```html
+     * <nas-select [nasFormControlName]="'fareClass'"></nas-select>
+     * ```
+     */
+    nasFormControlName: string;
+    /**
+     * @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.
+     * @example
+     * ```html
+     * <nas-select [nasFormGroup]="classGroup"></nas-select>
+     * ```
+     */
+    nasFormGroup: FormGroup;
+    /**
+     * @description
+     * Add options to the selector.
+     */
+    get options(): Array<SelectOptionModel>;
+    set options(value: Array<SelectOptionModel>);
+    /**
+     * @description
+     * The default selected value.
+     */
+    selectedValue: SelectOptionModel;
+    /**
+     * @description
+     * Gets or sets the selected value.
+     */
+    get selected(): SelectOptionModel;
+    set selected(option: SelectOptionModel);
+    /**
+     * @description
+     * An event that is fired every time a selection is done.
+     */
+    selectedChange: EventEmitter<SelectOptionModel>;
+    /**
+     * @description
+     * An events that fires every type a keydown event has been pressed on the select element.
+     */
+    keydown: EventEmitter<KeyboardEvent>;
+    private open;
+    private componentId;
+    constructor(change: ChangeDetectorRef);
+    ngOnChanges(): void;
+    ngAfterContentInit(): void;
+    ngAfterViewChecked(): void;
+    getSelectId(): string;
+    toggleSelect(event: any, keydown?: boolean): void;
+    blurSelect(): void;
+    getClasses(): Array<ClassModel>;
+    private setSelectedAndEmitChange;
+    private setFirstOptionSelected;
+    private updateShadow;
+    private setSelectedTitle;
+}

package/lib/components/select/select.module.d.ts

@@ -0,0 +1,2 @@
+export declare class SelectModule {
+}

package/lib/components/simple-list/index.d.ts

@@ -0,0 +1,2 @@
+export * from './simple-list.component';
+export * from './simple-list.module';