availpro-hotels-selector v1.0.7

Select an hotel as easily as several

Install

jspm install npm:availpro-hotels-selector

Add typings

typings install file:jspm_packages/npm/availpro-hotels-selector@1.0.0/availpro-hotels-selector.d.ts --save
typings install file:jspm_packages/npm/availpro-hotels-selector@1.0.0/template/availpro-hotels-selector.d.ts --save --ambient

Map template

System.config({
	packages: {
		"availpro-hotels-selector/template": {
			"main": "availpro-hotels-selector.html",
			"defaultExtension": false
		}
	}
})

Usage

Import and register the component in knockout

import * as hotelsSelector from 'availpro-hotels-selector';
ko.components.register('availpro-hotels-selector', hotelsSelector);

Provide translations to parameters

public hotelsSelectorTranslations = new hotelsSelector.Translations();
public hotelsSelectorParameters = new hotelsSelector.Parameters(this.hotelsSelectorTranslations);

Set async translations / parameters

this.hotelsSelectorTranslations.nextLink('suivant');
...

this.hotelsSelectorParameters.hotels(hotels);
this.hotelsSelectorParameters.selectedHotels.push(hotels[1], hotels[5]);

API

Parameters(translations): Parameters

Type: Function

{
    autoLink: KnockoutObservable<boolean>;
    hotels: KnockoutObservableArray<IHotel>;
    selectedHotels: KnockoutObservableArray<IHotel>;
    translations: Translations;
    constructor(translations: Translations);
}

Translations(): Translations

Type: Function

{
    searchInputPlaceholder: KnockoutObservable<string>;
    selectAllLink: KnockoutObservable<string>;
    selectNoneLink: KnockoutObservable<string>;
    nextLink: KnockoutObservable<string>;
    previousLink: KnockoutObservable<string>;
    autoLinkHotelsLabel: KnockoutObservable<string>;
	constructor();
}

IHotel

Type: Interface

{
    id: number;
    text: string;
    isSelected: boolean;
}