# Upgrading from v14 to v15

The main feature in `prestations-ng` v15 is the update of the `@angular/*` peer dependencies
to `^13.1.0`.

## Updating Angular

`prestations-ng` v15+ now supports Angular 13. You can follow the Angular update guide
at this address:

- [https://update.angular.io/?l=3&v=12.0-13.0](https://update.angular.io/?l=3&v=12.0-13.0)

### When having migrated to ESLint

```bash
yarn global add @angular/cli@13
ng update @angular-eslint/builder@13
ng update @angular-eslint/eslint-plugin @angular-eslint/eslint-plugin-template @angular-eslint/template-parser
ng update @typescript-eslint/eslint-plugin @typescript-eslint/parser
ng update eslint-plugin-import eslint-plugin-jasmine eslint-plugin-jsdoc eslint-plugin-prefer-arrow eslint-plugin-rxjs-angular
ng update eslint
ng update eslint-plugin-rxjs@4
ng update @angular/core@13 @angular/cli@13
ng update rxjs@7
ng update @dsivd/prestations-ng@15
ng update \
    @types/jasmine \
    @types/node@15 \
    ts-node@10
ng update ngx-image-cropper@~6.0.0
ng update ng-http-loader@11
# Remove your resolutions in package.json before executing 'yarn upgrade'
yarn upgrade
```

### Otherwise

```bash
yarn global add @angular/cli@13
ng update @angular/core@13 @angular/cli@13
ng update rxjs@7
ng update @dsivd/prestations-ng@latest
ng update \
    @types/jasmine \
    @types/node@15 \
    ts-node@10
ng update ngx-image-cropper@~6.0.0
ng update ng-http-loader@11
# Remove your resolutions in package.json before executing 'yarn upgrade'
yarn upgrade
```

## Migrating to ESLint

- Follow [our migration guide](ESLINT_MIGRATION_GUIDE.md) to migrate your project from TSLint to ESLint

## Deprecated features

### foehn-input-date component

Added `<foehn-date-picker-button>` directly into template. Please refer to the [datepicker documentation](https://dsi-vd.github.io/prestations-ng/datepicker)

- removed

```html
<ng-content select="[date-picker-button]"></ng-content>
```

- replaced by

```html
<foehn-date-picker-button></foehn-date-picker-button>
```

which is visible by default. To hide it, set `hideDatePickerButton` to `true` as a `foehn-input-date` attribute. See example below for more information.

#### Migration step by step:

##### Case 1: When using `foehn-input-date` with `foehn-date-picker-button`:

Before :

```html
<foehn-input-date label="Date" [(model)]="yourModel">
    <foehn-date-picker-button
        date-picker-button
        [(model)]="yourModel"
        [displaySelectedDate]="false"
        class="align-self-center"
    ></foehn-date-picker-button>
</foehn-input-date>
```

After :

```html
<foehn-input-date label="Date" [(model)]="yourModel"></foehn-input-date>
```

##### Case 2: When using `foehn-input-date` without `foehn-date-picker-button`:

Before :

```html
<foehn-input-date label="Date" [(model)]="yourModel"></foehn-input-date>
```

After :

```html
<foehn-input-date
    label="Date"
    [(model)]="yourModel"
    [hideDatePickerButton]="true"
></foehn-input-date>
```
