Použití s Angularem

Pro Angular existuje balíček @gov-design-system-ce/angular. Ten obsahuje Angular direktivy pro všechny komponenty včetně integrace s reaktivními formuláři.

1. Instalace ​

npm install @gov-design-system-ce/angular \
            @gov-design-system-ce/components \
            @gov-design-system-ce/styles \
            @gov-design-system-ce/icons \
            @gov-design-system-ce/fonts

2. Registrace komponent ​

Správné zapojení má dvě části. Obě jsou potřeba a dělají různé věci.

a) Providery — registrují Web Components ​

Ve standalone aplikaci — tedy v tom, co vygeneruje ng new od Angularu 17:

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideGovDesignSystem } from '@gov-design-system-ce/angular';

export const appConfig: ApplicationConfig = {
  providers: [
    provideGovDesignSystem(),
  ],
};

// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { App } from './app/app';
import { appConfig } from './app/app.config';

// Konfiguraci nastavte před bootstrapem, aby ji inicializátor viděl.
(window as any).GOV_DS_CONFIG = {
  iconsPath: '/assets/icons',
};

bootstrapApplication(App, appConfig).catch((err) => console.error(err));

b) Import modulu — zpřístupní direktivy v šablonách ​

// app.ts
import { Component } from '@angular/core';
import { GovDesignSystemModule } from '@gov-design-system-ce/angular';

@Component({
  selector: 'app-root',
  imports: [GovDesignSystemModule],
  templateUrl: './app.html',
})
export class App {}

GovDesignSystemModule v imports zajistí, že se šablona s elementy <gov-*> přeloží. Díky tomu nepotřebujete CUSTOM_ELEMENTS_SCHEMA.

Aplikace založené na NgModulech ​

Pokud používáte klasickou architekturu s AppModule, stačí modul naimportovat — providery se v tomto případě uplatní:

import { NgModule } from '@angular/core';
import { GovDesignSystemModule } from '@gov-design-system-ce/angular';

@NgModule({
  imports: [GovDesignSystemModule],
  // ...
})
export class AppModule {}

3. Styly, ikony a fonty ​

Angular nemá vite-plugin-static-copy; styly a soubory se nastavují v angular.json.

Ikony a fonty ​

Do projects.<název>.architect.build.options.assets přidejte:

"assets": [
  {"glob": "**/*", "input": "public"},
  {"glob": "**/*", "input": "node_modules/@gov-design-system-ce/icons/lib/components", "output": "assets/icons/components"},
  {"glob": "**/*", "input": "node_modules/@gov-design-system-ce/icons/lib/complex", "output": "assets/icons/complex"},
  {"glob": "**/*", "input": "node_modules/@gov-design-system-ce/icons/lib/colored", "output": "assets/icons/colored"},
  {"glob": "*.woff2", "input": "node_modules/@gov-design-system-ce/fonts/lib", "output": "assets/fonts"}
]

Podadresáře components, complex a colored musí zůstat zachované — viz Ikony.

Styly ​

Styly importujte z src/styles.scss a v angular.json nechte v poli styles jen tento jeden soubor:

/* src/styles.scss */
@import "@gov-design-system-ce/styles/tokens.css";
@import "@gov-design-system-ce/styles/styles.css";
@import "@gov-design-system-ce/styles/layout.css";
@import "@gov-design-system-ce/styles/components.css";
@import "@gov-design-system-ce/styles/animations.css";

$gov-font-path: "/assets/fonts";
$version: "4.7.0";
@import "@gov-design-system-ce/fonts/lib/roboto";

Angular direktivy obalují skutečné Web Components, takže se styly chovají stejně jako v čistém HTML.

Limity velikosti bundlu ​

Všech pět souborů stylů má dohromady asi 1,7 MB, což překračuje výchozí limit Angularu (1 MB pro chybu). Ve skutečné aplikaci importujte jen to, co potřebujete; případně limity upravte v angular.json v sekci budgets.

4. Použití komponent ​

<gov-container>
  <gov-card>
    <h3 slot="headline">Nadpis karty</h3>
    <p>Obsah karty.</p>
  </gov-card>

  <gov-form-control>
    <gov-form-label identifier="jmeno">Jméno</gov-form-label>
    <gov-form-input identifier="jmeno" placeholder="Jan Novák"></gov-form-input>
  </gov-form-control>

  <gov-button type="solid" color="primary" size="m">
    Odeslat
    <gov-icon slot="icon-end" name="chevron-right"></gov-icon>
  </gov-button>
</gov-container>

Na co si dát pozor ​

• Varianty tlačítka se nastavují přes type a color; atribut variant neexistuje.
• Nadpis karty patří do slotu headline, nikoli title.
• Formulářová pole nemají atribut label — popisek řeší gov-form-control a gov-form-label spojené shodným identifier.

Podporované verze Angularu ​

Balíček je publikovaný jako partial-Ivy knihovna a je ověřený s Angularem 22. Deklarovaný rozsah peerDependencies je >= 12.

Angular CLI od verze 22 vyžaduje Node.js 22.22.3 nebo novější.