DÁP Design System import in Angular projects

[prisonmike01]

The guide recommend to import the system in the main.ts like
import 'dap-design-system/dist/dds.js';
https://services.gov.hu/design-system-dev/frameworks/angular

However, im getting this compile time error with that form:
Cannot find module or type declarations for side-effect import of 'dap-design-system/dist/dds.js'.

on:

"@angular/core": "^19.2.0",
"dap-design-system": "^0.58.2",
"typescript": "~5.7.2"

[mohojojo]

The guide's form import 'dap-design-system/dist/dds.js' doesn't work because that deep path isn't an exported subpath of the package.

In dap-design-system's package.json, the exports map only exposes dds.js through the root entry:

"exports": {
  ".": {
    "types": "./dist/dap-design-system.d.ts",
    "default": "./dist/dds.js"
  }
}

There's no "./dist/dds.js" subpath, so importing it directly gives you Cannot find module or type declarations for side-effect import… in TS (and The path "./dist/dds.js" is not exported from the bundler).

Fix: import the bare package specifier in main.ts:

import 'dap-design-system'

This resolves to the same dds.js file but with its type declarations. Confirmed working on dap-design-system@0.58.2 + @angular/core@^19.2.0 + typescript@~5.7.2 — see the Angular example.

The gov guide recommendation should be updated to drop the /dist/dds.js suffix.

[prisonmike01]

Thanks for quick response!

Here is related issue about tree shake import.
Can't import any component alone.

main.ts

import { DapDSButton } from 'dap-design-system/components'

if (!customElements.get('dap-ds-button')) {
  customElements.define('dap-ds-button', DapDSButton);
}

will result in 1.5MB raw size.

npx ng build --configuration production --stats-json

npm notice run nea-ext-frontend@0.0.0 npx
npm notice run ng build --configuration production --stats-json
Initial chunk files   | Names                   |  Raw size | Estimated transfer size
main-AANJCYB6.js      | main                    |   1.16 MB |               169.82 kB
styles-R6CCTXCY.css   | styles                  | 143.43 kB |                13.88 kB
chunk-MUAD6BKB.js     | -                       | 133.98 kB |                39.76 kB
chunk-HQHA26PV.js     | -                       |  90.08 kB |                22.70 kB
polyfills-5CFQRCPP.js | polyfills               |  34.59 kB |                11.33 kB

                      | Initial total           |   1.56 MB |               257.49 kB

Lazy chunk files      | Names                   |  Raw size | Estimated transfer size
chunk-V4HCCYS7.js     | not-found-component     |   2.19 kB |               871 bytes
chunk-JXZ4R72N.js     | fooldal-component       | 668 bytes |               668 bytes
chunk-FMIEDJ43.js     | meghirdetesek-component | 664 bytes |               664 bytes

if the main.ts is only:
import { DapDSButton } from 'dap-design-system/components'

will result in:
Initial total | 442.31 kB | 97.51 kB

but without any imported component.

Also tried with import { DapDSTypography } from 'dap-design-system/components';

Additionally, running the follwing script in the browser's console:

[
  'dap-ds-button',
  'dap-ds-input',
  'dap-ds-card',
  'dap-ds-modal',
].map(name => [name, !!customElements.get(name)]);
(4) [Array(2), Array(2), Array(2), Array(2)]0: (2) ['dap-ds-button', true]1: (2) ['dap-ds-input', true]2: (2) ['dap-ds-card', true]3: (2) ['dap-ds-modal', true]length: 4[[Prototype]]: Array(0)

proves, that more component is being bundeled, even they are not imported explicitly.
Was I doing something not according to the https://services.gov.hu/design-system-dev/webcomponents/button reference?

Thanks in advance!!

[mohojojo]

You did nothing wrong and this matches the reference docs. The /components entry is currently built as one 1.2MB chunk, so importing any single component pulls in all of them (each self-registers via a decorator). It's a packaging bug on our side — fix is to build with preserveModules so each component ships as its own file. Tracking it now.

[mohojojo]

Thanks for the detailed report — and you weren't doing anything wrong. This was a packaging bug in dap-design-system, not a mistake on your side.

Why it happened: every component self-registers (@CustomElement), and the build welded all of them into a single shared chunk behind the /components entry.
Because that chunk is side-effectful, referencing any one export (DapDSButton) forced the bundler to keep the whole thing — which is why your bundle jumped ~442 kB → ~1.5 MB and why customElements.get() reported button, input, card, modal all registered even though you only imported one. A named import from that barrel is fundamentally not tree-shakeable for self-registering web components.

What's fixed: we decoupled registration from the component class (the Shoelace model) and added per-component subpath exports. Each component is now its own module that registers only itself (plus the components it renders internally), so bundlers include only what you import.

New usage — import each component by its own subpath. A bare import registers it (guarded, no customElements.define boilerplate needed):

  // main.ts
  import 'dap-design-system/components/button'
  import 'dap-design-system/components/typography'

  // still supported: full registration (pulls everything, like before)
  import 'dap-design-system'

Results in our tests (production ng build):

• A single dap-ds-button per-path import ≈ 200 kB raw (vs the ~1.5 MB you saw), dap-ds-typography ≈ 40 kB.
• The full Angular example (10 real components incl. datatable + datepicker) dropped from 1.56 MB → ~890 kB, and components now correctly bundle the icons/sub-components they render.

The import 'dap-design-system' form still works unchanged for anyone who wants everything registered, so this is backward-compatible.

This lands in an upcoming release 0.61.0 — and the docs/gov guide are being updated to show the per-component import pattern.

[prisonmike01]

Maybe there is another issue: can't override DÁP DDS Link component's (https://services.gov.hu/design-system-dev/webcomponents/link#) CSS Custom Properties.

Template

<dap-ds-link href="..." target="_blank" target-blank-text="..." bold>Az árverés részletes szabályai itt olvashatóak.</dap-ds-link>

SCSS

dap-ds-link {
  --dds-link-color: red;
}

has no effects, while

dap-ds-link::part(base) {
  color: red;
}

has.

Could it be that the documentation is not aligned with the current implementation?

Thanks in advance, as always.

[mohojojo]

You have to use the varian specific css vars, based on what variant you use with the link, default is variant="brand":

--dds-link-neutral-color
--dds-link-brand-color
--dds-link-inverted-color
--dds-link-disabled-color
--dds-link-warning-color

[prisonmike01]

Thanks a lot!

I would like to have another question.

Would it be possible for dap-ds-sidenav-item to support target, rel, and target-blank-text attributes like dap-ds-link does?

Thanks again and have good day at work!

[mohojojo]

Added in v.0.61.4