# M Features - Route Search

`import { ... } from '@metromobilite/m-features/route-search'`

This module provides services, a pipe and more to work with the route search API.

The main entry point of this module is the RouteSearchService that allow you to perform request to the API.

## Components

### Itinerary content

This component is used to display an itinerary summary, into a list or a mat-accordion in most cases.
Also, this is a pure UI component, no process is applied to the itinerary data. So if it doesn't suit your needs, fill free not to use it.

#### Basic usage

```html
<mf-itinerary-content></mf-itinerary-content>
```

#### Override some parts of the content
```html
<mf-itinerary-content>
	<ng-template #durationMode>
		<!-- Override the duration mode sub-template -->
	</ng-template>
	<ng-template #timeFare>
		<!-- Override the time fare sub-template -->
	</ng-template>
	<ng-template #cov>
		<!-- Override the COV template -->
	</ng-template>
	<ng-template #transit>
		<!-- Override the Transit template -->
	</ng-template>
	<ng-template #default>
		<!-- Override the default template -->
	</ng-template>
</mf-itinerary-content>
```

You can access to sub-templates in #cov, #transit and #default with the following syntax:

```html
<mf-itinerary-content [itinerary]="itinerary">
	<ng-template #default let-durationMode="durationMode" let-timeFare="timeFare">
		<ng-container *ngTemplateOutlet="durationMode; context: {$implicit: itinerary}"></ng-container>
		<ng-container *ngTemplateOutlet="timeFare; context: {$implicit: itinerary}"></ng-container>
	</ng-template>
</mf-itinerary-content>
```

#### Style

You may want to use the default style:

First, in your global scss files, you should import the module's style file like this:

```SCSS
@import "~@metromobilite/m-features/route-search/style/route-search";
```

And add the `itinerary-content` CSS class to the `mat-accordion` element (or any other parent element).


### Itinerary content leg

Basic component design to be used within the itinerary content component.

### Leg detail

Basic component to display legs details.

## Module data

| Token                | Type                | description                                                       |
| -------------------- | ------------------- | ----------------------------------------------------------------- |
| `TRANSPORT_MODES`    | `TransportMode[]`   | The available transport modes.                                    |
| `ROUTE_SORT_OPTIONS` | `RouteSortOption[]` | The options used to sort the itinerary list.                      |
| `OTP_CONFIG`         | `OTPConfig`         | The OTP config used to make the requests to the OTP API endpoint. |
| `OTP_PMR_CONFIG`     | `PMRConfig`         | The PMR OTP config used to make requests to the OTP API endpoint. |

Each data must be used with the `@Inject` decorator in a constructor of a class.
Also, each data may be overrided in your NgModule using the provider feature.

## Pipes

| name              | description                                            |
| ----------------- | ------------------------------------------------------ |
| `mfItineraryTime` | Format an itinerary/leg time (`14:32`).                |
| `mfLegStopName`   | Extract the name from the leg (from/to).name property. |