npm package: @quadrixo/material
Description: > This library is still under development, implemenation can change between versions.
Latest version: 0.0.4

> This library is still under development, implemenation can change between versions.

# Libraire @quadrixo/material

Cette librairie est un ensemble de composants et autres objets Agnular utiles pour le
développement d'une application.

## Table des matières

 - [Installation](#installation)
 - [AppShell](#appshell)
   - [Navigation](#navigation)
   - [Light/Dark mode](#lightdark-mode)
   - [AppshellService](#appshellservice)

## Installation

La librairie [`@angular/material`](https://material.angular.io/) est nécessaire.

Puis un simple `npm add @quadrixo/material` (ou `yarn add @quadrixo/material`).

## AppShell

`AppShell` est un layout complet de page. Il se base sur le composant
[`sidenav`](https://material.angular.io/components/sidenav/overview).

```ts
@Component({
  selector: 'app-root',
  imports: [RouterOutlet, AppshellModule],
  template: `
  <qdx-appshell>
    <router-outlet></router-outlet>
  </qdx-appshell>`,
  styleUrl: './app.component.scss'
})
export class AppComponent {
}
```

### Navigation

La navigation est affiché dans la colonne de gauche. Les éléments de la navigations sont
liés à l'entrée `items`.

Les éléments ont les propriétés :
 - `icon`: (string) le nom de l'icône (utilisé avec `<mat-icon></mat-icon>`)
 - `label`: (string) Le nom de l'entrée
 - `link`: (string) le lien de l'entrée
 - `meta`: (any, optionel) une metadata supplémentaire (avec le tag `matListItemMeta`)

```ts
@Component({
  selector: 'app-root',
  imports: [RouterOutlet, AppshellModule],
  template: `
  <qdx-appshell [items]="items">
    <router-outlet></router-outlet>
  </qdx-appshell>`,
  styleUrl: './app.component.scss'
})
export class AppComponent {
  public readonly items = [
    { icon: 'home', label: 'Home', link: '/' },
    //...
  ];
}
```

### Light/Dark mode

Il est possible d'afficher un bouton pour basculer entre les modes clair et foncé.

Pour utiliser la fonctionnalité de bascule entre le mode foncé et clair il faut :
 - Utiliser un thème de couleur personnalisé via [`mat.theme()`](https://material.angular.io/guide/theming#color-map)
 - Supprimer la déclaration `theme-type: light,` dans la définition du thème
 - Ajout dans le sélecteur `html` la propriété `color-scheme: light dark;`
 - Ajouter l'option `modeSwitcher: true` lors de l'appel à `provideAppshellLayout()`

```diff
html {
+ color-scheme: light dark;
  @include mat.theme((
    color: (
      primary: mat.$violet-palette,
      tertiary: mat.$orange-palette,
-     theme-type: light,
    ),
    typography: Roboto,
    density: 0
  ));
}
```

```ts
export const appConfig: ApplicationConfig = {
  providers: [
    ...
    provideAppshellLayout('Demo APP', { modeSwitcher: true }),
  ]
}
```

### AppshellService

Le service `AppshellService` permet d'interagir avec le layout `AppShell` à partir d'un composant.

API :
 - `mini` (WritableSignal<boolean>): réduit ou élargi la colonne de nagivation
 - `mode` (WritableSignal<'light' | 'dark'>): définit le mode clair ou foncé
 - `title` (WritableSignal<string | TemplateRef<unknown>>): modifie le titre de la page affiché dans la `Toolbar`
 - `mainAction` (WritableSignal<AppshellAction>): ajoute une action principale en haut de la colonne de navigation
 - `actions` (WritableSignal<AppshellAction[]>): définie les actions de la `Toolbar`

```ts
/**
 * Define an action accessible from the toolbar or the sidenav bar.
 */
export interface AppshellAction {
  /**
   * The icon's symbol name of the action
   */
  icon: string;
  /**
   * The label of the action
   */
  label: string;
  /**
   * A callable function invoke when the action button is pressed
   */
  action: CallableFunction;
}
```