### Update Get Started Component HTML

Source: https://angular-desyre.gke2.ope.gcp.renault.com/templates/angular-18-demo

This HTML content defines the structure and content for the 'get-started' page, including headings, paragraphs, and specific styling classes.

```html
<div class="p-dsr-spacing-48">

  <div class="flex flex-wrap justify-between">
    <div class="max-w-[90rem]">
      <h1 class="dsr-typescale-display-large !mb-dsr-spacing-32">Renault Group</h1>

      <p class="dsr-typescale-headline-medium text-dsr-color-primary !mb-dsr-spacing-12">Renault Group Design System</p>

      <p class="dsr-typescale-headline-large !mb-dsr-spacing-16">Headless . Agnostic . Multi-Brand</p>

      <p class="dsr-typescale-body-large !mb-dsr-spacing-16">
        The system consists of working code, <span class="font-bold text-dsr-color-tertiary">design tools</span> and resources,
        interface <span class="font-bold text-dsr-color-tertiary">guidelines</span> and a <span class="font-bold text-dsr-color-tertiary">community</span> of contributors.

```

--------------------------------

### Install Tailwind CSS and presets

Source: https://angular-desyre.gke2.ope.gcp.renault.com/templates/angular-18-demo

Install Tailwind CSS, PostCSS, Autoprefixer, and the Desyre preset.

```bash
  npm install tailwindcss postcss autoprefixer @desyre/tailwind-rg-preset
```

--------------------------------

### Install Desyre icons

Source: https://angular-desyre.gke2.ope.gcp.renault.com/templates/angular-18-demo

Install the icon package for Desyre.

```bash
  npm install @desyre/icons-angular
```

--------------------------------

### Install Angular Material

Source: https://angular-desyre.gke2.ope.gcp.renault.com/getting-started/prompts

Install Angular Material as a prerequisite for using MAT icons.

```bash
ng add @angular/material
# OR
npm i @angular/material
```

--------------------------------

### Paginator Installation

Source: https://angular-desyre.gke2.ope.gcp.renault.com/components-core/paginator

Steps to install and configure the Desyre Paginator component, including importing the necessary module.

```APIDOC
## Installation

To use the Material Desyre Paginator component, please follow these steps :

1. Make sure that you have Angular Material installed and that you have configured the Desyre theme for you brand. If not, follow the _installation guide_.
2. Import _MatPaginatorModule_ in your component :

```typescript
import { MatPaginatorModule } from '@angular/material/paginator';
```
```

--------------------------------

### Install Desyre dependencies

Source: https://angular-desyre.gke2.ope.gcp.renault.com/getting-started/installation

Install the required core, fonts, icons, and material packages from the Artifactory registry.

```bash
npm install @desyre/fonts @desyre/icons-angular @desyre/core @desyre/angular-material
```

--------------------------------

### Verify Node, NPM, and Angular Installations

Source: https://angular-desyre.gke2.ope.gcp.renault.com/templates/angular-18-demo

Check the installed versions of Node.js, npm, and the Angular CLI to ensure your environment is correctly set up.

```bash
node -v
npm -v
ng version
```

--------------------------------

### Install Desyre Icons Package

Source: https://angular-desyre.gke2.ope.gcp.renault.com/getting-started/prompts

Install the required package via npm.

```bash
npm install @desyre/icons-angular
```

--------------------------------

### Example JSON File Structure

Source: https://angular-desyre.gke2.ope.gcp.renault.com/components-custom/code-navigator

An example of a JSON file structure representing a file tree for the DsrCodeNavigator.

