GStack · GPay · Esempla Systems

✕ {{ t.adv_col_a }}

✓ {{ t.adv_col_b }}

{{ c.token }}

{{ c.token }}

{{ c.tokens }}

{{ t.rule }} {{ t.col_rule }}

IBM Plex Sans

IBM Plex Mono

Token

{{ r.token }}

{{ t.rule }} {{ t.type_rule }}

{{ s.token }}
{{ s.px }}

{{ r.token }}
{{ r.px }} · {{ r.use }}

sidebar
242px

header · 58px

content · max 1180px · padding 24–34px

{{ t.rule }} {{ t.sp_rule }}

GPay Core

Virtosu D.

import { GdsSidenavComponent } from '@esempla/gds-angular';

<gds-sidenav [product]="{ name: 'GPay Core', abbr: 'P' }"
             [groups]="navGroups"
             [activeRoute]="router.url"
             (navigate)="router.navigateByUrl($event)"></gds-sidenav>

<gds-button variant="primary" icon="plus">{{ t.btn_primary }}</gds-button>
<gds-button variant="secondary">{{ t.btn_secondary }}</gds-button>
<gds-button variant="danger" size="md">{{ t.btn_danger }}</gds-button>

{{ t.badge_role }} GET /v1/payments 3

<gds-badge status="success" dot>{{ t.st_active }}</gds-badge>
<gds-badge status="warning" dot>{{ t.st_pending }}</gds-badge>
<gds-badge kind="mono">GET /v1/payments</gds-badge>

{{ t.form_lbl_name }} *

IDNO

{{ t.form_sel_now }}: {{ selLabel }}

{{ t.form_switch }}: {{ switchLabel }}

<gds-input label="{{ t.form_lbl_name }}" required helper="{{ t.form_help_name }}"></gds-input>
<gds-select label="{{ t.form_lbl_method }}" [options]="methods"></gds-select>
<gds-toggle [(ngModel)]="notify">{{ t.form_switch }}</gds-toggle>

{{ r.code }}

{{ r.amount }}

{{ t.tbl_details }}▼

{{ r.ref }}

{{ r.fee }}

{{ r.idnp }}

import { GdsTableComponent } from '@esempla/gds-angular';

<gds-table [columns]="cols" [rows]="payments"
           searchable [searchKeys]="['name','payer','code']"
           [filters]="{ key: 'status', options: statusFilters }"
           expandable="accordion"
           (rowExpand)="loadDetail($event)">
  <ng-template #expanded let-row>…meta + {{ t.acc_receipt }}…</ng-template>
</gds-table>

2,4M MDL

▲ 12% {{ t.card_kpi_delta }}

62%

2,9 TB / 4,7 TB · replicat 3 {{ t.card_accent_zones }}

{{ t.card_info_t }} {{ t.card_info_x }}

{{ t.card_warn_t }} {{ t.card_warn_x }}

<gds-kpi label="{{ t.card_kpi_label }}" value="2,4M MDL" delta="+12%"></gds-kpi>
<gds-tabs [tabs]="tabs" (change)="onTab($event)"></gds-tabs>
<gds-alert kind="info">{{ t.card_info_x }}</gds-alert>

{{ r.code }}

{{ t.tbl_details }} →

{{ dwSel.code }}

import { GdsDrawerComponent, GdsTabsComponent } from '@esempla/gds-angular';

<gds-drawer [open]="!!selected" (close)="selected = null">
  <gds-tabs [tabs]="['{{ t.tab1 }}','{{ t.tab2 }}','{{ t.dr_t3 }}']" (change)="tab = $event"></gds-tabs>
  ...
</gds-drawer>

{{ t.tpl1_name }}gds-template-dashboard{{ t.tpl1_used }}

{{ t.tpl2_name }}gds-template-service-form{{ t.tpl2_used }}

{{ t.tpl3_name }}gds-template-records{{ t.tpl3_used }}

GPay Core

2,4M MDL

▲ 12%

8.412

▲ 4%

{{ r.code }}

{{ r.amount }}

{{ t.tbl_details }} →

{{ dwSel.code }}

/* styles.css */
@import "@esempla/gds-core/gds-core.css";
:root { --gds-accent: var(--gds-accent-gpay); }

// transactions.component.ts
import { Component } from '@angular/core';
import { GdsSidenavComponent, GdsTableComponent, GdsDrawerComponent,
         GdsTabsComponent, GdsKpiComponent, GdsButtonComponent }
  from '@esempla/gds-angular';

@Component({
  standalone: true,
  selector: 'app-transactions',
  imports: [GdsSidenavComponent, GdsTableComponent, GdsDrawerComponent,
            GdsTabsComponent, GdsKpiComponent, GdsButtonComponent],
  templateUrl: './transactions.component.html',
})
export class TransactionsComponent {
  cols = ['name', 'amount', 'status'];
  rows = this.api.payments();
  selected: Payment | null = null;
  tab = 0;
}

