# Changelog

All notable changes to Fluid Design System Angular will be documented in this file.

The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).

## 📦 6.0.0 - 2025-12-10

Major release of `Fluid 6`.

All changes since `2.13.0` can be found above in details and are summarized in [the migration guide](https://fluid.design.digital.engie.com/fluid-design-system/storybook/angular/index.html?path=/docs/docs-migrations-v2-to-v6--documentation).

### 🛠️ Maintained

- Updated dependencies
- @engie-group/fluid-design-system@6.0.0
- @engie-group/fluid-types@6.0.0
- @engie-group/fluid-design-tokens@6.0.0

## 📦 6.0.0-rc.0 - 2025-12-09

### ⚠️ Breaking changes

###### [GLOBAL]

- Migrate library from Angular 19 to Angular 20
- Project with version of Angular inferior to 20 are no longer supported.

###### [AUTOCOMPLETE]

- Renamed `isClearable` input to `clearable` for consistency across the design

###### [FORM-ITEM]

- Renamed `isClearable` input to `clearable` for consistency across the design

###### [LINK]

- Remove `hasIcon` input from Link component. It is now inferred from the presence of an icon or custom icon template
- Link component now requires `EngieTemplateDirective` to use custom icon templates

```angular2html
//Before
<a nj-link>
  Label
  <nj-icon custom-icon name="home"></nj-icon>
</a>

// After
<a nj-link>
  Label
  <nj-icon *njTemplate="'icon'" name="home"></nj-icon>
</a>
```

###### [SEGMENTED-CONTROL]

- `SegmentedControlComponent` does no longer implements `ControlValueAccessor`. Use the `value` input and `valueChange` output to manage the selected value.
- `SegmentedControlComponent` no longer has an `isDisabled` input. Use the native `disabled` attribute on `SegmentedControlButtonComponent` instead.
- `SegmentedControlComponent` `size` input have been renamed to `scale`.
- `SegmentedControlButtonComponent` leverage composition and should be attached to a button element.

```angular2html
// Before
<nj-segmented-control [(ngModel)]="selectedValue">
  <nj-segmented-control-button value="option1">Option 1</nj-segmented-control-button>
  <nj-segmented-control-button value="option2">Option 2</nj-segmented-control-button>
</nj-segmented-control>

// After
<nj-segmented-control [(value)]="selectedValue"">
  <button nj-segmented-control-button value="option1">Option 1</button>
  <button nj-segmented-control-button value="option2">Option 2</button>
</nj-segmented-control>
```

### 🚀 Added

###### [BADGE]

- Change badge icon color when it has `warning` variant and `minimal` emphasis to `--nj-semantic-color-icon-status-warning-contrast-default` design token for a better contrast.
- Change badge vertical spacing:
  - `6px` to `4px` for `md` scale
  - `9px` to `6px` for `lg` scale

###### [TOGGLE]

- Add `handleIcon` input to customize the toggle handle icon. You can now pass any valid icon name to be displayed as icon on the toggle handle.
- Update `lg` scale styles and add `xl` scale option for toggle component.

### 🐛 Fixed

###### [BADGE]

- Fix badge border-radius to ensure a correct pill shape regardless of the badge scale.

###### [BUTTON]

- Fixed webkit `ai` variant background color issue.

###### [FORM-ITEM]

- Form item trailing icon has now the correct color
- Form item now correctly displays clear icon on input value change
- Form item trailing icons are now vertically centered

###### [ICON]

- Icon component with inherit color variant now correctly inherits color from parent elements.

###### [LIST]

- If list item trailing and leading custom icons are Fluid icon components, they now apply the correct fluid styles, like input bind icons, by default.

###### [LINK]

- Icon is now correctly placed depending on `iconPosition` input

###### [PAGINATION]

- Fixed item font family to `Lato` font.

###### [TOAST]

- Fixed Icon alignment in Toast component. Ensured that the icon is properly centered vertically within the Toast with respect to the text content.

### 🛠️ Maintained

- Updated dependencies
  - @engie-group/fluid-design-system@6.0.0-rc.0
  - @engie-group/fluid-types@6.0.0-rc.0
  - @engie-group/fluid-design-tokens@6.0.0-rc.0

## 📦 3.0.0-next.14 - 2025-11-14

### ⚠️ Breaking changes

###### [DEPRECATED COMPONENTS REMOVAL]

- Remove deprecated `nj-button-deprecated` component
- Remove deprecated `nj-icon-engie` component
- Remove deprecated `nj-icon-button-deprecated` component
- Remove deprecated `nj-switch` component
- Since deprecated components have been removed, `@fluid-4-deprecated` package is no longer needed. You can remove it from your dependencies.

###### [AVATAR]

- Remove deprecated `size` property. Use `scale` property instead.
- Remove `nj-avatar` background for picture avatars.

###### [AVATAR-LIST]

- Remove deprecated `size` property. Use `scale` property instead.

###### [BADGE]

- The badge component no longer controls custom icon sizes. Custom icon sizes must now be defined directly in the custom icon definition itself.
  Use the `--nj-material-icon-size` CSS custom property to set the icon size.
  Example of setting a custom icon size using this CSS custom property:

  ```html
  <svg
    aria-hidden="true"
    focusable="false"
    width="20"
    height="20"
    viewBox="0 0 20 20"
    xmlns="http://www.w3.org/2000/svg"
    style={{
      width: 'var(--nj-material-icon-size)',
      height: 'var(--nj-material-icon-size)',
      stroke: 'var(--nj-material-icon-color)',
      fill: 'none'
    }}
  >
    <path d="M10.5 5.5V6.5H9.5V5.5H10.5ZM10.5 9.5V14.5H9.5V9.5H10.5ZM0.5 10C0.5 4.75614 4.75614 0.5 10 0.5C15.2439 0.5 19.5 4.75614 19.5 10C19.5 15.2439 15.2439 19.5 10 19.5C4.75614 19.5 0.5 15.2439 0.5 10ZM1.5 10C1.5 14.6861 5.31386 18.5 10 18.5C14.6861 18.5 18.5 14.6861 18.5 10C18.5 5.31386 14.6861 1.5 10 1.5C5.31386 1.5 1.5 5.31386 1.5 10Z" />
  </svg>
  ```

###### [BUTTON]

- Remove deprecated `size` property. Use `scale` property instead.
- Content projected icon is now prioritized over property bind icon

###### [TAG]

- Rename `size` property to `scale`

### 🐛 Fixed

###### [AVATAR]

- Avatar list scale is now correctly propagated to child avatars.

###### [FORM-ITEM]

- Fix `NJFormItem` components to correctly handle floating label behavior when the `id` prop is not set.

### 🚀 Added

###### [GLOBAL]

- Font used in components are now embedded directly in CSS file (Lato, Material Icons, Roboto Mono). They should no longer be imported externally.

###### [AVATAR-LIST]

- Avatar list's scale now propagates to the children avatars by CSS.
  If you set a scale to avatar list, all avatars will be scaled accordingly.
  You can still set a specific scale to an avatar to override the inherited one.

###### [SKELETON]

- Add skeleton circle scales `2xl` and `3xl`
- Update skeleton circle scale :
  - `sm`: 32px
  - `md`: 40px
  - `lg`: 48px
  - `xl`: 56px
  - `2xl`: 64px
  - `3xl`: 96px
- Default skeleton circle scale is now `lg`

###### [TAG]

- Add `xl` scale to tag component

### 🛠️ Maintained

- Updated dependencies
  - @engie-group/fluid-design-system@6.0.0-next.11
  - @engie-group/fluid-types@0.1.0-next.6

## 📦 3.0.0-next.13 - 2025-07-24

### 🐛 Fixed

###### [BADGE]

- Default `emphasis` for AI `variant` is now correctly applied.

###### [MENU-GROUP]

- Correct line-height of header element is now applied.

### 🛠️ Maintained

- Updated dependencies
  - @engie-group/fluid-types@0.1.0-next.5

## 📦 3.0.0-next.12 - 2025-07-12

### ⚠️ Breaking changes

###### [MENU]

- Menu group separators are now part of the menu group component. Manually set separators, if any,
  should be removed from the menu component.

### 🐛 Fixed

###### [LIST]

- Update list item content font size design token, from `--nj-semantic-font-size-text-sm` to `--nj-semantic-font-size-text-md`

### 🛠️ Maintained

- Updated dependencies
  - @engie-group/fluid-types@0.1.0-next.4
  - @engie-group/fluid-design-system@6.0.0-next.10

## 📦 3.0.0-next.11 - 2025-06-23

### ⚠️ Breaking changes

###### [LIST]

- `ListComponent` is now a directive -> `ListDirective`. Its selector has been changed from `ul[nj-list]` to `ul[njList]`.

###### [LIST-ITEM]

- Remove existing `ListItemTrailingDirective`. This feature is now part of `ListItemContentComponent`.
- Remove existing `ListItemWrapperDirective`. This feature is now part of `ListItemContentComponent`.

###### [LIST-NAVIGATION-ITEM]

- `ListItemNavigationComponent` is now a directive -> `ListNavigationItemDirective`. It must be applied on a HTML `<li>` tag like `ListItemDirective` with the selector `li[njListNavigationItem]`.

### 🚀 Added

###### [ENGIE TEMPLATE DIRECTIVE]

- Add a new selector: `leading` used in the `ListItemContentComponent`(`nj-list-item-content`) to add a trailing element

###### [LIST-ITEM]

- Add `ListItemContentComponent` for the content of a list item.

### 🛠️ Maintained

- Updated dependencies
  - @engie-group/fluid-types@0.1.0-next.3
  - @engie-group/fluid-design-system@6.0.0-next.9

## 📦 3.0.0-next.10 - 2025-04-16

### 🐛 Fixed

###### [AVATAR]

- Fix badge default variant, from `neutral` to `information`

###### [DISPLAY, HEADING, TEXT]

- Add missing neutrals variations `primary`, `secondary`, `tertiary`, `contrast`, `inverse`.

###### [INLINE-MESSAGE]

- Fix `information` variant not working properly
- Fix `actionPositon` input not working properly

### 🛠️ Maintained

- Updated dependencies
  - @engie-group/fluid-design-system@6.0.0-next.8
  - @engie-group/fluid-types@0.1.0-next.2

## 📦 3.0.0-next.9 - 2025-04-09

### ⚠️ Breaking changes

###### [HEADING]

- Reduce font size of scales `lg` and `xl`, to keep previous sizes, use instead respectively : heading `xl` and display `md`
- Remove `2xl` scale property value, use new display directive instead

```angular2html
<!-- Before -->
<h1 njHeading scale="2xl">Previous heading 2xl ➡️ doesn't exist anymore</h1>
<h1 njHeading scale="xl">Previous heading xl ➡️ font size reduced</h1>
<h1 njHeading scale="lg">Previous heading lg ➡️ font size reduced</h1>

<!--Now-->
<h1 njDisplay scale="xl">Previous heading 2xl ➡️ Now display xl</h1>
<h1 njDisplay scale="md">Previous heading xl ➡️ Now display md</h1>
<h1 njHeading scale="xl">Previous heading lg ➡️ Now heading xl</h1>
```

###### [ICON]

- `name` input of `nj-icon` and `nj-icon-engie` components is now required.

###### [SKELETON-CIRCLE]

- Rename `variant` input to `scale`.

###### [SKELETON-RECTANGLE]

- Rename `size` input to `scale`.

###### [SPINNER]

- Remove, no longer used, `isBlock` input
- Remove `isLoading` input, stop rendering the component if not loading

```angular2html
<!-- Before, no longer working -->
<nj-spinner [isLoading]="isLoading" />

<!--Now-->
<nj-spinner *ngIf="isLoading" />
```

### 🚀 Added

###### [DISPLAY]

- Implement `njDisplay` directive. See documentation for a better understanding of the component usage.

###### [HEADING]

- Add `ai` variant which colors the text with Engie's `ai` gradient

###### [SELECT]

- `nj-select` now supports the `null` value as a valid option. This is useful when you want to select an option that has no real value.

```angular2html
<nj-select>
  <ng-container njSelectOptions>
    <li nj-list-item-deprecated [value]="null">Select an option</li>
    <li nj-list-item-deprecated value="af">Afghanistan</li>
    <li nj-list-item-deprecated>Albania</li>
  </ng-container>
</nj-select>
```

###### [SPINNER]

- Add default value to the `ariaLabel` input for assistive technologies.

### 🐛 Fixed

###### [CHECKBOX]

- Fix checkbox scale `xl` displaying in `md`

###### [SKELETON-RECTANGLE]

- Fix missing styles used in skeleton rectangle component after token update

### 🛠️ Maintained

- Updated dependencies:
  - @engie-group/fluid-design-system@6.0.0-next.7
  - @engie-group/fluid-types@0.1.0-next.1

## 📦 3.0.0-next.8 - 2025-03-21

### ⚠️ Breaking changes

###### [GLOBAL]

- Migrate from Angular 16 to Angular 19.
- Project with version of Angular inferior to 19 are no longer supported.

###### [AUTOCOMPLETE]

- `search` output has been renamed to `inputValueChange` to be compliant with `@angular-eslint` parser `@angular-eslint/no-output-native` rule.

```angular2html
<!--From (not working anymore)-->
<nj-autocomplete (search)="handleFunction($event)">
  <span njFormLabel>label</span>
  <span njFormSubscript>subscript</span>
</nj-autocomplete>

<!--To-->
<nj-autocomplete (inputValueChange)="handleFunction($event)">
  <span njFormLabel>label</span>
  <span njFormSubscript>subscript</span>
</nj-autocomplete>
```

###### [ICON-BUTTON]

- The default size of the icon button has been changed from `xs` to `sm`.

### 🚀 Added

###### [ICON]

- Add new `scale` property to replace the `size` property. `size` property as been deprecated.

###### [ICON-BUTTON]

- Add new `scale` property to replace the `size` property. `size` property as been deprecated.

### 🐛 Fixed

###### [GLOBAL]

- Fix components not transpiling correctly

### 🛠️ Maintained

- Updated dependencies:
  - @engie-group/fluid-design-system@6.0.0-next.6
  - @engie-group/fluid-types@0.1.0-next.0

## 📦 3.0.0-next.7 - 2025-03-04

### 🛠️ Maintained

- Updated dependencies:
  - @engie-group/fluid-design-system@6.0.0-next.5

## 📦 3.0.0-next.6 - 2025-02-12

### ⚠️ Breaking changes

###### [AVATAR]

- `size` input is now deprecated, use the new `scale` property instead.
- Added new `scale` values:
  - `2xl` -> `64px`
  - `3xl` -> `96px`
- Updated `scale` values:
  - `md` = `48px` -> `40px`
  - `lg` = `64px` -> `48px`
  - `xl` = `96px` -> `56px`
- Restructuring the component `nj-avatar` with composition pattern.

```angular2html
<!--  OLD -->
<nj-avatar status="online" notification="3"></nj-avatar>

<!--  NEW -->
<nj-avatar label="some person">
  <nj-status-indicator status="online" />
  <nj-badge [value]="3"/>
</nj-avatar>
```

###### [BUTTON]

- The `label` is now shown on the button when loading.

###### [INLINE-MESSAGE]

- To align with design guidelines, the `hasStatus` input default value is now `true`

###### [LINK]

- `LinkComponent` selector has been updated to a directive component on a native link element (`nj-link` -> `a[nj-link]`). Update your `nj-link` tags as follows.

```angular2html
<!-- Before -->
<nj-link href="https://www.engie.com">ENGIE</nj-link>

<!-- After -->
<a nj-link href="https://www.engie.com">ENGIE</a>
```

###### [SIDEPANEL]

- Replace specific `Sidepanel` & `SidepanelHeader` components' structural directives with the global `EngieTemplateDirective`. Please update your code accordingly.
  - `SidepanelHeaderDirective`, `SidepanelFooterDirective`, `SidepanelHeaderActionDirective` are removed.

```angular2html
<!-- Before -->
<nj-sidepanel>
  <nj-sidepanel-header *njSidepanelHeader title="Title">
    <button *njSidepanelHeaderAction nj-icon-button icon="info"></button>
    <button *njSidepanelHeaderAction nj-icon-button icon="more_horiz"></button>
  </nj-sidepanel-header>

  Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  <ng-template njSidepanelFooter>Footer content</ng-template>
</nj-sidepanel>

<!-- After -->
<nj-sidepanel>
  <nj-sidepanel-header *njTemplate="'header'" title="Title">
    <button *njTemplate="'action'" nj-icon-button icon="info"></button>
    <button *njTemplate="'action'" nj-icon-button icon="more_horiz"></button>
  </nj-sidepanel-header>

  Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  <ng-template [njTemplate]="'footer'">Footer content</ng-template>
</nj-sidepanel>
```

###### [SIDEPANEL-HEADER]

- Remove `hasCloseIcon` input from `SidepanelHeaderComponent`. Close icon is displayed if `closeIconClicked` event emitter is observed.

###### [SIDEPANEL-LAYOUT]

- `SidepanelLayoutComponent`component has been deleted as it was not aligned with the library philosophy. Fluid doesn't aim to provide layout components.
  - Removed `SidepanelLayoutComponent`.
  - Removed `SidepanelLayoutPanelDirective`.

```angular2html
<!-- Before -->
<nj-sidepanel-layout>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <div *njSidepanelLayoutPanel></div>
</nj-sidepanel-layout>

<!-- After (example) -->
<div style="display: flex;">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <div *njTemplate="'sidecar'"></div>
</div>
```

### 🚀 Added

###### [GLOBAL]

- Added new responsive token for typescale: `--nj-semantic-font-size-text-xx`, `--nj-semantic-font-size-heading-xx`, `--nj-semantic-line-height-text-xx` & `--nj-semantic-line-height-heading-xx` tokens. They replace usage of specific desktop and mobile versions. They value change depending on the screen size.

###### [ENGIE-TEMPLATE-DIRECTIVE]

- Added a new global selectors: `footer`

###### [INLINE-MESSAGE]

- Added new optional `scale` input.

### 🛠️ Maintained

- Updated dependencies:
  - @engie-group/fluid-design-system@6.0.0-next.4

## 📦 3.0.0-next.5 - 2024-12-09

### ⚠️ Breaking changes

###### [SPINNER]

- Update `scale` value from `xxs` to `2xs`

```angular2html
<!-- Before -->
<nj-spinner [scale]="'xxs'"></nj-spinner>

<!-- Now -->
<nj-spinner [scale]="'2xs'"></nj-spinner>
```

### 🚀 Added

###### [BADGE]

- Add new `ai` value for the `variant` input.
- Deprecate `size` input, use `scale` input instead with same values.

###### [BUTTON]

- Add new `ai` value for the `variant` input.
- Deprecate `size` input, use `scale` input instead with converted values.

###### [ICON]

- Add new color values for the `variant` input: `ai`, `*-contrast`. See component doc for an exhaustive list.
- Update icon sizes for a better consistency with design.
- Add a new icon `engie_ai` in the icon library. This icon is Engie specific and is used to represent the Gen AI.

###### [SPINNER]

- Add new `ai` value for the `variant` input
- Deprecate `size` input, please use `scale` input instead with same values.

###### [STATUS-INDICATOR]

- Add new `ai` value for the `variant` input
- Deprecate `size` input, use `scale` input instead with same values.

###### [TOGGLE]

- Add new `ai` value for the `variant` input
- Deprecate `size` input, use `scale` input instead with same values.

### 🛠️ Maintained

- Updated dependencies
  - @engie-group/fluid-design-system@6.0.0-next.3

## 📦 3.0.0-next.4 - 2024-11-06

### ⚠️ Breaking changes

###### [INLINE-MESSAGE]

- Remove the ability to pass a title with `njInlineMessageTitle`, the inline-message doesn't have a title by design.
  You can use some strong text or change the design. Take a look at the new `njHeading` and `njText` components.

  ```angular2html
  <!--  OLD -->
  <nj-inline-message>
    <span njInlineMessageTitle>Title Message</span>
    <div>
      Message description
    </div>
  </nj-inline-message>

  <!--  NEW: remove title -->
  <nj-inline-message>
    Message description
  </nj-inline-message>
  ```

### 🚀 Added

###### [INLINE-MESSAGE]

- An action element can now be passed (for example, a link "Learn more" or "Undo action").
  - use the `EngieTemplateDirective` with the `action` selector
  - modify its position with `@Input actionsPosition` ('bottom' | 'right', defaults to bottom)

  ```angular2html
  <nj-inline-message actionsPlacement="right">
    Message description
    <nj-link *njTemplate="'action'" href="">Lean more</nj-link>
  </nj-inline-message>
  ```

### 🐛 Fixed

###### [INLINE-MESSAGE]

- When using the inline message with `[hasStatus]="true"`, the displayed status indicator size will now appear larger to match design updates.

###### [STATUS-INDICATOR]

- Update `nj-status-indicator` sizes to account for borders. Status indicators sizes are now 2px smaller:
  - `sm`: 14px -> 12px,
  - `md`: 18px -> 16px,
  - `lg`: 26px -> 24px

### 🛠️ Maintained

- Updated dependencies
  - @engie-group/fluid-design-system@6.0.0-next.2

## 📦 3.0.0-next.3 - 2024-10-07

### 🛠️ Maintained

- Update codebase with last current version
- Updated dependencies
  - @engie-group/fluid-design-system@6.0.0-next.1

## 📦 3.0.0-next.2 - 2024-10-04

### 🚀 Added

###### [HEADING]

- Added a new `Heading` directive to the design system
  `njHeading` are used for page titles or subheadings to introduce content.
  They are designed to contrast with body content, enhancing visual hierarchy and helping readers easily understand the content structure.

  ```jsx
  <h1 njHeading scale="2xl" variant="primary">
    Hello World
  </h1>
  ```

###### [TEXT]

- Added a new `Text` directive to the design system
  `njText` directive is used for the main content, typically following headings. It serves as detailed descriptions and messages but can also stand alone in components.
  It comes with different scales and variants to adapt to the context.

  ```jsx
  <p njText scale="md" variant="primary" isMono>
    Hello World
  </p>
  ```

### 🛠️ Maintained

- Updated dependencies
  - @engie-group/fluid-design-system@6.0.0-next.0

## 📦 3.0.0-next.1 - 2024-09-16

### 🛠️ Maintained

- Updated dependencies
  - @engie-group/fluid-design-system@5.15.4
  - @engie-group/fluid-design-tokens@5.8.1

## 📦 3.0.0-next.0 - 2024-07-16

### ⚠️ Breaking changes

###### [BUTTON]

- Previous `ButtonComponent`(`nj-button`) as been deprecated and renamed to `ButtonDeprecatedComponent`(`nj-button-deprecated`).
- Please switch to the new `ButtonComponent`(`button[nj-button]`) when possible, or rename your occurrences to the new name.

```angular2html
<!--From (not working anymore)-->
<nj-button>Lorem ipsum</nj-button>

<!--To-->
<nj-button-deprecated>Lorem ipsum</nj-button-deprecated>

<!--Or with new ButtonComponent-->
<button nj-button>Lorem ipsum</button>
```

###### [ICON-BUTTON]

- Previous `IconButtonComponent`(`nj-icon-button`) as been deprecated and renamed to `IconButtonDeprecatedComponent`(`nj-icon-button-deprecated`).
- Please switch to the new `IconButtonComponent`(`button[nj-icon-button]`) when possible, or rename your occurrences to the new name.

```angular2html
<!--From (not working anymore)-->
<nj-icon-button icon="info"></nj-icon-button>

<!--To-->
<nj-icon-button-deprecated icon="info"></nj-icon-button-deprecated>

<!--Or with new IconButtonComponent-->
<button nj-icon-button icon="info"></button>
```

###### [LIST-GROUP]

- Previous `ListGroupComponent`(`nj-list-group`) and `ListItemComponent`(`li[nj-list-item]`) as been deprecated and renamed to `ListDeprecatedComponent`(`nj-list-deprecated`) and `ListItemDeprecatedComponent`(`li[nj-list-item-deprecated]`).
- Please switch to the new `ListComponent`(`ul[nj-list]`) and its `ListItemDirective`(`[njListItem]`) when possible, or rename your occurrences with the new names.

```angular2html
<!--From (not working anymore)-->
<nj-list-group>
  <li nj-list-item>Lorem ipsum dolor.</li>
</nj-list-group>

<!--To-->
<nj-list-deprecated>
  <li nj-list-item-deprecated>Lorem ipsum dolor.</li>
</nj-list-deprecated>

<!--Or with new ListComponent-->
<ul nj-list>
  <li njListItem>Lorem ipsum dolor.</li>
</ul>
```

### 🚀 Added

###### [BUTTON]

- Create a new `ButtonComponent`(`button[nj-button]`) which should be directly attached to a native `button` HTML element.
- Create a new `ButtonIconDirective`(`[njButtonIcon]`) which add button's icon style to its parent.
- `ButtonComponent` can detect `EngieTemplateDirective`'s `icon` selector to add element as an icon

```angular2html
<!--Complete example of the refactored component and the new directive-->
<button nj-button>
  <svg *njTemplate="'icon'" njButtonIcon>...</svg>
  Refactored button
</button>
```

###### [ENGIE TEMPLATE DIRECTIVE]

- Add a new selector: `trailing` used in the `ListItemNavigationComponent`(`[nj-list-item-navigation]`) to add a trailing element

###### [ICON-BUTTON]

- Create a new `IconButtonComponent`(`button[nj-icon-button]`) which should be directly attached to a native `button` HTML element.
- Create a new `IconButtonIconDirective`(`[njIconButtonIcon]`) which add icon button's icon style to its parent.
- `IconButtonComponent` can detect `EngieTemplateDirective`'s `icon` selector to add element as an icon

```angular2html
<!--Complete example of the refactored component and the new directive-->
<button nj-icon-button>
  <svg *njTemplate="'icon'" njIconButtonIcon>...</svg>
</button>
```

###### [LIST]

- Create a new `ListComponent`(`ul[nj-list]`), based on the new list design, which should be directly attached to a native `ul` HTML element.
- Create a new `ListItemDirective`(`li[njListItem]`), which should be directly attached to a native `li` HTML element.
  It is used to add a specific layout and style to a list item.
- Create a new `ListItemWrapperDirective`(`[njListItemWrapper]`).
  It should be used when the list item should be wrapped by an element (link, button, ...)
- Create a new `ListItemNavigationComponent`(`[nj-list-item-navigation]`) which add a specific layout to a list item to add a leading icon, a content, a secondary text and/or a trailing element.
  It can be attached to a `ListItemDirective`(`li[njListItem]`) or a `ListItemWrapperDirective`(`[njListItemWrapper]`).
- Create a new `ListItemTrailingDirective`(`[njListItemTrailing]`), which can be attached to a `BadgeComponent`(`nj-badge`) or a `ToggleComponent`(`nj-toggle`).
  It is used, in combination of the new `EngieTemplateDirective`'s `trailing` selector, to add those components as a trailing element of a list item.

```angular2html
<!--Complete example of the new components and directives-->
<ul nj-list>
  <li njListItem>
    <button njListItemWrapper nj-list-item-navigation>
      With a badge
      <nj-badge *njTemplate="'trailing'" njListItemTrailing>5</nj-badge>
    </button>
  </li>
</ul>
```

###### [MENU]

- Create new `MenuComponent`(`nj-menu`) and `MenuGroupComponent`(`nj-menu-group`) to add a popover menu to your application.
  These components are used in combination of the Angular Material `CdkMenuModule` and the new `ListComponent`.

```angular2html
<!--Complete example of the new component -->
<button nj-button [cdkMenuTriggerFor]="menu">Trigger</button>

<ng-template #menu>
  <nj-menu cdkMenu>
    <nj-menu-group headerLabel="Lorem" cdkMenuGroup>
      <ul nj-list>
        <li njListItem>
          <button njListItemWrapper nj-list-item-navigation cdkMenuItem (cdkMenuItemTriggered)="action()">
            Lorem ipsum.
          </button>
        </li>
      </ul>
    </nj-menu-group>
  </nj-menu>
</ng-template>
```

## 📦 2.13.0 - 2025-11-13

### 🐛 Fixed

###### [AUTOCOMPLETE]

- Autocomplete search can now be used with special characters

###### [TAB]

- Fix `font-family` for `Tab` component to match the design specifications.

### 🛠️ Maintained

- Updated dependencies
  - @engie-group/fluid-design-tokens@5.13.0
  - @engie-group/fluid-design-system@5.18.2

## 📦 2.12.7 - 2025-07-11

### 🐛 Fixed

###### [PAGINATION]

- Current item is not interactive anymore. It was not intended to be interactive.

### 🛠️ Maintained

- Updated dependencies
  - @engie-group/fluid-design-system@5.18.1

## 📦 2.12.6 - 2025-06-23

### 🐛 Fixed

###### [ICON]

- Fix icon size `2xl` not working properly

### 🛠️ Maintained

- Updated dependencies
  - @engie-group/fluid-design-system@5.18.0

## 📦 2.12.5 - 2025-04-07

### 🐛 Fixed

###### [SKELETON]

- Fix styles used in skeleton component after token update

### 🛠️ Maintained

- Updated dependencies
  - @engie-group/fluid-design-system@5.17.2
  - @engie-group/fluid-design-tokens@5.12.0

## 📦 2.12.4 - 2025-02-12

### 🐛 Fixed

###### [SEGMENTED-CONTROL]

- Animation has been removed to be aligned with design directions

### 🛠️ Maintained

- Updated dependencies
  - @engie-group/fluid-design-tokens@5.11.0
  - @engie-group/fluid-design-system@5.17.1

## 📦 2.12.3 - 2024-12-06

### 🐛 Fixed

###### [SEARCH]

- Add background color to search input

###### [SELECT]

- Fix select options focus not working properly on webkit browsers (Safari).

### 🛠️ Maintained

- Remove engine property from package.json file which was causing install warning.
- Updated dependencies
  - @engie-group/fluid-design-tokens@5.10.0
  - @engie-group/fluid-design-system@5.17.0

## 📦 2.12.2 - 2024-10-07

### 🐛 Fixed

###### [ALERT & TAG]

- Update font size with the new font size tokens

### 🛠️ Maintained

- Updated dependencies
  - @engie-group/fluid-design-system@5.16.2

## 📦 2.12.1 - 2024-10-03

### 🚀 Added

###### [GLOBAL]

- Update font family to `Roboto Mono` for monospace. Please import this font in your project

  ```diff
  - href="https://fonts.googleapis.com/css?family=Material+Icons|Lato:300,400,700,900&display=swap"
  + href="https://fonts.googleapis.com/css?family=Material+Icons|Lato:300,400,700,900|Roboto+Mono:300,400,700,900&display=swap"
  ```

### 🛠️ Maintained

- Updated dependencies
  - @engie-group/fluid-design-tokens@5.9.0
  - @engie-group/fluid-design-system@5.16.1

## 📦 2.12.0 - 2024-10-02

### 🚀 Added

###### [BUTTON]

- Added a new status `isLoading` to display the button with a spinner.
  If the status is set to `isLoading`, the actions on the button will be disabled and the spinner will be displayed and will replace the button content.

  ```angular2html
  <nj-button isLoading="true" label="Label"></nj-button>
  ```

###### [PROGRESS]

- Replaced `hasDescription` input with `descriptionPosition` input in `nj-progress` component.
  Now you can choose between `none`, `bottom` and `right` for the position of the description

### 🛠️ Maintained

- Updated dependencies
  - @engie-group/fluid-design-tokens@5.8.2
  - @engie-group/fluid-design-system@5.16.0

## 📦 2.11.4 - 2024-09-13

### 🐛 Fixed

###### [FORM-CONTROL]

- Update styles of all form controls due to rendering issue.

###### [SPINNER]

- Update styles of the spinner component to fix a rendering bug.

### 🛠️ Maintained

- Updated dependencies
  - @engie-group/fluid-design-system@5.15.4
  - @engie-group/fluid-design-tokens@5.8.1

## 📦 2.11.3 - 2024-09-11

### 🛠️ Maintained

- Updated dependencies
  - @engie-group/fluid-design-system@5.15.3

## 📦 2.11.2 - 2024-09-08

### 🐛 Fixed

###### [AVATAR]

- Avatar default icon is now correctly rendered.

###### [STATUS-INDICATOR]

- Status indicator badge is now correctly rendered

### 🛠️ Maintained

- Updated dependencies
  - @engie-group/fluid-design-system@5.15.2
  - @engie-group/fluid-design-tokens@5.8.0

## 📦 2.11.1 - 2024-09-06

### 🛠️ Maintained

- Remove unpublished dependency
- Update URLs in README.md
- Updated dependencies
  - @engie-group/fluid-design-system@5.15.1

## 📦 2.11.0 - 2024-09-06

### ⚠️ Breaking changes

###### [GLOBAL]

- Build has been reworked to fix some major issues and facilitate future development.
  We strongly recommend consulting the Getting started documentation to update your project.
- The main changes are based on how you will have to import CSS in your project.
  If you encounter any issues, please come back to us.
  Components no longer import CSS automatically, you will have to import it manually in your project.

  ```json
  // In your angular.json file
  {
    "styles": [
      "@engie-group/fluid-design-tokens/lib/css/tokens.css",
      // Only if you use deprecated components
      "@engie-group/fluid-4-deprecated/tokens/lib/css/tokens.css",
      "@engie-group/fluid-design-system-angular/lib/styles/fluid-design-system.css"
    ]
  }
  ```

### 🐛 Fixed

###### [TAG]

- Fix the display of the focus ring when `TagComponent` is clickable

### 🛠️ Maintained

- Updated dependencies
  - @engie-group/fluid-design-system@5.15.0

## 📦 2.10.0 - 2024-08-23

### ⚠️ Breaking changes

###### [BREADCRUMB]

- Remove default margin (32px) and padding (4px). Your layout can be affected by this change, you can add them back if needed (values provided at the start).

### 🛠️ Maintained

- Updated dependencies
  - @engie-group/fluid-design-system@5.14.0

## 📦 2.9.1 - 2024-07-16

### 🐛 Fixed

###### [TOGGLE]

- Prevent icon only toggle's accessible label from being displayed.
- Remove unwanted margin when no label is provided

### 🛠️ Maintained

- Updated dependencies
  - @engie-group/fluid-design-system@5.13.0

## 📦 2.9.0 - 2024-07-09

### 🚀 Added

###### [CHECKBOX]

- Add new `@Input() indeterminate` prop to set the indeterminate state of the checkbox

### 🐛 Fixed

###### [FORM-ITEM]

- Ensure the `nj-form-item` with `textarea` uses the correct font (sans-serif)

### 🛠️ Maintained

- Updated dependencies
  - @engie-group/fluid-design-tokens@5.7.2
  - @engie-group/fluid-design-system@5.12.1

## 📦 2.8.0 - 2024-06-04

### ⚠️ Breaking changes

###### [ICON-BUTTON]

- We updated the `@Input() size` values and added some more:
  - NEW `2xs` (height of `16px`)
  - NEW `xs` (height of `24px`, it is the **new default**)
  - UPDATED `small` -> `sm` (height `32px`, used to be `16px`, please use the `2xs` instead)
  - NEW `md` (height `40px`, old default, used to be `24px`)
  - UPDATED `large` -> `lg` (height `48px`, used to be `32px`, please use the `sm` instead)
  - NEW `xl` (height of `56px`)

```angular2html
<!-- To apply those changes, search and replace the following components: -->

<nj-icon-button size="small"></nj-icon-button> -> <nj-icon-button size="2xs"></nj-icon-button>
<nj-icon-button size="large"></nj-icon-button> -> <nj-icon-button size="sm"></nj-icon-button>
```

### 🚀 Added

###### [ACCORDION]

- Add a new `AccordionComponent`.
  This component is used in combination of the new `AccordionItemComponent`, `AccordionActionsComponent` and `AccordionActionDirective`.
- Add new `EngieTemplateDirective`'s `icon` and `header` selectors, which are currently used to add a leading icon or pass a custom header to an `AccordionItemComponent`.

```angular2html
<!--Complete example of the new components and directives-->
<nj-accordion>
  <nj-accordion-actions>
    <nj-button emphasis="subtle" njAccordionAction="expand">Expand all</nj-button>
    <nj-button emphasis="subtle" njAccordionAction="collapse">Collapse all</nj-button>
  </nj-accordion-actions>
  <details nj-accordion-item label="Header 1">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, ex.
  </details>
  <details nj-accordion-item label="Header 2">
    <nj-icon *njTemplate="'icon'" name="info"></nj-icon>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid illo iste, sunt temporibus vero voluptas? Accusantium autem esse modi quia.
  </details>
  <details nj-accordion-item>
    <span *njTemplate="'header'">Header 3</span>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </details>
</nj-accordion>
```

###### [AUTOCOMPLETE]

- Add new `@Input() hasSuccess` to trigger success state when a `subscript` is provided

###### [CHECKBOX]

- Add new `@Input() subscriptMessage` to add some hint below the checkbox
- Add new `@Input() hasSuccess` to trigger success state when a `@Input() subscript` is provided

###### [FORM-ITEM]

- Add new `@Input() hasSuccess` to trigger success state when a `subscript` is provided

###### [MULTI-SELECT]

- Add new `@Input() hasSuccess` to trigger success state when a `subscript` is provided

###### [RADIO]

- Add two new `nj-radio` sizes:
  - `lg`: 24px
  - `xl`: 32px

###### [SELECT]

- Add new `@Input() hasSuccess` to trigger success state when a `subscript` is provided

###### [TEXTAREA]

- Add new `@Input() hasSuccess` to trigger success state when a `subscript` is provided

### 🖍 Changed

###### [CHECKBOX]

- Deprecated `@Input() errorMessage` in favor of `@Input() subscriptMessage` combined to `@Input() hasError`

###### [RADIO]

- Update `nj-radio` default size from 20px to 16px

### 🐛 Fixed

###### [RADIO]

- Update `nj-radio-group` error message not displaying correctly

###### [TAB]

- Fix a visual bug where the hover bar wasn't placed correctly

## 📦 2.7.0 - 2024-05-07

### 🚀 Added

###### [BADGE]

- Add a new `small` size variation with a height of `18px` (`@Input() size = 'sm'`)

### 🖍 Changed

###### [BADGE]

- Update the medium size (`@Input() size = 'md'`) to `24px`. Old was `20px`.

## 📦 2.6.2 - 2024-04-18

### 🖍 Changed

###### [GLOBAL]

- Update fluid dependencies

## 📦 2.6.1 - 2024-04-12

### 🐛 Fixed

###### [GLOBAL]

- Fix border colors on `nj-inline-message`s, `nj-badge`s and `nj-tag`s color variants

## 📦 2.6.0 - 2024-04-12

#### ⚠️ Breaking changes

###### [BUTTON]

- Add new `large` size. Previous `large` size is now `xlarge`. Please update your base code to reflect this change if needed.

```angular2html
<nj-button size="large"></nj-button> ==> <nj-button size="xlarge"></nj-button>
```

###### [CHECKBOX]

- To standardize our component sizes and for consistency with the design, we had to make modifications to the checkbox sizes:
  - ❌ REMOVED `sm`, use the normal size instead (OLD: 14px)
  - 🖍 UPDATED `md` to 16 px (OLD: 20px)
  - 🖍 UPDATED `lg` to 24px (OLD: 30px)
  - 🚀 ADDED new `xl` with a size of 32px
- We also removed the animation, and therefor removed the `isAnimated` @Input()

### 🚀 Added

###### [ENGIE TEMPLATE DIRECTIVE]

- Implement a new generic structural directive, which will be used to inject elements in our current components.
  The approach for this directive, is to have only one structural directive used in all our library for this purpose.
  We will deploy its usage step by step on existing components. You can already use it in our new `SearchComponent`.

###### [SEARCH]

- Implement new `nj-search` component
- Search component can be augmented with an action via a structural `EngieTemplateDirective` with `'action'` selector:
  - You can use a `ButtonComponent` with `SearchButtonDirective` as `action` element.

```angular2html
<nj-search>
  <nj-button *njTemplate="'action'" njSearchButton>Search</nj-button>
</nj-search>
<!--Or-->
<nj-search>
  <ng-template njTemplate="action">
    <nj-button njSearchButton>Search</nj-button>
  </ng-template>
</nj-search>
```

###### [TABS]

- Add the possibility to pass a `nj-badge` to the tab-item, via the `badgeOptions` @Input():
  - example: `<nj-tab [badgeOptions]="{ value: 50, emphasis: 'subtle', capedValue: 10 }">...</nj-tab>`

#### 🖍 Changes

###### [BUTTON]

- Add a `medium` size to replace `normal`, for better homogeneity between components. Usage of `normal` size is now deprecated.

## 📦 2.5.0 - 2024-03-20

#### ⚠️ Breaking changes

###### [GLOBAL]

- To accommodate the changes made to the border radius tokens, all components border radiuses have been set to the token `--nj-semantic-size-border-radius-none` (in order to not change their appearance).

## 📦 2.4.0 - 2024-03-05

### 🚀 Added

###### [CHECKBOX]

- Add new Input `size`: `sm` | `md` | `lg`

###### [FORM ITEM]

- Solve feature request [#989](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/989)
  Add new input `isIconClickable`, default to `true`, which define whether the icon (and custom icon) can be clicked.

### 🖍 Changed

###### [GLOBAL]

- Update dependencies to support Node >= 20

###### [CHECKBOX]

- Update the required state to properly show an asterisk when `@Input() isRequired` is set to `true`

##### ⚠️ Breaking changes

###### [CHECKBOX]

- Removed the `@Input() isInline`. You can inline elements with the `display: flexbox` CSS property on the parent.

## 📦 2.3.0 - 2024-01-31

### 🚀 Added

###### [GLOBAL]

- Add new `CustomIconDirective` to better inject icon in components:
  - Actually works with `BadgeComponent`

###### [BADGE]

- Add `iconName` input to add material icon in the badge.
- Link with `CustomIconDirective` to add custom icon in the badge:

  ```angular2html
  <nj-badge>
    <svg *njCustomIcon>...</svg>
    badge label
  </nj-badge>
  ```

###### [ICON]

- Add new icon size `xs`

### 🐛 Fixed

###### [GLOBAL]

- Fix issue [#955](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/955)
  Icons used in other components have the right colors.

###### [AUTOCOMPLETE]

- Fix issue [#900](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/900),
  Rework component to be more accessible, and shows keyboard on mobile.

###### [LINK]

- Fix issue [#926](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/926)
  Keyboard navigation and focus works as expected when using `RouterLink` on `nj-link` component.

## 📦 2.2.1 - 2024-01-04

### 🐛 Fixed

###### [MULTI-SELECT]

- Fix multi-select not working correctly with reactive forms after release 2.2.0

## 📦 2.2.0 - 2024-01-04

### 🚀 Added

###### [SIDEBAR]

- Add new `nj-sidebar` component

### 🐛 Fixed

###### [SELECT], [MULTI-SELECT]

- Fix select and multi select options not updating on provided options change issue [#937](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/937)

## 📦 2.1.0 - 2023-12-15

### 🚀 Added

###### [GLOBAL]

- Add new `planet` variant to type `TSemanticVariants`

###### [BADGE]

- Add new `planet` semantic color variant

###### [INLINE MESSAGE]

- Add new `planet` and `discovery` semantic colors variants

###### [SIDEPANEL]

- Add new `nj-sidepanel` component
- Add new `nj-sidepanel-header` component to display a title, a close button, and some action buttons in the sidepanel.
- Add new `nj-sidepanel-layout` component to attach a sidepanel aside of a content

###### [STATUS INDICATOR]

- Add new `planet` and `discovery` semantic colors variants

###### [ICON]

- Add `inherit` color variant to inherit color from context.
- Add `secondary` and `tertiary` color variant.

### 🖍 Changed

###### [BREADCRUMB]

- Change the number of displayed elements in minified mode (from 3 to 2 elements)

##### ⚠️ Breaking changes

###### [CUSTOM LABEL DIRECTIVE]

- Rename directive from `njCustomLabelDef` to `njCustomLabel`.

###### [ICON]

- Update icon default color. Icon no longer inherit color from context.
  If you want to keep the old behaviour, use the color variant `inherit`.

###### [INLINE MESSAGE]

- Rename `info` semantic color variant to `information` to homogenize with the new token names.

###### [STATUS INDICATOR]

- Rename `info` semantic color variant to `information` to homogenize with the new token names.
- Rename `in_progress` semantic color variant to `in-progress`
- Rename `do_not_disturb` semantic color variant to `do-not-disturb`

## 📦 2.0.3 - 2023-10-27

### 🖍 Changed

###### [GLOBAL]

- Update fluid dependencies

## 📦 2.0.2 - 2023-10-23

### 🖍 Changed

###### [GLOBAL]

- Update fluid dependencies

## 📦 2.0.1 - 2023-10-23

### 🐛 Fixed

###### [GLOBAL]

- Fix not being able to import components in an angular 16 project

## 📦 2.0.0 - 2023-10-20

### 🚀 Added

###### [GLOBAL]

- Add support for Angular v16+.

###### [CUSTOM LABEL DIRECTIVE]

- Create a structural directive `njCustomLabelDef` for templating the label of components.
  This directive is currently used by `SelectComponent`.

###### [SELECT]

- Implement feature [#865](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/865)
  Add the usage of `njCustomLabelDef`, a structural directive, as children to template the label of the selected item.
  This directive provides access to the value and index of the selected item in its context.
  e.g:

  ```html
  <ng-template njCustomLabelDef let-value let-index="index"> Value: {{value}} - Index: {{index}} </ng-template>
  ```

  or

  ```html
  <span *njCustomLabelDef="let value;let index=index"> Value: {{value}} - Index: {{index}} </span>
  ```

### ❌ Removed

##### ⚠️ Breaking changes

###### [GLOBAL]

- Remove support for Angular v14, v15. Fluid now supports only Angular v16+. This change may introduce some breaking changes in your project if you're on an older version of Angular (< 16).
  Please check breaking changes between your version of Angular and Angular 16.

###### [ICON]

- `isDisabled` input has been removed

###### [ICON ENGIE]

- `isDisabled` input has been removed

### 🖍 Changed

##### ⚠️ Breaking changes

###### [GLOBAL]

- Update tokens to their new nomenclature. It should not affect they way you use Fluid components.
- ⚠️ Breaking changes: If you are using Fluid tokens (for overrides on Fluid components or for custom components), please check out the `fluid-design-tokens`'s changelog. We provide a script to automatically update all tokens.

- Implement standalone component. You should now import directly the components used in your codebase.
  - In your Angular modules

    ```ts
    import { NgModule } from '@angular/core';
    import { ButtonComponent } from '@engie-group/fluid-design-system-angular';

    @NgModule({
      imports: [ButtonComponent]
    })
    export class AppModule {}
    ```

  - or directly in your components

    ```ts
    import { Component } from '@angular/core';
    import { ButtonComponent } from '@engie-group/fluid-design-system-angular';

    @Component({
      template: '<nj-button>Label</nj-button>',
      imports: [ButtonComponent]
    })
    export class CustomComponent {}
    ```

- Remove `FluidModule` in favour of standalone components. Replace all occurrences of the `FluidModule` by the components used in your codebase.
- Change import path, import must be from`@engie-group/fluid-design-system-angular` and no longer from `@engie-group/fluid-design-system-angular/lib`
  eg: before `import {FluidModule} from '@engie-group/fluid-design-system-angular/lib'` now `import {ButtonComponent} from '@engie-group/fluid-design-system-angular'`
- Remove obligation to allow JSON imports in your typescript config `tsconfig.json`. Previously you would do this:

  ```
  In your `tsconfig.json`, in the `compilerOptions` section, add the following:

  // tsconfig.json

  "resolveJsonModule": true,
  "esModuleInterop": true,

  Your tsconfig should look like something like this:
  // tsconfig.json

  {
    "compilerOptions": {
      ...
      "resolveJsonModule": true,
      "esModuleInterop": true,
    },
  }
  ```

If it was only used for `fluid`, you can now remove `"resolveJsonModule": true, "esModuleInterop": true` from your `tsconfig.json`

###### [ANIMATIONS]

- If you're now bootstrapping your application with `bootstrapApplication` function. Provide the animations capabilities with `provideAnimations` function instead of importing the `BrowserAnimationModule` in your main module.

  ```ts
  import { provideAnimations } from '@angular/platform-browser/animations';

  bootstrapApplication(AppComponent, {
    providers: [provideAnimations()]
  });
  ```

  > See [Angular documentation](https://angular.io/guide/animations#step-1-enabling-the-animations-module)

## 📦 1.4.0 - 2023-09-29

### 🐛 Fixed

###### [GLOBAL]

- Fix issue [#864](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/864)
  Buttons inside `nj-select`, `nj-multi-select` and `list-items` now correctly have the `type="button"` (default used to be `submit` and triggered ngSubmit event)

#### [SPINNER]

- Fix issue [#874](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/874)
  Spinner now correctly hidden when `isLoading` is `false`

## 📦 1.3.0 - 2023-07-06

### 🚀 Added

###### [CHECKBOX]

- Add `@Input() isPresentational` to `nj-checkbox`. When the checkbox is only presentational the state is handled by a
  parent, it can be useful for lists of checkboxes.
  When set to `true`, the checkbox won't have any interaction.

###### [SKELETON]

- Add new `nj-skeleton-container`, `nj-skeleton-rectangle`, `nj-skeleton-circle` and `nj-skeleton-area` components

###### [FORM ITEM]

- Add `@Input() size: 'small' | 'medium' | 'large' | 'xlarge'` for `nj-form-item`. This also adds the size for all the
  components depending on `nj-form-item`:
  `nj-select, nj-autocomplete`

###### [LIST GROUP]

- Add `isMultiSelect` to add accessibility props to the list if need

###### [LIST ITEM]

- Add `isCheckboxContent` property to wrap project content in a checkbox

###### [MULTI SELECT]

- Add multi-select component `nj-multi-select`, with multiple options

###### [TAG]

- Add size `xs` for tags and option `shouldAutoDestruct` set by default to true. When set to `false` click on close only
  emits event and doesn't destruct tag

### 🖍 Changed

###### [CHECKBOX]

- Checkbox host element `nj-checkbox` now has a `display: inline-flex`

### 🐛 Fixed

#### [AUTOCOMPLETE]

- Fix animation not working on opening closing

#### [SELECT]

- Fix issue [#825](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/825)
  on `nj-select`: value disappearing when opening select, value not displaying with reactive forms and first element
  being auto selected.
- Fix animation not working on opening closing

## 📦 1.2.0 - 2023-05-04

### 🚀 Added

###### [SLIDER]

- Add slider component

### 🐛 Fixed

#### [LIST ITEM]

- [A11Y] `nj-list-item` : fix markup when list item is a button or a link

###### [BADGE]

- ⚠️ Change default `nj-badge` color to `neutral` (grey)
- Add new @Input() `emphasis`:
  - Bold: default
  - Subtle: `nj-badge--subtle`
  - Minimal: `nj-badge--minimal`
- Add new @Input() `variants`:
  - Neutral: default
  - Information: `nj-badge--information`,
  - Danger: `nj-badge--danger`,
  - Warning: `nj-badge--warning`,
  - Success:`nj-badge--success`,
  - Discovery: `nj-badge--discovery`
- Add new @Input() `isUppercase`

###### [TAG]

- Add new `grey` color variant (used to be the default), which is semantically different from neutral (like blue and
  brand).
- Changed default to `neutral` color (still grey, no breaking change).

##### ⚠️ Breaking changes

###### [BADGE]

- `nj-badge` default color is now `neutral` (grey) instead of blue. You can use the @Input() `variant`: `information`
  instead.

###### [ICON]

- `nj-icon-engie` new colors (the gradient is replaced by ultramarine-900)
  - Add new values for the @Input() `variant`: `default` (ultramarine-900) | `brand` (brand-600) | `inverse` (grey-0)
  - Remove old @Input() `variant` values: `gradient` | `blue-corporate` (use 'brand') | `white` (use 'inverse')

###### [LIST]

- `nj-list-item`
  - Remove @Input() `isClickable`. Use @Input() `type` instead (with `"button"` to render a `<button>` or `"link"` to
    render a `<a>`)
  - Add @Input() `href` to use when `type="link"`

## 📦 1.1.1 - 2023-04-04

### 🖍 Changed

###### [GLOBAL]

- Update fluid dependencies

## 📦 1.1.0 - 2023-04-04

### 🚀 Added

###### [ICON BUTTON]

- Add variants tertiary and brand

### 🖍 Changed

##### ⚠️ Breaking changes

###### [ICON BUTTON]

- Change default value from (blue icon) to primary (black icon)
- Primary takes now the color of old secondary, and current variant secondary use `var(--nj-color-icon-secondary)`
- All components using icon buttons have been updated to use correct variant

## 📦 0.2.1 - 2023-03-09

### 🖍 Changed

- Update dependencies

## 📦 1.0.0 - 2023-03-02

### 🚀 Added

###### [GLOBAL]

- Add support for angular 14+

###### [AUTOCOMPLETE]

- Add component `nj-autocomplete`

###### [AVATAR]

- [A11Y] Add required `@Input() label` and optional `@Input() notificationUnitLabel` to `nj-avatar`
- Add `Input() tooltipOptions` to display tooltip for `nj-avatar`

###### [AVATAR LIST]

- Add component `nj-avatar-list`

###### [BADGE]

- [A11Y] Add `@Input() unitLabel` to `nj-badge`

###### [BUTTON]

- Add button size xsmall

###### [BREADCRUMB]

- [A11Y] Add `ariaLabel` prop to `nj-breadcrumb`
- [A11Y] Add `showMoreLabel` prop to `nj-breadcrumb`
- [A11Y] Add `label` prop to `nj-breadcrumb-item`

###### [CARD]

- Add `nj-card` component

###### [CHECKBOX]

- Add new `@Input() isAnimated` to `nj-checkbox` to toggle animation on and off
- [A11Y] Add `@Input() hasError` and `@Input() errorMessage` to `nj-checkbox`

###### [FORM ITEM]

- Add form-item component
- Add form-item input password type support
- Add form-item input select type support
- Add form-item input textarea type support

###### [HIGHLIGHT]

- Add directive `nj-highlight` that highlights occurrence of string in text

###### [ICON]

- Add size `inherit` for icon that inherit font-size from parent
- Add `@Input() isHighContrast`

###### [ICON BUTTON]

- Add new component `nj-icon-button`

###### [INLINE MESSAGE]

- Add component `nj-inline-message`

###### [LINK]

- Add `nj-link` variant `contextual`
- Add variant `inverse` and `high-contrast` to `nj-link`
- [A11Y] Add `@Input() externalLabel` to `nj-link`

###### [LIST ITEM]

- Add `list-item` and `list-group` component

###### [MODAL]

- Add `nj-modal` component, we rely on `@angular/cdk/dialog` for opening and closing
  dialogs <https://material.angular.io/cdk/dialog/overview>.

###### [PAGINATION]

- Add `nj-pagination` component

###### [RADIO GROUP]

- [A11Y] Add `legend`, `hasError` and `errorMessage` @Input() to `nj-radio-group`

###### [SELECT]

- Add custom `nj-select` component

###### [SEGMENTED CONTROL]

- Add components `nj-segmented-control` and `nj-segmented-control-button`

###### [SPINNER]

- Add new size `xxs` for `nj-spinner`
- [A11Y] Add optional `Input() isBlock` to `nj-spinner`

###### [STATUS INDICATOR]

- Add component `nj-status-indicator`

###### [TABS]

- Add `@Input() density` to `nj-tabs`

###### [TAG]

- Add component `nj-tag`

###### [TOGGLE]

- Add @Input() size : md | lg
- Add `@Input() isColorInherited` to `nj-toggle` to make toggle label color inherit from parent, fixes
  issue [#688](<https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/688>

###### [TOAST]

- Add `nj-toast` component and `ToastService`

###### [TOOLTIP]

- Add `nj-tooltip` component and `njTooltip` directive

### 🖍 Changed

###### [GLOBAL]

- Update all components with new brand guidelines and latest UI design
- Disabled elements now use opacity instead of specific disabled colors
- Make components accessible

###### [BADGE]

- [A11Y] Change `nj-badge` semantic from `div` to `p`

###### [ICON]

- [A11Y] Change `nj-icon-base`, `nj-icon` and `nj-icon-engie` root element from `<i>` to `<span>`

##### ⚠️ Breaking changes

###### [GLOBAL]

- Update dependencies to work with Node latest LTS v16.16 and npm 8.15
- Change importing `FluidModule` and packages files:
  - Before you would import `FluidModule` like
    this `import {FluidModule} from '@engie-group/fluid-design-system-angular'`.
    You now need to specify the `lib` folder in the import path like this:
    `import {FluidModule} from '@engie-group/fluid-design-system-angular/lib'``
- Add `@angular/cdk` as a required peerDependency
- When installing the package via npm or importing it via CDN we recommend fixing the version with the exact package
  version to avoid breaking change affecting your live website. With never-ending topics like Accessibility and BRAND
  GUIDELINES we also have to include some minor breaking changes in some minor versions

###### [BULLET]

- `nj-bullet` doesn't take same variants as before,

```
Before:

  white
  blue-corporate
  blue-allports
  blue-venice
  green-java
  green-pine
  green
  orange-crusta
  orange
  red-mandy
  red
  blue-bigstone
  blue-rhino
  green-fun
  green-riogrande
  yellow
  yellow-bright-sun
  purple
  violet
  violet-eggplant
  cerise

After :

  brand
  teal
  pink
  orange
  red
  green
  ultramarine
  yellow
  purple
  blue
  lime
```

###### [BUTTON]

- Change how `nj-button` works:
  - `btnType` is replaced by `emphasis` and its values are replaced by `'bold' | 'subtle' | 'minimal'`, `'bold'` being
    now default
  - `variant` values are replaced by `'primary' | 'secondary' | 'destructive' | 'inverse'` `'primary'` being the default
  - Rename `hasIcon` @Input to `hasCustomIcon`

###### [CHECKBOX]

- Rename `id` @Input to `inputId`

###### [ICON]

- Icon size m is now md
- Change color variant values: primary (grey-800), inverse (grey-0), brand (ex blue-corporate), grey, teal, pink,
  orange, red, green, ultramarine, yellow, purple

###### [ICON ENGIE]

- `nj-icon-engie` new colors (the gradient is replaced by ultramarine-900)
  - Add new values for the @Input() `variant`: `default` (ultramarine-900) | `brand` (brand-600) | `inverse` (grey-0)
  - Remove old @Input() `variant` values: `gradient` | `blue-corporate` (use 'brand') | `white` (use 'inverse')

###### [LINK]

- Rename `nj-link` size value `m` to `md`
- `nj-link` now inherits its parent font-size
- Prop `rel` is no longer used to pass url. Use the new `href` prop to pass the link href.
- Prop `rel` is now used to pass `rel` to the link.

###### [PROGRESS]

- [A11Y] `nj-progress`: add `label` required @Input()

###### [RADIO]

- [A11Y] ⚠️ Breaking change `nj-radio`: rename `id` prop to `inputId`

###### [SPINNER]

- `light` variant has been renamed `inverse` icon
- `gray` variant has been renamed `grey` icon
- [A11Y] `nj-spinner`: add `isLoading` @Input to conditionally display component

###### [TABS]

- [A11Y] `nj-tabs`: add required `label` @Input

###### [TOGGLE]

- Rename `id` @Input to `inputId`

### 🐛 Fixed

###### [GLOBAL]

- Fix warning that library uses deep imports and import tokens from js instead of json

###### [AVATAR]

- Fix undefined being set to ngClass in `nj-avatar`.
  Issue [#694](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/694)

###### [BUTTON]

- [A11Y] Fix `nj-button` accessibility issues
  - Accessibly hide icons to assistive technology
  - Remove unnecessary `tabindex` and `aria-label` attributes.

###### [BREADCRUMB]

- [A11Y] Fix `nj-breadcrumb` accessibility issues
  - Add `role="navigation"` to the root `nav` element
  - Add text alternative to the "show more" button
  - When user clicks the "show more" button, focus the first revealed item
  - Add text alternative to "icon only" breadcrumb items

###### [RADIO GROUP]

- [A11Y] Fix `nj-radio-group` accessibility issues
  - Update markup structure of `nj-radio-group` with `fieldset`, `legend` and `span` for error message if needed

###### [SPINNER]

- [A11Y] Fix `nj-spinner` accessibility issues
  - Add `aria-live` and `aria-atomic` to `nj-spinner` wrapper element and update semantic of inner element

###### [TOGGLE]

- [A11Y] Fix `nj-toggle` accessibility issues
  - Add `switch` role to `nj-toggle`

### 👎 Deprecated

- ⚠️Deprecation: `nj-switch` is deprecated. You should use `nj-segmentedControl` instead

### ❌ Removed

##### ⚠️ Breaking changes

###### [GLOBAL]

- Remove support for angular 11, 12, 13. Fluid now supports only Angular v14+

###### [AVATAR]

- Remove `notificationColor` @Input from `nj-avatar`

###### [BADGE]

- Remove `variants` @Input from `nj-badge`

###### [BUTTON]

- Remove `isInverse` @Input from `nj-button`. (Replaced by `variant="inverse"`)
- Remove `btnType` values `default' | 'outline' | 'ghost'`
- `@Input() btnType` has been renamed `emphasis`
- Remove `variant` values `'danger' | 'warning' | 'success'`
- Remove `isIconButton` @Input from `nj-button`. (Will be replaced by specific component `nj-icon-button`)
- Remove `iconPosition` @Input from `nj-button`. (Buttons should always have their icon on the left now)
- Remove `size="block"` @Input from `nj-button`

###### [ICON]

- `nj-icon-base`, `nj-icon` and `nj-icon-engie`:
  - Remove `@Input() title` and `@Input() isClickable`
  - Remove `@Output() iconClick` and `@Output() iconKeyPress`

###### [LINK]

- Remove variants:
  `primary`, `success`, `danger`, `warning`, `light`
- Remove `isUnderlined` @Input from `nj-link`. Links are all underlined except for link `variant="contextual"`

###### [PROGRESS]

- Remove @Input() `variant` (colors variations)

###### [TOGGLE]

- Remove @Input() variant theme
- Remove possibility to have one label before and one after the toggle. Toggles now only have one label which is placed
  after the toggle
- Icons of `nj-toggle` should have property/directive `njToggleIcon` Eg:

```
  <nj-toggle>
    <nj-icon name="settings" njToggleIcon></nj-icon>
  </nj-toggle>
```

## 📦 1.0.0 FOR THOSE MOVING FROM RC2 - 2023-03-02

### 🚀 Added

- Add component `nj-avatar-list`
- Add `Input() tooltipOptions` to display tooltip for `nj-avatar`
- [A11Y] Add `Input() closeLabel` to label close button for `nj-modal`
- [A11Y] Add optional `Input() isBlock` to `nj-spinner`
- [A11Y] `nj-form-item` Warning icon is now added on subscript labels for forms in error state

### 🖍 Changed

- Remove focus ring on all elements on click since accessibility guidelines requires it only on keyboard navigation
- Disabled elements now use opacity instead of specific disabled colors
- Apply new transparent tokens for components needing transparency
  E.g: icon-button, button etc..
- Always display all options when not filtering field in `nj-autocomplete-input`

##### ⚠️ Breaking changes

- When installing the package via npm or importing it via CDN we recommend fixing the version with the exact package
  version to avoid breaking change affecting your live website. With never-ending topics like Accessibility and BRAND
  GUIDELINES we also have to include some minor breaking changes in some minor versions
- `nj-icon-engie` new colors (the gradient is replaced by ultramarine-900)
  - Add new values for the @Input() `variant`: `default` (ultramarine-900) | `brand` (brand-600) | `inverse` (grey-0)
  - Remove old @Input() `variant` values: `gradient` | `blue-corporate` (use 'brand') | `white` (use 'inverse')
- `nj-bullet` doesn't take same variants as before,

```
Before:

  white
  blue-corporate
  blue-allports
  blue-venice
  green-java
  green-pine
  green
  orange-crusta
  orange
  red-mandy
  red
  blue-bigstone
  blue-rhino
  green-fun
  green-riogrande
  yellow
  yellow-bright-sun
  purple
  violet
  violet-eggplant
  cerise

After :

  brand
  teal
  pink
  orange
  red
  green
  ultramarine
  yellow
  purple
  blue
  lime
```

### 🐛 Fixed

- Fix issue, failed http calls to `screenreader.css`
  file [#730](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/730)
- Fix issue where checkbox without label doesn't have correct
  outline [#731](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/731)
- [A11Y] Use semantic `<p>` tags for hidden content in `nj-avatar`
- [A11Y] Make ellipsis icon accessible in `nj-pagination`
- [A11Y] Add space before external notice in `nj-link`
- Fix issue on cards
  cover [#735](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/735)
- [A11Y] Set `required` attribute on field when `@Input() isRequired` is true in `nj-form-item`
- [A11Y] Set correct `disabled` attribute value on button in `nj-tag`
- Display option's label instead of value inside input in `nj-custom-select`, fixes
  issue [#738](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/738)
- [A11Y] Improve accessibility of `nj-autocomplete`

## 📦 1.0.0-rc.2 - 2022-12-08

### 🚀 Added

- Add `nj-pagination` component
- Add `nj-tooltip` component and `njTooltip` directive
- Add `nj-toast` component and `ToastService`
- Add size `inherit` for icon that inherit font-size from parent
- Add `@Input() isColorInherited` to `nj-toggle` to make toggle label color inherit from parent, fixes
  issue [#688](<https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/688>
- Add `@Input() hasIcon`, `@Input() iconName` and `@Input() iconAriaLabel` to `nj-list-item`
- Add `isRequired` @Input on `nj-form-item`
- [A11Y] Add `ariaLabel` prop to `nj-breadcrumb`
- [A11Y] Add `showMoreLabel` prop to `nj-breadcrumb`
- [A11Y] Add `label` prop to `nj-breadcrumb-item`
- [A11Y] Add `@Input() hasError` and `@Input() errorMessage` to `nj-checkbox`
- [A11Y] Add `@Input() externalLabel` to `nj-link`
- [A11Y] Add `@Input() id` to `nj-modal`
- [A11Y] Add `passwordButtonLabelShow`, `passwordButtonLabelHide`, `passwordNoticeIsVisible`
  and `passwordNoticeIsHidden` @Input() to `nj-form-item`
- [A11Y] Add `ariaPressed` and `additionalClass` @Input() to `nj-icon-button`
- [A11Y] Add `legend`, `hasError` and `errorMessage` @Input() to `nj-radio-group`
- [A11Y] Add required `@Input() label` and optional `@Input() notificationUnitLabel` to `nj-avatar`
- [A11Y] Add `@Input() unitLabel` to `nj-badge`
- [A11Y] Add `fieldLabel`, `listNavigationLabel` and `buttonDefaultValueLabel` @Input to `nj-select`
- [A11Y] Add optional `ariaDescribedby` @Input to `nj-icon-button`
- [A11Y] Add optional `closeLabel` @Input to `nj-tag`
- [A11Y] Add optional `listId` @Input to `nj-list-group`

##### ⚠️ Breaking changes

- [A11Y] ⚠️ Breaking change `nj-progress`: add `label` required @Input()
- [A11Y] ⚠️ Breaking change `nj-tabs`: add required `label` @Input
- [A11Y] ⚠️ Breaking change Add required `listLabel` @Input to `nj-autocomplete`

### 🐛 Fixed

- Fix http error when using `nj-modal`.
  Issue [#665](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/665)
- Fix undefined being set to ngClass in `nj-avatar`.
  Issue [#694](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues/694)
- [A11Y] Fix `nj-button` accessibility issues
  - Accessibly hide icons to assistive technology
  - Remove unnecessary `tabindex` and `aria-label` attributes.
- [A11Y] Add `aria-invalid` and `aria-describedby` when needed on `nj-form-item` and `id` on error/hint messages.
- [A11Y] Change `nj-icon-base`, `nj-icon` and `nj-icon-engie` root element from `<i>` to `<span>`
- [A11Y] Render `nj-icon-button` label in a hidden span instead of using `aria-label` attribute
- [A11Y] Link modal with its title using `aria-labelledby`
- [A11Y] Fix `nj-status-indicator` semantic structure
- [A11Y] Fix `nj-breadcrumb` accessibility issues
  - Add `role="navigation"` to the root `nav` element
  - Add text alternative to the "show more" button
  - When user clicks the "show more" button, focus the first revealed item
  - Add text alternative to "icon only" breadcrumb items
- [A11Y] Fix `nj-select` keyboard navigation and accessibility issues
- [A11Y] Add `aria-live` and `aria-atomic` to `nj-spinner` wrapper element and update semantic of inner element
- [A11Y] Change DOM order and add description to close button in `nj-toast` and make `nj-toast-container` a live region
- [A11Y] Fix `nj-tag` semantic structure
- [A11Y] Describe `nj-tooltip` host element with `aria-describedby`
- [A11Y] Fix `nj-autocomplete` keyboard navigation and semantic structure.

### 🖍 Changed

- [A11Y] Change `nj-badge` semantic from `div` to `p`
- [A11Y] Add `switch` role to `nj-toggle`
- [A11Y] Use `nj-icon-button` to toggle password visibility in `nj-form-item` and add live region
- [A11Y] Update markup structure of `nj-radio-group` with `fieldset`, `legend` and `span` for error message if needed

##### ⚠️ Breaking changes

- ⚠️ Breaking change update `nj-icon`
  - Change color variant values: primary (grey-800), inverse (grey-0), brand (ex blue-corporate), grey, teal, pink,
    orange, red, green, ultramarine, yellow, purple
  - Add `@Input() isHighContrast`
- [A11Y] ⚠️ Breaking change `nj-spinner`: add `isLoading` @Input to conditionally display component
- [A11Y] ⚠️ Breaking change `nj-radio`: rename `id` prop to `inputId`
- [A11Y] ⚠️ Breaking change `nj-toggle`: rename `id` @Input to `inputId`
- [A11Y] ⚠️ Breaking change `NJIconButton`: Rename `ariaLabel` prop to `label`
- [A11Y] ⚠️ Breaking change `nj-checkbox`: Rename `id` @Input to `inputId`

### ❌ Removed

- ⚠️Breaking changes `nj-icon-base`, `nj-icon` and `nj-icon-engie`:
  - Remove `@Input() title` and `@Input() isClickable`
  - Remove `@Output() iconClick` and `@Output() iconKeyPress`
- Remove unnecessary attributes on `nj-radio`

## 📦 1.0.0-rc.1 - 2022-10-18

### 🚀 Added

- Add component `nj-tag`
- Add component `nj-status-indicator`
- Add variant `inverse` and `high-contrast` to `nj-link`
- Add component `nj-inline-message`
- Add components `nj-segmented-control` and `nj-segmented-control-button`
- Add `@Input() density` to `nj-tabs`

### 🖍 Changed

- Fix icon button not displaying correct size
- Update `nj-progress` color tokens, fix percentage calculation
- Update `nj-card` with new colors and ui
- Update `nj-tabs` with new colors and ui

### 👎 Deprecated

- ⚠️Deprecation: `nj-switch` is deprecated. You should use `nj-segmentedControl` instead

### ❌ Removed

- ⚠️Breaking changes `nj-progress`:
  - Remove @Input() `variant` (colors variations)

## 📦 1.0.0-beta.1 - 2022-09-30

### 🚀 Added

- Add `nj-link` variant `contextual`
- Add new component `nj-icon-button`
- add new `@Input() isAnimated` to `nj-checkbox` to toggle animation on and off
- Add new size `xxs` for `nj-spinner`

### 🖍 Changed

- ⚠️ Breaking changes `nj-button`:
  - `btnType` is replaced by `emphasis` and its values are replaced by `'bold' | 'subtle' | 'minimal'`, `'bold'` being
    now default
  - `variant` values are replaced by `'primary' | 'secondary' | 'destructive' | 'inverse'` `'primary'` being the default
  - Rename `hasIcon` @Input to `hasCustomIcon`
  - Update `nj-radio` with new color tokens
  - Update `nj-checkbox` with new color tokens and
- Update `nj-spinner`:
  - new color tokens
  - ⚠️Breaking change:
    - `light` variant has been renamed `inverse` icon
    - `gray` variant has been renamed `grey` icon
- ⚠️Breaking change `nj-list-group`, `nj-autocomplete`, `nj-select`: usage of `nj-list-item` changed.

### ❌ Removed

- ⚠️ Breaking changes `nj-button`:
  - Remove `isInverse` @Input from `nj-button`. (Replaced by `variant="inverse"`)
  - Remove `btnType` values `default' | 'outline' | 'ghost'`
  - `@Input() btnType` has been renamed `emphasis`
  - Remove `variant` values `'danger' | 'warning' | 'success'`
  - Remove `isIconButton` @Input from `nj-button`. (Will be replaced by specific component `nj-icon-button`)
  - Remove `iconPosition` @Input from `nj-button`. (Buttons should always have their icon on the left now)
  - Remove `size="block"` @Input from `nj-button`
- ⚠️ Breaking changes remove `isUnderlined` @Input from `nj-link`. Links are all underlined except for
  link `variant="contextual"`
- ⚠️ Breaking changes remove `variants` @Input from `nj-badge`
- ⚠️ Breaking changes remove `notificationColor` @Input from `nj-avatar`
- ⚠️ Breaking changes `nj-toggle`:
  - Remove possibility to have one label before and one after the toggle. Toggles now only have one label which is
    placed after the toggle
  - Icons of `nj-toggle` should have property/directive `njToggleIcon` Eg:

  ```
    <nj-toggle>
      <nj-icon name="settings" njToggleIcon></nj-icon>
    </nj-toggle>
  ```

## 📦 1.0.0-beta.0 - 2022-09-13

### 🚀 Added

- Add support for angular 14+
- Add `nj-modal` component, we rely on `@angular/cdk/dialog` for opening and closing
  dialogs <https://material.angular.io/cdk/dialog/overview>.
- Add `@angular/cdk` as a required peerDependency
- Add `nj-card` component

### 🖍 Changed

- ⚠️ Breaking change Link
  - Prop `rel` is no longer used to pass url. Use the new `href` prop to pass the link href.
  - Prop `rel` is now used to pass `rel` to the link.
- Replace all colors to use new primary
- Replace $spacer sass variable with css variables
- ⚠️ Breaking change importing `FluidModule` and packages files:
  - Before you would import `FluidModule` like
    this `import {FluidModule} from '@engie-group/fluid-design-system-angular'`.
    You now need to specify the `lib` folder in the import path like this:
    `import {FluidModule} from '@engie-group/fluid-design-system-angular/lib'`

### ❌ Removed

- ⚠️ Breaking changes remove variants from `nj-link`
  - Remove variants:
    `primary`, `success`, `danger`, `warning`, `light`
- ⚠️ Breaking changes Angular versions
  - Remove support for angular 11, 12, 13. Fluid now supports only Angular v14+

## 📦 1.0.0-alpha.6 - 2022-08-03

### 🐛 Fixed

- Fix version `1.0.0-alpha.5` missing `lib` folder

## 📦 1.0.0-alpha.5 - 2022-00-03

### 🚀 Added

- Add component `nj-autocomplete`
- Add directive `nj-highlight`

### 🐛 Fixed

- Fix `inputId` not being set in `nj-select` component
- Fix `nj-select` not working properly with content set after init
- Fix `nj-select` not closing panel when clicking exactly on `nj-list-item` label

### 🖍 Changed

- Update dependencies to work with Node latest LTS v16.16 and npm 8.15

## 📦 1.0.0-alpha.4 - 2022-07-19

### 🖍 Changed

- Rename `Link` size value `m` to `md`
- `Link` now inherits its parent font-size

## 📦 1.0.0-alpha.3 - 2022-05-17

### 🚀 Added

- Add list-item and list-group component
- Add native select support for form-item
- Add custom select component
- Update Toggle component
  - Add @Input() size : md | lg

### 🐛 Fixed

- Fix warning that library uses deep imports and import tokens from js instead of json

### ❌ Removed

- Update Toggle component
  - Remove @Input() variant theme

## 📦 0.7.1 - 2022-07-06

### 🚀 Added

- Update fluid dependency

## 📦 0.7.0 - 2022-05-16

### 🐛 Fixed

- Fix radio not working properly with custom content
- Fix radio focus not showing

### ❌ Removed

- Remove prop isInline from `radio` component, it is now handled by `radio-group`

## 📦 1.0.0-alpha.2 - 2022-04-26

### 🚀 Added

- Add @Input() inputId to form-item

### 🐛 Fixed

- Fix outline button not working

## 📦 1.0.0-alpha.1 - 2022-04-15

### 🚀 Added

- Add form-item
- Add form-item password
- Add form-item textarea

### 🐛 Fixed

- Fix button icon not being spaced correctly

## 📦 0.6.3 - 2022-04-15

### 🐛 Fixed

- Breadcrumb: Fix breadcrumb not rendering in some cases

## 📦 0.6.2 - 2022-02-25

### 🖍 Changed

- Update dependencies

## 📦 0.6.1 - 2022-02-16

### 🖍 Changed

- Update dependencies

## 📦 1.0.0-alpha.0 - 2022-02-04

### 🚀 Added

- Update buttons
  ⚠️ Breaking changes
  - Add button size xsmall
  - Tertiary buttons have been renamed Ghost buttons
  - `isTertiary` and `isOutlined` have been replaced by property `btnType` which can take `ghost` and `outlined`
  - Replace `light` variant by `isInverse` property for all buttons
  - Variants are now `danger`, `warning`, `success`. `light` and `primary` are deprecated, `primary` being now default
  - Variants are not applicable for ghost buttons

### 🚀 Changed

- Icon size m is now md

## 📦 0.6.0 - 2022-02-03

### 🚀 Added

- Add Avatar component
- Add Breadcrumb-item and Breadcrumb component

## 📦 0.5.0 - 2021-12-16

### 🚀 Added

- Add Bullet component

### 🚀 Changed

- Upgrade to Angular 11 (**Breaking change** Lib now only works with angular 11 + projects)
- Update link component and add new options
- Badge update (new size prop)

## 📦 0.4.0 - 2021-10-28

### 🚀 Added

- Add tab and tabs component
- Add badge component
- Fix checkbox not correctly working with custom content
- Fix lib not working in applications using Lazy Loading (potential **Breaking change**, BrowseAnimationModule should be
  imported in AppModule). Refer to Readme for more details.

## 📦 0.3.0 - 2021-10-05

### 🚀 Added

- Make lib work with angular 12 and update readme (potential **Breaking change**, tsconfig should be updated and some
  import may need to be updated). Refer to Readme for more details.
- Fix packages version
- Fix switch dark theme
- Fix progress dark theme
- Fix spinner dark theme

## 📦 0.2.1 - 2021-09-01

### 🚀 Added

- Add Switch component

## 📦 0.2.0 - 2021-07-12

### 🚀 Added

- Add Radio and Radio group component
- Add Link component
- Add icon support for buttons
- Add tertiary button

## 📦 0.1.0 - 2021-06-03

### 🚀 Added

- Add Checkbox component
- Add Spinner component
- Add material UI icon
- Add engie icon
- Add Progress

### 🐛 Fixed

- Toggle: Remove additional padding when left or right label are not set
- Toggle: Improve label alignment

## 📦 0.1.0-alpha.6 - 2021-05-04

### 🚀 Added

- Add Toggle component

## 📦 0.1.0-alpha.5 - 2021-04-08

### 🖍 Changed

- Updated Fluid package dependency

## 📦 0.1.0-alpha.4 - 2021-04-02

### 🖍 Changed

- Update fluid-design-system package

## 📦 0.1.0-alpha.3 - 2021-03-22

### 🖍 Changed

- Update fluid-design-system package

## 📦 0.1.0-alpha.2

### 🚀 Added

- Initialize Angular Lib
- Button component
