@gstack/gds-angular

Documentație online (fără download) — citește aici pe Wiki.
Pachete npm: Package Registry · contracte în @gstack/gds-core.

GovStack Design System — componente Angular standalone gds-* (OnPush, fără encapsulation).

Package Registry: https://git.esempla.systems/govtech/gstack/gstyle/-/packages
Peer: @gstack/gds-core, @angular/core ^20, @angular/common ^20

Instalare

@gstack:registry=https://git.esempla.systems/api/v4/projects/581/packages/npm/
//git.esempla.systems/api/v4/projects/581/packages/npm/:_authToken=${NPM_TOKEN}

npm install @gstack/gds-core @gstack/gds-angular

import { GdsTableComponent, GdsSidenavComponent } from '@gstack/gds-angular';
import type { TableData, SidenavData } from '@gstack/gds-core';

:root { --gds-accent: var(--gds-accent-indigo); } /* indigo | emerald | amber | rose */

Injectează / importă GDS_CSS din @gstack/gds-core în stilurile globale ale aplicației.

Pentru oameni și agenți

Fiecare componentă de mai jos: ce reprezintă, selector, data contract, exemplu. Nu inventa props — folosește tipul din @gstack/gds-core.

STRUCTURE

Sidenav — `gds-sidenav`

Navigare laterală (brand, grupuri, user). Mobile → drawer.

Data: SidenavData · Output: itemActivate

<gds-sidenav [data]="{
  product: { name: 'GPay', abbr: 'GP' },
  groups: [{ label: 'Meniu', items: [{ label: 'Plăți', active: true }] }],
  user: { name: 'Ana Pop', role: 'Operator' }
}" />

BLOCKS

KPI row — `gds-kpi-row` · kind `kpi-row` · `KpiRowData`

2–4 carduri KPI (label, value, delta?, accent?).

<gds-kpi-row [data]="{ cards: [
  { label: 'Plăți', value: '1.2k', delta: '+4%', accent: true },
  { label: 'Erori', value: '12', delta: '-2%' }
]}" />

Chart — `gds-chart` · kind `chart` · `ChartData`

variant: bar | hbar | line | area | donut. bars: 6–12 puncte.

<gds-chart [data]="{ title: 'Volume', variant: 'bar', bars: [40,55,30,70,45,60] }" />

Table — `gds-table` · kind `table` · `TableData`

<gds-table lang="ro" [data]="{
  title: 'Plăți', searchable: true, rowAction: 'drawer',
  columns: [
    { key: 'id', label: 'ID', type: 'mono' },
    { key: 'status', label: 'Status', type: 'status' }
  ],
  rows: [{ id: 'MD-001', status: 'active' }]
}" />

Form — `gds-form` · kind `form` · `FormData`

Câmpuri text | select | toggle + submit (UI mock).

<gds-form [data]="{
  title: 'Cerere', submitLabel: 'Trimite',
  fields: [{ label: 'Nume', kind: 'text', required: true }]
}" />

Alert — `gds-alert` · kind `alert` · `AlertData`

kind: info | warning.

<gds-alert [data]="{ kind: 'warning', text: 'Verifică IDNO-ul.' }" />

Activity — `gds-activity` · kind `activity` · `ActivityData`

Feed text + timp.

<gds-activity [data]="{ items: [{ text: 'Plată confirmată', time: '09:12' }] }" />

Call to action — `gds-cta` · kind `cta` · `CtaData`

Banner CTA; output navigate dacă ai primaryLink / secondaryLink.

<gds-cta [data]="{
  title: 'Începe acum', text: 'Deschide un cont.',
  primary: 'Continuă', align: 'left', filled: true
}" />

Search bar — `gds-search` · kind `search` · `SearchData`

Placeholder, buton, chips, size md|lg.

<gds-search [data]="{
  placeholder: 'Caută…', button: 'Caută', chips: ['Plăți'], size: 'lg'
}" />

Cards — `gds-cards` · kind `cards` · `CardsData`

Grilă 2|3|4 coloane.

<gds-cards [data]="{
  columns: 3,
  items: [{ title: 'GSSO', text: 'Auth', tag: 'Core' }]
}" />

Image — `gds-image` · kind `image` · `ImageData`

Ratio 16:9|4:3|1:1|21:9; url gol = placeholder.

<gds-image [data]="{ alt: 'Hero', ratio: '16:9', rounded: true }" />

Video — `gds-video` · kind `video` · `VideoData`

Player mock (nu redă video real).

<gds-video [data]="{ title: 'Tutorial', duration: '3:24', ratio: '16:9' }" />

Progress — `gds-progress` · kind `progress` · `ProgressData`

variant: bars | rings | steps; value 0–100.

<gds-progress [data]="{
  variant: 'steps',
  items: [{ label: 'KYC', value: 40 }]
}" />

FAQ — `gds-faq` · kind `faq` · `FaqData`

Accordion q/a.

<gds-faq [data]="{ items: [{ q: 'Cum plătesc?', a: 'Din hub-ul GPay.' }] }" />

Slider — `gds-slider` · kind `slider` · `SliderData`

Carusel; autoplay boolean.

<gds-slider [data]="{
  autoplay: true,
  slides: [{ title: 'Slide 1', text: 'Bun venit' }]
}" />

Chat widget — `gds-chat` · kind `chat` · `ChatData`

Launcher flotant + mesaje bot|user.

<gds-chat [data]="{
  title: 'Asistență', greeting: 'Salut!',
  launcher: 'Chat', placeholder: 'Mesaj…',
  messages: [{ from: 'bot', text: 'Bună!' }]
}" />

Helpers

`gds-block` — dispatcher pe `Block.kind`

<gds-block [block]="{ id: '1', kind: 'alert', data: { kind: 'info', text: 'OK' } }" />

`gds-shell` — document complet `GdsMockDoc`

<gds-shell [doc]="mockDoc" />

Mapare paletă Constructor → pachet

Paletă	Selector	npm
Sidenav	`gds-sidenav`	`@gstack/gds-angular`
KPI row	`gds-kpi-row`	idem
Chart	`gds-chart`	idem
Table	`gds-table`	idem
Form	`gds-form`	idem
Alert	`gds-alert`	idem
Activity	`gds-activity`	idem
Call to action	`gds-cta`	idem
Search bar	`gds-search`	idem
Cards	`gds-cards`	idem
Image	`gds-image`	idem
Video	`gds-video`	idem
Progress	`gds-progress`	idem
FAQ	`gds-faq`	idem
Slider	`gds-slider`	idem
Chat widget	`gds-chat`	idem

Contracte: @gstack/gds-core. Docs monorepo: docs/components/.

@gstack/gds-angular

Instalare

Pentru oameni și agenți

STRUCTURE

Sidenav — gds-sidenav

BLOCKS

KPI row — gds-kpi-row · kind kpi-row · KpiRowData

Chart — gds-chart · kind chart · ChartData

Table — gds-table · kind table · TableData

Form — gds-form · kind form · FormData

Alert — gds-alert · kind alert · AlertData

Activity — gds-activity · kind activity · ActivityData

Call to action — gds-cta · kind cta · CtaData

Search bar — gds-search · kind search · SearchData

Cards — gds-cards · kind cards · CardsData

Image — gds-image · kind image · ImageData

Video — gds-video · kind video · VideoData

Progress — gds-progress · kind progress · ProgressData

FAQ — gds-faq · kind faq · FaqData

Slider — gds-slider · kind slider · SliderData

Chat widget — gds-chat · kind chat · ChatData