<!-- transactions.component.html -->
<gds-sidenav [product]="{ name: 'GPay Core', abbr: 'P' }"
             [groups]="nav" [activeRoute]="router.url"
             (navigate)="router.navigateByUrl($event)"></gds-sidenav>

<main>
  <header>
    <h1>{{ t.tbl_demo_title }}</h1>
    <gds-button variant="primary" icon="plus">{{ t.tbl_new }}</gds-button>
  </header>

  <gds-kpi label="{{ t.card_kpi_label }}" value="2,4M MDL" delta="+12%"></gds-kpi>

  <gds-table [columns]="cols" [rows]="rows"
             searchable [searchKeys]="['name','payer','code']"
             [filters]="{ key: 'status', options: statusFilters }"
             (rowClick)="selected = $event"></gds-table>

  <gds-drawer [open]="!!selected" (close)="selected = null">
    <gds-tabs [tabs]="['{{ t.tab1 }}','{{ t.tab2 }}','{{ t.dr_t3 }}']"
              (change)="tab = $event"></gds-tabs>
  </gds-drawer>
</main>

1 · {{ t.imp_s1 }}

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

2 · {{ t.imp_s2 }}

/* styles.css */
@import "@esempla/gds-core/gds-core.css";

:root {
  --gds-accent: var(--gds-accent-gpay);  /* {{ t.imp_accent_cm }} */
}

3 · {{ t.imp_s3 }}

// app.module.ts
import { GdsModule } from '@esempla/gds-angular';

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

// template
<gds-button variant="primary" (click)="save()">{{ t.btn_primary }}</gds-button>

gds-core.css

README.md

@esempla/gds-angular

@esempla/gds-angular
├─ components/
│    gds-button · gds-badge · gds-input · gds-select · gds-toggle
│    gds-sidenav          ← {{ t.imp_tree_nav }}
│    gds-table            ← {{ t.imp_tree_table }}
│    gds-drawer · gds-tabs · gds-kpi · gds-alert
├─ templates/   gds-template-dashboard · -service-form · -records
├─ styles/      re-export @esempla/gds-core
└─ i18n/        ro.json · en.json

import { GdsTableComponent, GdsDrawerComponent, GdsSidenavComponent }
  from '@esempla/gds-angular';

@Component({
  standalone: true,
  imports: [GdsTableComponent, GdsDrawerComponent, GdsSidenavComponent],
  templateUrl: './payments.component.html'
})
export class PaymentsComponent {}

npm.esempla.systems

GitHub Packages

dist-tags

# .npmrc ({{ t.imp_npmrc_cm }})
@esempla:registry=https://npm.esempla.systems
//npm.esempla.systems/:_authToken=${ESEMPLA_NPM_TOKEN}

✓ {{ t.gov_do }}

·{{ d.x }}

✕ {{ t.gov_dont }}

·{{ d.x }}

design@esempla.systems

MUD · mud.egov.md

GDS · GStack & GPay

{{ t.mud_links }}:
mud.egov.md — Modelul Unitar de Design
npm · @egov-moldova/mud
eGov4Dev — {{ t.mud_link3 }}

</> {{ t.rail_title }} {{ railWLabel }}

{{ railCode }}

{{ t.hero_title }}

{{ t.principles_title }}

{{ t.eco_title }}

{{ t.how_title }}

{{ t.adv_title }}

{{ t.adv_cmp_t }}

{{ t.col_title }}

{{ t.col_neutrals }}

{{ t.col_accents }}

{{ t.col_semantic }}

{{ t.type_title }}

{{ t.sp_title }}

{{ t.sp_scale }}

{{ t.sp_radius }}

{{ t.sp_layout }}

{{ t.nav_title }}

{{ t.btn_title }}

{{ t.badge_title }}

{{ t.form_title }}

{{ t.tbl_title }}

{{ t.card_title }}

{{ t.tabs_title }}

{{ t.dr_title }}

{{ t.tpl_title }}

{{ t.demo_title }}

{{ t.tbl_demo_title }}

{{ t.cons_title }}

{{ t.imp_title }}

1 · {{ t.imp_s1 }}

2 · {{ t.imp_s2 }}

3 · {{ t.imp_s3 }}

{{ t.imp_pkgs }}

{{ t.imp_struct_t }}

{{ t.imp_import_t }}

{{ t.imp_pub_t }}

{{ t.ver_title }}

{{ t.gov_title }}

{{ t.gov_contrib_t }}

{{ t.mud_title }}

{{ t.mud_map_t }}