```APIDOC
### Example JSON File Structure

```json
[
  {
    "name": "src",
    "type": "folder",
    "children": [
      {
        "name": "app",
        "type": "folder",
        "children": [
          {
            "name": "components",
            "type": "folder",
            "children": [
              {
                "name": "code-navigator",
                "type": "folder",
                "children": [
                  {
                    "name": "code-navigator.component.html",
                    "type": "file",
                    "markdownPath": "assets/docs/components/custom/code-navigator/code-navigator-html.md"
                  },
                  {
                    "name": "code-navigator.component.ts",
                    "type": "file",
                    "markdownPath": "assets/docs/components/custom/code-navigator/code-navigator-ts.md"
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
]
```
```

--------------------------------

### Basic DsrPagination Implementation

Source: https://angular-desyre.gke2.ope.gcp.renault.com/components-custom/pagination

Initial setup for the component using two-way data binding.

```html
<dsr-pagination
  [(length)]="length"
  [(pageSize)]="pageSize"
  [(pageIndex)]="index"
/>
```

--------------------------------

### Standalone Application Setup

Source: https://angular-desyre.gke2.ope.gcp.renault.com/components-custom/mode-switcher

Import the component into a standalone Angular component.

```typescript

  import { Component } from '@angular/core';
  import { DsrModeSwitcherComponent } from '@desyre/angular-material';

  @Component({
    selector: 'dsr-mode-switcher-overview-example',
    imports: [DsrModeSwitcherComponent]
  })
  export class DsrModeSwitcherOverviewExample {}
  
```

--------------------------------

### Module-based Application Setup

Source: https://angular-desyre.gke2.ope.gcp.renault.com/components-custom/mode-switcher

Import the component into an existing Angular module.

```typescript

  import { NgModule } from '@angular/core';
  import { AppComponent } from './app.component';
  import { DsrModeSwitcherComponent } from '@desyre/angular-material';

  @NgModule({
    declarations: [AppComponent],
    imports: [DsrModeSwitcherComponent],
    providers: []
  })
  export class AppModule {}
  
```

--------------------------------

### Install Desyre packages

Source: https://angular-desyre.gke2.ope.gcp.renault.com/templates/angular-18-demo

Install the core Desyre libraries required for the Angular project.

```bash
  npm install @desyre/fonts @desyre/core @desyre/angular-material
```

--------------------------------

### Accessible Chip Example

Source: https://angular-desyre.gke2.ope.gcp.renault.com/components-core/chips

This example demonstrates accessibility best practices for chips, including wrapping in `mat-chip-set` with an `aria-label`, using `aria-hidden` for decorative icons, and providing `aria-label` for remove buttons.

```html
<mat-chip-set aria-label="Project tags">
  <mat-chip>
    <dsr-icon-wrapper name="tag" aria-hidden="true" />
    Frontend
  </mat-chip>
  <mat-chip>
    Backend
    <button mat-chip-remove aria-label="Remove">
      <dsr-icon-wrapper name="cancel" aria-hidden="true" />
    </button>
  </mat-chip>
</mat-chip-set>
```

--------------------------------

### Search Component Usage Variants

Source: https://angular-desyre.gke2.ope.gcp.renault.com/components-core/search

Examples demonstrating basic search, start/end icons, multiple end icons, and the disabled state.

```html
<form>

  <!-- Basic Search Bar -->
  <mat-form-field class="w-full max-w-[328px]">
    <input matInput type="search" placeholder="Search" aria-label="Search field" [formControl]="myControl" />

    @if (myControl.value !== '') {
      <button matSuffix type="button" matIconButton aria-label="Clear" (click)="myControl.setValue('')">
        <dsr-icon name="cancel" aria-hidden="true" />
      </button>
    }
  </mat-form-field>

  <!-- With Start and End Icons -->
  <mat-form-field class="w-full max-w-[328px]">
    <input matInput type="search" placeholder="Search" aria-label="Search field" [formControl]="myControl" />

    @if (myControl.value !== '') {
      <button matSuffix type="button" matIconButton aria-label="Clear" (click)="myControl.setValue('')">
        <dsr-icon name="cancel" aria-hidden="true" />
      </button>
    } @else {
      <dsr-icon matSuffix name="search" aria-hidden="true" />
    }
  </mat-form-field>

  <!-- With Multiple End Icons -->
  <mat-form-field class="w-full max-w-[328px]">
    <input matInput type="search" placeholder="Search" aria-label="Search field" [formControl]="myControl" />

    @if (myControl.value !== '') {
      <button matSuffix type="button" matIconButton aria-label="Clear" (click)="myControl.setValue('')">
        <dsr-icon name="cancel" aria-hidden="true" />
      </button>
    } @else {
      <span class="gap-dsr-spacing-small flex" matSuffix>
        <dsr-icon name="search" aria-hidden="true" />
        <dsr-icon name="map" aria-hidden="true" />
      </span>
    }

    <dsr-icon matPrefix name="menu" aria-hidden="true" />
  </mat-form-field>

  <!-- Disabled State -->
  <mat-form-field class="w-full max-w-[328px]">
    <input matInput type="search" placeholder="Search" aria-label="Search field" [formControl]="myControl" disabled/>

    <span class="gap-dsr-spacing-small flex" matSuffix>
      <dsr-icon name="search" aria-hidden="true" />
      <dsr-icon name="map" aria-hidden="true" />
    </span>

    <dsr-icon matPrefix name="menu" aria-hidden="true" />
  </mat-form-field>
</form>
```

--------------------------------

### Implement Determinate Progress

Source: https://angular-desyre.gke2.ope.gcp.renault.com/components-core/linear-progress

Examples of progress bars set to specific percentage values.

```html
<mat-progress-bar mode="determinate" value="0"></mat-progress-bar>
<mat-progress-bar mode="determinate" value="10"></mat-progress-bar>
<mat-progress-bar mode="determinate" value="30"></mat-progress-bar>
<mat-progress-bar mode="determinate" value="50"></mat-progress-bar>
<mat-progress-bar mode="determinate" value="80"></mat-progress-bar>
<mat-progress-bar mode="determinate" value="100"></mat-progress-bar>
```

--------------------------------

### Install with Legacy Peer Dependencies

Source: https://angular-desyre.gke2.ope.gcp.renault.com/getting-started/prompts

If you encounter peer dependency issues during installation, set `legacy-peer-deps=true` in your npm project configuration.

```bash
npm config --location=project set legacy-peer-deps=true
```

--------------------------------

### Install Angular Material

Source: https://angular-desyre.gke2.ope.gcp.renault.com/getting-started/prerequisites

Command to add the Angular Material library to an existing Angular project.

```bash
ng add @angular/material
```

--------------------------------

### Example File Tree JSON Structure

Source: https://angular-desyre.gke2.ope.gcp.renault.com/components-custom/code-navigator

An example JSON structure representing a file tree for the DsrCodeNavigator. This structure is used to define the navigation and content displayed.

```json
[
  {
    "name": "src",
    "type": "folder",
    "children": [
      {
        "name": "app",
        "type": "folder",
        "children": [
          {
            "name": "components",
            "type": "folder",
            "children": [
              {
                "name": "code-navigator",
                "type": "folder",
                "children": [
                  {
                    "name": "code-navigator.component.html",
                    "type": "file",
                    "markdownPath": "assets/docs/components/custom/code-navigator/code-navigator-html.md"
                  },
                  {
                    "name": "code-navigator.component.ts",
                    "type": "file",
                    "markdownPath": "assets/docs/components/custom/code-navigator/code-navigator-ts.md"
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
]

```

--------------------------------

### Media Card Example

Source: https://angular-desyre.gke2.ope.gcp.renault.com/components-core/cards

A media card example featuring an image, title, subtitle, content, and action buttons. This card is styled with an outlined appearance and includes a header with a custom avatar image.

```html
<mat-card class="example-card" appearance="outlined">
  <mat-card-header>
    <div mat-card-avatar class="example-header-image"></div>
    <mat-card-title>Shiba Inu</mat-card-title>
    <mat-card-subtitle>Dog Breed</mat-card-subtitle>
  </mat-card-header>
  <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu" />
  <mat-card-content>
    <p>The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan. A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally bred for hunting.</p>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button>LIKE</button>
    <button mat-button>SHARE</button>
  </mat-card-actions>
</mat-card>
```

--------------------------------

### Install Angular CLI Globally

Source: https://angular-desyre.gke2.ope.gcp.renault.com/templates/angular-18-demo

Install the Angular Command Line Interface globally to manage Angular projects. This is a prerequisite for creating and serving Angular applications.

```bash
npm install -g @angular/cli
```

--------------------------------

### Basic Tooltip Usage

Source: https://angular-desyre.gke2.ope.gcp.renault.com/getting-started/instructions

Examples of tooltips applied to buttons with various positioning options.

```html
<button mat-button matTooltip="This is a tooltip">
  Hover me
</button>

<!-- Different positions -->
<button mat-button matTooltip="Above" matTooltipPosition="above">Above</button>
<button mat-button matTooltip="Below" matTooltipPosition="below">Below</button>
<button mat-button matTooltip="Left" matTooltipPosition="left">Left</button>
<button mat-button matTooltip="Right" matTooltipPosition="right">Right</button>
```

--------------------------------

### Configure Paginator with Data Source

Source: https://angular-desyre.gke2.ope.gcp.renault.com/getting-started/instructions

Setup for using a paginator with a MatTableDataSource.

```typescript
import { MatTableDataSource } from '@angular/material/table';

dataSource = new MatTableDataSource(data);
```

```html
<mat-paginator [pageSizeOptions]="[5, 10, 20]"></mat-paginator>
```

--------------------------------

### Basic Text Field Usage

Source: https://angular-desyre.gke2.ope.gcp.renault.com/getting-started/instructions

Examples of standard inputs, inputs with hints, and textarea components.

```html
<mat-form-field>
  <mat-label>Label</mat-label>
  <input matInput placeholder="Placeholder">
</mat-form-field>

<!-- With hint -->
<mat-form-field>
  <mat-label>Email</mat-label>
  <input matInput type="email">
  <mat-hint>Enter your email</mat-hint>
</mat-form-field>

<!-- Textarea -->
<mat-form-field>
  <mat-label>Description</mat-label>
  <textarea matInput rows="5"></textarea>
</mat-form-field>
```

--------------------------------

### Implement Circular Progress

Source: https://angular-desyre.gke2.ope.gcp.renault.com/getting-started/instructions

Examples of indeterminate, determinate, and colored progress spinners.

```html
<!-- Indeterminate -->
<mat-spinner></mat-spinner>

<!-- Determinate -->
<mat-spinner [value]="60"></mat-spinner>

<!-- Different colors -->
<mat-spinner color="accent"></mat-spinner>
```

--------------------------------

### Setup Artifactory Local Script

Source: https://angular-desyre.gke2.ope.gcp.renault.com/templates/angular-18-demo

Execute the provided script to set up Artifactory locally, which generates an .npmrc file. Ensure this file is not committed to version control.

```bash
./scripts/setupArtifactoryLocal.sh
```

--------------------------------

### Configuring Badge Variants and Visibility

Source: https://angular-desyre.gke2.ope.gcp.renault.com/components-core/badges

Examples of badges on buttons, including position control and dynamic visibility toggling.

```html
<div>
  Button with a badge on the left
  <button matButton="elevated" matBadge="8" matBadgeSize="large" matBadgePosition="before">
    Action
  </button>
</div>

<div>
  Button toggles badge visibility
  <button matButton="elevated" matBadge="7" matBadgeSize="large" [matBadgeHidden]="hidden" (click)="toggleBadgeVisibility()">
    Hide
  </button>
</div>

<div>
  <span>Icon with a small badge</span>
  <dsr-icon name="user" matBadge="15" matBadgeSize="small" />
  <span class="cdk-visually-hidden">
    Example with a user icon with overlaid badge showing the number 15
  </span>
</div>

<div>
  <span>Icon with a large badge</span>
  <dsr-icon name="home" matBadge="15" matBadgeSize="large" />
  <span class="cdk-visually-hidden">
    Example with a home icon with overlaid badge showing the number 15
  </span>
</div>

<div>
  <span>Icon with a large badge and long characters</span>
  <dsr-icon name="home" matBadge="159999" matBadgeSize="large" />
  <span class="cdk-visually-hidden">
    Example with a home icon with overlaid badge showing the number 159999
  </span>
</div>
```

--------------------------------

### FAB Button HTML Structure

Source: https://angular-desyre.gke2.ope.gcp.renault.com/components-core/fab-buttons

Example usage of FAB buttons with different style classes applied.

```html
  <div>
    <button mat-fab class="mat-mdc-fab-base" aria-label="Example FAB with edit icon">
      <dsr-icon name="edit"/>
    </button>
    <button mat-fab class="mat-mdc-fab-base fab-button-surface" aria-label="Example FAB with edit icon">
      <dsr-icon name="edit"/>
    </button>
    <button mat-fab class="mat-mdc-fab-base fab-button-secondary" aria-label="Example FAB with edit icon">
      <dsr-icon name="edit"/>
    </button>
    <button mat-fab class="mat-mdc-fab-base fab-button-tertiary" aria-label="Example FAB with edit icon">
      <dsr-icon name="edit"/>
    </button>
  </div>
```

--------------------------------

### Basic Checkbox Examples

Source: https://angular-desyre.gke2.ope.gcp.renault.com/components-core/checkbox

Demonstrates various states and configurations of the mat-checkbox component, including checked, indeterminate, disabled, and color variations.

```html
<mat-checkbox checked="false"/>
```

```html
<mat-checkbox checked="true"/>
```

```html
<mat-checkbox indeterminate="true"/>
```

```html
<mat-checkbox disabled/>
```

```html
<mat-checkbox color="warn"/>
```

```html
<mat-checkbox color="warn" checked="true"/>
```

```html
<mat-checkbox color="warn" checked="true" disabled/>
```

--------------------------------

### Implement Outlined Select Variants

Source: https://angular-desyre.gke2.ope.gcp.renault.com/components-core/select

Examples of single, multi-select, disabled, and error state configurations for the outlined select component.

```html
<div class="mb-dsr-spacing-small">
  <h4>Single outlined select</h4>
  <mat-form-field appearance="outline" class="w-[50%]">
    <mat-label>Favorite food</mat-label>
    <mat-select>
      @for (food of foods; track $index) {
      <mat-option [value]="food.value">
        {{ food.viewValue }}
      </mat-option>
      }
    </mat-select>
    <dsr-icon matSuffix name="arrow-down-2" />
    <mat-hint>Select an option</mat-hint>
  </mat-form-field>
</div>

<div class="mb-dsr-spacing-small">
  <h4>Multi outlined select</h4>
  <mat-form-field appearance="outline" class="w-[50%]">
    <mat-label>Toppings</mat-label>
    <mat-select [formControl]="toppings" multiple>
      @for (topping of toppingList; track $index) {
      <mat-option [value]="topping">
        {{ topping }}
      </mat-option>
      }
    </mat-select>
    <dsr-icon matSuffix name="arrow-down-2" />
    <mat-hint>Select options</mat-hint>
  </mat-form-field>
</div>

<div class="mb-dsr-spacing-small">
  <h4>Disabled outlined select</h4>
  <mat-form-field appearance="outline" class="w-[50%]">
    <mat-label>Favorite food</mat-label>
    <mat-select [formControl]="disabledControl">
      @for (food of foods; track $index) {
      <mat-option [value]="food.value">
        {{ food.viewValue }}
      </mat-option>
      }
    </mat-select>
    <dsr-icon matSuffix name="arrow-down-2" />
<mat-hint>Select an option</mat-hint>

  </mat-form-field>
</div>

<div class="mb-dsr-spacing-small">
  <h4>Error state outlined select</h4>
  <mat-form-field appearance="outline" class="w-[50%]">
    <mat-label>Favorite food</mat-label>
    <mat-select [formControl]="errorControl">
      @for (food of foods; track $index) {
      <mat-option [value]="food.value">
        {{ food.viewValue }}
      </mat-option>
      }
    </mat-select>
    <dsr-icon matSuffix name="arrow-down-2" />
@if (errorControl.hasError('invalidSelection')) {
    <mat-error>Please make a selection</mat-error>
    }
  </mat-form-field>
</div>
```

--------------------------------

### Implement Indeterminate Progress

Source: https://angular-desyre.gke2.ope.gcp.renault.com/components-core/linear-progress

Example of a progress bar indicating activity without a specific completion percentage.

```html
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
```

--------------------------------

### Desyre Switch Examples

Source: https://angular-desyre.gke2.ope.gcp.renault.com/components-core/switch

Demonstrates various configurations of the Desyre Switch component, including options with icons, without icons, and disabled states for both checked and unchecked toggles.

```html
<div>
  <mat-slide-toggle color="primary">
    With icon slide toggle
  </mat-slide-toggle>
  <mat-slide-toggle color="primary" [hideIcon]="true">
    Without icon slide toggle
  </mat-slide-toggle>
  <mat-slide-toggle disabled>
    With icon disabled unchecked
  </mat-slide-toggle>
  <mat-slide-toggle checked disabled>
    With icon disabled checked
  </mat-slide-toggle>
  <mat-slide-toggle disabled [hideIcon]="true">
    Without icon disabled unchecked
  </mat-slide-toggle>
  <mat-slide-toggle checked disabled [hideIcon]="true">
    Without icon disabled checked
  </mat-slide-toggle>
</div>

```

--------------------------------

### Select Basic Usage

Source: https://angular-desyre.gke2.ope.gcp.renault.com/getting-started/instructions

This example demonstrates a basic implementation of a select dropdown. It requires a mat-form-field to wrap the mat-select and mat-option elements, providing a label for the selection.

```html
<mat-form-field>
  <mat-label>Favorite food</mat-label>
  <mat-select>
    <mat-option value="pizza">Pizza</mat-option>
    <mat-option value="pasta">Pasta</mat-option>
    <mat-option value="burger">Burger</mat-option>
  </mat-select>
</mat-form-field>
```

--------------------------------

### Horizontal Stepper Example

Source: https://angular-desyre.gke2.ope.gcp.renault.com/components-core/steppers

Demonstrates a basic horizontal stepper with three steps: name, address, and completion. Includes form group integration and navigation buttons (Next, Back, Reset).

```html
<mat-horizontal-stepper #stepper>
  <mat-step [stepControl]="firstFormGroup">
    <form [formGroup]="firstFormGroup">
      <ng-template matStepLabel>Fill out your name</ng-template>
      <mat-form-field class="dsr-form">
        <mat-label>Name</mat-label>
        <input
          matInput
          placeholder="Last name, First name"
          formControlName="firstCtrl"
          required
        />
      </mat-form-field>
      <div>
        <button mat-button matStepperNext class="dsr-btn dsr-btn--basic">
          Next
        </button>
      </div>
    </form>
  </mat-step>
  <mat-step [stepControl]="secondFormGroup">
    <form [formGroup]="secondFormGroup">
      <ng-template matStepLabel>Fill out your address</ng-template>
      <mat-form-field class="dsr-form">
        <mat-label>Address</mat-label>
        <input
          matInput
          formControlName="secondCtrl"
          placeholder="Ex. 1 Main St, New York, NY"
          required
        />
      </mat-form-field>
      <div>
        <button mat-button matStepperPrevious class="dsr-btn dsr-btn--basic">
          Back
        </button>
        <button mat-button matStepperNext class="dsr-btn dsr-btn--basic">
          Next
        </button>
      </div>
    </form>
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Done</ng-template>
    <p class="dsr-text-body-2 text">You are now done.</p>
    <div>
      <button mat-button matStepperPrevious class="dsr-btn dsr-btn--basic">
        Back
      </button>
      <button
        mat-button
        (click)="stepper.reset()"
        class="dsr-btn dsr-btn--basic"
      >
        Reset
      </button>
    </div>
  </mat-step>
</mat-horizontal-stepper>
```

--------------------------------

### Verify Artifactory Login

Source: https://angular-desyre.gke2.ope.gcp.renault.com/templates/angular-18-demo

Log in to Artifactory using npm to verify your setup. This command prompts for credentials if not already configured.

```bash
npm login
```

--------------------------------

### Standard Icon Button Usage

Source: https://angular-desyre.gke2.ope.gcp.renault.com/components-core/icon-buttons

Examples of standard icon buttons, including small variants and disabled states.

```html
<div>
	<p>Standard Icon Buttons</p>
	<button matIconButton aria-label="Example standard icon button with a parameters icon">
		<dsr-icon name="parameters" />
	</button>
	<button matIconButton aria-label="Example standard icon button with number 1">1</button>
	<button matIconButton aria-label="Example disabled standard icon button with a parameters icon" disabled>
		<dsr-icon name="parameters" />
	</button>
</div>
<div class="gap-dsr-spacing-xlarge flex items-center">
	<p>Standard Small Icon Buttons</p>
	<button matIconButton aria-label="Example small standard icon button with a parameters icon" class="dsr-mat-icon-button-small">
		<dsr-icon name="parameters" [size]="selectedBrand === 'mob' ? '24px' : '16px'" />
	</button>
	<button matIconButton aria-label="Example small standard icon button with number 1" class="dsr-mat-icon-button-small">1</button>
	<button matIconButton aria-label="Example disabled small standard icon button with a parameters icon" disabled class="dsr-mat-icon-button-small">
		<dsr-icon name="parameters" [size]="selectedBrand === 'mob' ? '24px' : '16px'" />
	</button>
</div>
```

--------------------------------

### Run Angular App Locally

Source: https://angular-desyre.gke2.ope.gcp.renault.com/templates/angular-18-demo

Serve the Angular application locally and open it in a browser. This command compiles the application and starts a development server.

```bash
npm start
```

--------------------------------

### Desyre Link Component Examples

Source: https://angular-desyre.gke2.ope.gcp.renault.com/components-core/links

Demonstrates the usage of Desyre hyperlink and weblink components with different typography scales and an optional icon for weblinks.

```html
<!-- Hyperlink (inherits font from parent) -->
<p class="dsr-typescale-body-small">
  This is an <a [routerLink]="'/components-core/lists'" class="dsr-hyperlink">hyperlink</a> in a paragraph
</p>
<p class="dsr-typescale-body-medium">
  This is an <a [routerLink]="'/components-core/lists'" class="dsr-hyperlink">hyperlink</a> in a paragraph
</p>
<p class="dsr-typescale-body-large">
  This is an <a [routerLink]="'/components-core/lists'" class="dsr-hyperlink">hyperlink</a> in a paragraph
</p>

<!-- Weblink (common) -->
<a [routerLink]="'/components-core/links'" target="_blank" class="dsr-weblink">
  [Label]
</a>
<br />
<a [href]="'/'" target="_blank" class="dsr-weblink">
  Label
  <dsr-icon name="link-out" size="16px"></dsr-icon>
</a>
```

```html
<!-- Hyperlink - inherits typography from parent block element -->
<p class="dsr-typescale-body-small">
  This is an <a [routerLink]="'/components-core/lists'" class="dsr-hyperlink">hyperlink</a> in a paragraph
</p>
<p class="dsr-typescale-body-medium">
  This is an <a [routerLink]="'/components-core/lists'" class="dsr-hyperlink">hyperlink</a> in a paragraph
</p>
<p class="dsr-typescale-body-large">
  This is an <a [routerLink]="'/components-core/lists'" class="dsr-hyperlink">hyperlink</a> in a paragraph
</p>

<!-- Weblink (common) -->
<a [routerLink]="'/components-core/links'" target="_blank" class="dsr-weblink">
  [Label]
</a>
<br />
<a [href]="'/'" target="_blank" class="dsr-weblink">
  Label
  <dsr-icon name="link-out" size="16px" />
</a>
```

--------------------------------

### DsrCodeNavigator Component Usage

Source: https://angular-desyre.gke2.ope.gcp.renault.com/components-custom/code-navigator

Example of how to use the DsrCodeNavigator component in an HTML template. It requires the component instance, JSON file path, and template name as inputs.

```html
<dsr-code-navigator
  [component]="demoComponent"
  [jsonFilePath]="filePath"
  [templateName]="name"
  hasLineNumbers
/>

```

--------------------------------

### Generate New Component

Source: https://angular-desyre.gke2.ope.gcp.renault.com/templates/angular-18-demo

Angular CLI command to generate a new component named 'get-started'.

```bash
ng generate component get-started


```

--------------------------------

### Implement Basic Menu

Source: https://angular-desyre.gke2.ope.gcp.renault.com/getting-started/instructions

Basic structure for a menu with trigger and items.

```html
<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item>Option 1</button>
  <button mat-menu-item>Option 2</button>
  <button mat-menu-item disabled>Disabled</button>
</mat-menu>
```

--------------------------------

### Circular Progress - Installation

Source: https://angular-desyre.gke2.ope.gcp.renault.com/components-core/circular-progress

To use the Desyre Circular Progress component, ensure Angular Material is installed and the Desyre theme is configured. Then, import `MatProgressSpinnerModule` into your component.

```APIDOC
## Installation

To use the Desyre Circular Progress component, please follow these steps :
  1. Make sure that you have Angular Material installed and that you have configured the Desyre theme for you brand. If not, follow the _installation guide_.
  2. Import _MatProgressSpinnerModule_ in your component :

```typescript
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
```
```

--------------------------------

### Implement Basic Paginator

Source: https://angular-desyre.gke2.ope.gcp.renault.com/getting-started/instructions

Standard paginator configuration with length and page size options.

```html
<mat-paginator
  [length]="100"
  [pageSize]="10"
  [pageSizeOptions]="[5, 10, 25, 100]"
  aria-label="Select page">
</mat-paginator>
```

--------------------------------

### Define Application Routes

Source: https://angular-desyre.gke2.ope.gcp.renault.com/templates/angular-18-demo

This configuration defines the routes for the application, including the root path, a 'get-started' path, and a catch-all route that redirects to 'get-started'.

```typescript
import { Routes } from '@angular/router';

export const routes: Routes = [
  // HOME
  {
    path: '',
    loadComponent: () =>
            import('./pages/get-started/get-started.component').then(
                    (c) => c.GetStartedComponent
            ),
  },

  // COMPONENTS
  {
    path: 'get-started',
    loadComponent: () =>
            import('./pages/get-started/get-started.component').then(
                    (c) => c.GetStartedComponent,
            ),
  },
  {
    path: '**',
    redirectTo: 'get-started',
    pathMatch: 'full',
  },
];


```

--------------------------------

### Basic Menu Implementation

Source: https://angular-desyre.gke2.ope.gcp.renault.com/components-core/menus

A standard menu with a button trigger and a list of menu items, including a divider.

```html
<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
  <mat-divider></mat-divider>
  <button mat-menu-item>Item 3</button>
</mat-menu>
```

--------------------------------

### DsrCodeNavigator Component Usage

Source: https://angular-desyre.gke2.ope.gcp.renault.com/components-custom/code-navigator

Example of how to use the DsrCodeNavigator component in an Angular template.

```APIDOC
### DsrCodeNavigator Component Usage

```html
<dsr-code-navigator
  [component]="demoComponent"
  [jsonFilePath]="filePath"
  [templateName]="name"
  hasLineNumbers
/>
```
```

--------------------------------

### Paginator Usage

Source: https://angular-desyre.gke2.ope.gcp.renault.com/components-core/paginator

Example of how to implement the Desyre Paginator component in an Angular template.

```APIDOC
## Usage

WCAG compliant 

```html
<mat-paginator
  [length]="100"
  [pageSize]="10"
  [pageSizeOptions]="[5, 10, 25, 100]"
  aria-label="Select page">
</mat-paginator>
```
```

--------------------------------

### Configure icon dependencies

Source: https://angular-desyre.gke2.ope.gcp.renault.com/templates/angular-18-demo

Add the icon package to your package.json dependencies.

```json
...
"dependencies": {
...
  "@desyre/icons-angular": "^18.0.0",
...
}
...
```

--------------------------------

### Advanced Slider Configurations

Source: https://angular-desyre.gke2.ope.gcp.renault.com/components-core/sliders

Examples of sliders with tick marks, labels, and disabled states.

```html
<!--Slider with label and tick marks-->
<mat-slider min="0" max="1000" step="100" showTickMarks discrete [displayWith]="formatLabel">
  <input matSliderThumb/>
</mat-slider>

<!--Disabled Slider-->
<mat-slider disabled min="0" max="1000" step="100">
  <input matSliderThumb/>
</mat-slider>
```

--------------------------------

### Disabled Paginator State

Source: https://angular-desyre.gke2.ope.gcp.renault.com/components-custom/pagination

Example of setting the paginator to a disabled state to prevent user interaction.

```html
<dsr-pagination
  [length]="200"
  [pageSize]="10"
  [pageIndex]="0"
  [disabled]="true"
/>
```

--------------------------------

### Display Progress Bar Demo

Source: https://angular-desyre.gke2.ope.gcp.renault.com/components-core/linear-progress

Basic implementation showing both determinate and indeterminate progress bar variants.

```html
<mat-progress-bar mode="determinate" value="40"></mat-progress-bar> <mat-progress-bar mode="indeterminate"></mat-progress-bar>
```

--------------------------------

### Import Desyre theme in styles.scss

Source: https://angular-desyre.gke2.ope.gcp.renault.com/getting-started/installation

Import the brand-specific theme file into the global styles.scss.

```scss
@use '@desyre/angular-material/assets/style/desyre-theme-[brand].scss';
```

--------------------------------

### Filled Select Variants

Source: https://angular-desyre.gke2.ope.gcp.renault.com/components-core/select

Examples of single, multi-select, disabled, and error-state filled select components.

```html
<div class="mb-dsr-spacing-small">
  <h4>Single filled select</h4>
  <mat-form-field appearance="fill" class="w-[50%]">
    <mat-label>Favorite food</mat-label>
    <mat-select>
      @for (food of foods; track $index) {
      <mat-option [value]="food.value">
        {{ food.viewValue }}
      </mat-option>
      }
    </mat-select>
    <dsr-icon matSuffix name="arrow-down-2" />
<mat-hint>Select an option</mat-hint>
  </mat-form-field>
</div>

<div class="mb-dsr-spacing-small">
  <h4>Multi filled select</h4>
  <mat-form-field appearance="fill" class="w-[50%]">
    <mat-label>Toppings</mat-label>
    <mat-select [formControl]="toppings" multiple>
      @for (topping of toppingList; track $index) {
      <mat-option [value]="topping">
        {{ topping }}
      </mat-option>
      }
    </mat-select>
    <dsr-icon matSuffix name="arrow-down-2" />
    <mat-hint>Select options</mat-hint>
  </mat-form-field>
</div>

<div class="mb-dsr-spacing-small">
  <h4>Disabled filled select</h4>
  <mat-form-field appearance="fill" class="w-[50%]">
    <mat-label>Favorite food</mat-label>
    <mat-select [formControl]="disabledControl">
      @for (food of foods; track $index) {
      <mat-option [value]="food.value">
        {{ food.viewValue }}
      </mat-option>
      }
    </mat-select>
    <dsr-icon matSuffix name="arrow-down-2" />
    <mat-hint>Select an option</mat-hint>
  </mat-form-field>
</div>

<div class="mb-dsr-spacing-small">
  <h4>Error state filled select</h4>
  <mat-form-field appearance="fill" class="w-[50%]">
    <mat-label>Favorite food</mat-label>
    <mat-select [formControl]="errorControl">
      @for (food of foods; track $index) {
      <mat-option [value]="food.value">
        {{ food.viewValue }}
      </mat-option>
      }
    </mat-select>
    <dsr-icon matSuffix name="arrow-down-2" />
@if (errorControl.hasError('invalidSelection')) {
    <mat-error>Please make a selection</mat-error>
    }
  </mat-form-field>
</div>
```

--------------------------------

### Import MatStepperModule

Source: https://angular-desyre.gke2.ope.gcp.renault.com/getting-started/instructions

Import the MatStepperModule to enable the stepper component for guiding users through a sequence of steps.

```typescript
import { MatStepperModule } from '@angular/material/stepper';
```

--------------------------------

### Import MatChipsModule

Source: https://angular-desyre.gke2.ope.gcp.renault.com/components-core/chips

Include the required Angular Material module in your component to enable chip functionality.

```typescript
import { MatChipsModule } from '@angular/material/chips';
```

--------------------------------

### Circular Progress - Usage (Indeterminate)

Source: https://angular-desyre.gke2.ope.gcp.renault.com/components-core/circular-progress

WCAG compliant example of using the `mat-progress-spinner` component in indeterminate mode.

```APIDOC
### Usage
#### Indeterminate
WCAG compliant 
```html
<mat-progress-spinner mode="indeterminate" />
```
```

--------------------------------

### Tonal Buttons

Source: https://angular-desyre.gke2.ope.gcp.renault.com/components-core/buttons

Examples of tonal buttons, including disabled and icon variations. These buttons are WCAG compliant.

```html
<button mat-flat-button color="accent">Filled</button>
<button mat-flat-button color="accent" disabled>Disabled Filled</button>
<button mat-flat-button color="accent">
  <dsr-icon aria-hidden="true" name="add" />
  Filled with icon
</button>
```

--------------------------------

### Import MatRadioModule

Source: https://angular-desyre.gke2.ope.gcp.renault.com/components-core/radio

Import MatRadioModule into your component to enable radio button functionality. This is a required setup step.

```typescript
import {MatRadioModule} from '@angular/material/radio';
```

--------------------------------

### Filled Icon Button Usage

Source: https://angular-desyre.gke2.ope.gcp.renault.com/components-core/icon-buttons

Examples of filled icon buttons, including small variants and disabled states.

```html
<div>
	<p>Filled Icon Buttons</p>
	<button matIconButton aria-label="Example filled icon-button with a parameters icon" class="dsr-mat-icon-button-filled">
		<dsr-icon name="parameters" />
	</button>
	<button matIconButton aria-label="Example filled icon-button with number 1" class="dsr-mat-icon-button-filled">1</button>
	<button matIconButton aria-label="Example disabled filled icon-button with a parameters icon" disabled class="dsr-mat-icon-button-filled">
		<dsr-icon name="parameters" />
	</button>
</div>
<div class="gap-dsr-spacing-xlarge flex items-center">
	<p>Filled Small Icon Buttons</p>
	<button matIconButton aria-label="Example small filled icon-button with a parameters icon" class="dsr-mat-icon-button-filled dsr-mat-icon-button-small">
		<dsr-icon name="parameters" [size]="selectedBrand() === 'mob' ? '24px' : '16px'" />
	</button>
	<button matIconButton aria-label="Example small filled icon-button with number 1" class="dsr-mat-icon-button-filled dsr-mat-icon-button-small">1</button>
	<button matIconButton aria-label="Example disabled small filled icon-button with a parameters icon" disabled class="dsr-mat-icon-button-filled dsr-mat-icon-button-small">
		<dsr-icon name="parameters" [size]="selectedBrand() === 'mob' ? '24px' : '16px'" />
	</button>
</div>
```

--------------------------------

### Circular Progress - Usage (Determinate)

Source: https://angular-desyre.gke2.ope.gcp.renault.com/components-core/circular-progress

WCAG compliant example of using the `mat-progress-spinner` component in determinate mode with varying values.

```APIDOC
### Usage
#### Determinate
WCAG compliant 
```html
<div>
  <mat-progress-spinner mode="determinate" value="25" />
  <mat-progress-spinner mode="determinate" value="50" />
  <mat-progress-spinner mode="determinate" value="75" />
  <mat-progress-spinner mode="determinate" value="100" />
</div>
```
```

--------------------------------

### Configure package.json dependencies

Source: https://angular-desyre.gke2.ope.gcp.renault.com/templates/angular-18-demo

Add the necessary Desyre dependencies to your project's package.json file.

```json
...
"dependencies": {
...
  "@desyre/angular-material": "^18.0.0",
  "@desyre/core": "^3.0.0",
  "@desyre/fonts": "^3.0.0"
...
}
...
```

--------------------------------

### Rounded Chips

Source: https://angular-desyre.gke2.ope.gcp.renault.com/components-core/chips

Demonstrates how to create pill-shaped chips using the `dsr-chip-rounded` class. Includes examples for filled, outlined, and elevated variants.

```APIDOC
## Rounded Chips

Use the `dsr-chip-rounded` class to create pill-shaped chips:

```html
<mat-chip-set aria-label="Rounded chips">
  <!-- Filled rounded -->
  <mat-chip class="dsr-chip-rounded">
    <dsr-icon-wrapper name="edit" aria-hidden="true" />
    Rounded
  </mat-chip>

  <!-- Outlined rounded -->
  <mat-chip class="dsr-outlined-chip dsr-chip-rounded">
    <dsr-icon-wrapper name="edit" aria-hidden="true" />
    Rounded
  </mat-chip>

  <!-- Elevated rounded -->
  <mat-chip class="dsr-elevated-chip dsr-chip-rounded">
    <dsr-icon-wrapper name="edit" aria-hidden="true" />
    Rounded
  </mat-chip>
</mat-chip-set>
```
```

--------------------------------

### Basic Component Usage

Source: https://angular-desyre.gke2.ope.gcp.renault.com/components-custom/mode-switcher

Display the mode switcher component in an application template.

```html

  <dsr-mode-switcher></dsr-mode-switcher>
  
```

--------------------------------

### Import MatSlideToggleModule

Source: https://angular-desyre.gke2.ope.gcp.renault.com/components-core/switch

Import MatSlideToggleModule into your component to use the Desyre Switch component. Ensure Angular Material is installed and the Desyre theme is configured.

```typescript
import { MatSlideToggleModule } from '@angular/material/slide-toggle';

```

--------------------------------

### Menu with Icons and Submenus

Source: https://angular-desyre.gke2.ope.gcp.renault.com/components-core/menus

Demonstrates a menu with leading and trailing icons on items, and nested submenus for navigation.

```html
<button mat-icon-button [matMenuTriggerFor]="menuWithIcons" aria-label="Menu with icons">
  <dsr-icon name="parameters"></dsr-icon>
</button>

<mat-menu #menuWithIcons="matMenu">
  <button mat-menu-item [matMenuTriggerFor]="subMenu1">
    <dsr-icon aria-hidden="true" name="confirm"></dsr-icon>
    <span>Home</span>
    <dsr-icon aria-hidden="true" name="arrow-right-2"></dsr-icon>
  </button>
  <button mat-menu-item [matMenuTriggerFor]="subMenu2">
    <dsr-icon aria-hidden="true" name="user"></dsr-icon>
    <span>Settings</span>
    <dsr-icon aria-hidden="true" name="arrow-right-2"></dsr-icon>
  </button>
  <button mat-menu-item [matMenuTriggerFor]="subMenu3">
    <dsr-icon aria-hidden="true" name="edit"></dsr-icon>
    <span>Logout</span>
    <dsr-icon aria-hidden="true" name="arrow-right-2"></dsr-icon>
  </button>
</mat-menu>

<mat-menu #subMenu1="matMenu">
  <button mat-menu-item>Sub menu item 1</button>
  <button mat-menu-item>Sub menu item 2</button>
</mat-menu>

<mat-menu #subMenu2="matMenu">
  <button mat-menu-item>Sub menu item 1</button>
  <button mat-menu-item>Sub menu item 2</button>
</mat-menu>

<mat-menu #subMenu3="matMenu">
  <button mat-menu-item>Sub menu item 1</button>
  <button mat-menu-item>Sub menu item 2</button>
</mat-menu>
```

--------------------------------

### Import MatStepperModule

Source: https://angular-desyre.gke2.ope.gcp.renault.com/components-core/steppers

Import MatStepperModule into your component to use the Desyre Stepper component. Ensure Angular Material is installed and the Desyre theme is configured.

```typescript
import {MatStepperModule} from '@angular/material/stepper';
```

--------------------------------

### Configure Tailwind dependencies

Source: https://angular-desyre.gke2.ope.gcp.renault.com/templates/angular-18-demo

Add Tailwind and Desyre preset to package.json.

```json
...
"dependencies": {
  ...
  "@desyre/tailwind-rg-preset": "^3.0.0",
  "autoprefixer": "^10.0.0",
  "postcss": "^8.0.0",
  ...
  "tailwindcss": "^3.0.0",
  ...
}
```

--------------------------------

### Import MatPaginatorModule

Source: https://angular-desyre.gke2.ope.gcp.renault.com/components-core/paginator

Import the MatPaginatorModule into your Angular component to enable the paginator functionality. Ensure Angular Material is installed and the Desyre theme is configured.

```typescript
import { MatPaginatorModule } from '@angular/material/paginator';

```

--------------------------------

### Import MatCardModule

Source: https://angular-desyre.gke2.ope.gcp.renault.com/components-core/cards

Import MatCardModule into your component to use the Desyre Card component. Ensure Angular Material is installed and the Desyre theme is configured.

```typescript
import { MatCardModule } from "@angular/material/card";
```

--------------------------------

### Overriding Header CSS Variables

Source: https://angular-desyre.gke2.ope.gcp.renault.com/components-custom

Customize the header's appearance by overriding CSS variables. This example shows how to change the logo width.

```css
:root {
  --dsr-header-logo-width: 5rem
}
```

--------------------------------

### Configure Ultra-Compact Menu Density

Source: https://angular-desyre.gke2.ope.gcp.renault.com/components-core/menus

Use the MAT_MENU_DEFAULT_OPTIONS provider to apply the dsr-menu-density-minus-4-overlay class to the menu overlay.

```typescript
import { MatMenuModule } from '@angular/material/menu';
import { MatButtonModule } from '@angular/material/button';
import { MatDivider } from '@angular/material/divider';
import { MAT_MENU_DEFAULT_OPTIONS } from '@angular/material/menu';

@Component({
  selector: 'app-menu-density-minus-4-example',
  imports: [MatMenuModule, MatButtonModule, MatDivider],
  templateUrl: './menu-density-minus-4.component.html',
  providers: [
    {
      provide: MAT_MENU_DEFAULT_OPTIONS,
      useValue: {
        overlayPanelClass: ['dsr-menu-density-minus-4-overlay'],
      },
    },
  ],
})
export class MenuDensityMinus4ExampleComponent {}
```