Angular native wrappers - #3933 #4206

GCHQDev01001010 · 2026-01-22T12:59:33Z

Summary of the changes

Set up new output targets in the stencil config to output native angular wrapper components in a similar vein to the react components. Versions have been included that will allow the integrating developers to import the components as standalone items one-by-one at need or as a whole module. This also required the addition/alteration of the custom-elements-dist output to create an internal package for the web-components that the angular output plugin could use.

The package is included in the pack all script and other checks. Also includes an Angular schematic in the package so users can install simply with "ng add".

Documentation has been updated to indicate installation and useage of the new package and components and to provide clarity that this is a community-developed and supported addition as per the ICDS team's request.

(This is a rebuild of #4180 )

Related issue

closes #3933
& ic-design-system 850

Checklist

General

Changes to docs package checked and committed.
All acceptance criteria reviewed and met.

Testing

Relevant unit tests and visual regression tests added.
Visual testing against Figma component specification completed.
[-] Playground stories in React Storybook up to date, with any prop changes and additions addressed. - not needed, see 850 issue comments
[-] Compare performance of modified components against develop using Performance addon in React Storybook. - not needed, see 850 issue comments

Accessibility

Accessibility Insights FastPass performed.
A11y unit test added and yields no issues.
[-] A11y plug-in on Storybook yields no issues. - not including Storybook
Manual screen reader testing performed using NVDA and VoiceOver.
Manual keyboard testing for keyboard controls and logical focus order.
Correct roles used and ARIA attributes used correctly where required.
Logical heading structure is maintained, and the HTML elements used for headings can be changed to fit within the wider page structure.

Resize/zoom behaviour

Page can be zoomed to 400% with no loss of content.
Screen magnifier used with no issues.
Text resized to 200% with no loss of content.
Text spacing increased as per the WCAG 1.4.12 success criterion with no loss of content.

System modes

Browser setting 'prefers reduced motion' tested. No animations or motion visible whilst this setting is on.
Windows High Contrast mode tested with no loss of content.
System light and dark mode tested with no loss of content.
Browser support tested (Chrome, Safari, Firefox and Edge).

Testing content extremes

Min/max content examples tested with no loss of content or overflow.
All prop combinations work without issue.
Tested for FOUC (Flash of Unstyled Content) in both SSR (Server-Side Rendering) and SSG (Static Site Generation) settings.
Controlled and uncontrolled input components tested.
Props/slots can be updated after initial render.

Adds references to the upcoming Angular packages to the build, commit and ci files. Also tweaks the contributing documentation slightly. re mi6#3933

…ive components Adds the angularOutputTarget plugin for stencil and includes relevant config so that the natively wrapped ICDS elements are output as a package. Also adds a pure output for the web components as an intermediary packaged within @ukic/web-components for the Angular plugin to make use of. ref mi6#3933

…ing the angular native wrappers Provides the underlying folders structure, npm config, scripts and such for publishing the Angular package. Also includes the 3.18.0 output from the stencil generator. closes mi6#3933

GCHQ-Developer-112

This is just an initial review, I will review this again most likely some time next week

GCHQ-Developer-112 · 2026-01-23T09:36:11Z

.husky/pre-commit

+cd ../angular-community-supported
+npm i --package-lock-only


I'm worried that this will affect our usual releases

GCHQ-Developer-112 · 2026-01-23T09:44:07Z

packages/web-components/.gitignore

 dist/
 www/
 loader/
+components/


This will mean changes to our components will not be committed - please remove this line

GCHQ-Developer-112 · 2026-01-23T09:44:43Z

packages/web-components/package.json

    "dist/",
    "loader/",
    "hydrate/",
+    "components/",


Why has this been added?

GCHQ-Developer-112 · 2026-01-23T09:47:53Z

CONTRIBUTING.md

+### React & Angular

-Stencil provides [plugins](https://stenciljs.com/docs/overview), which outputs wrapped framework agnostic components. During the build stage, React components are dynamically generated and are accessible from the React package.
+Stencil provides [plugins](https://stenciljs.com/docs/overview), which outputs wrapped framework agnostic components. During the build stage, Native components for React and Angular are dynamically generated and are accessible from their respective packages.


Please move the information about Angular into a separate heading and explain that this is a community supported package and what that means for the contributions

GCHQ-Developer-112 · 2026-01-23T09:49:55Z

package.json

    "audit-expiry": "node check-audit-expiry.mjs",
    "bootstrap": "lerna bootstrap",
-    "build": "lerna run build --scope=@ukic/web-components --scope=@ukic/fonts --scope=@ukic/docs --stream  && lerna run build --scope=@ukic/react --stream",
+    "build": "lerna run build --scope=@ukic/web-components --scope=@ukic/fonts --scope=@ukic/docs --stream  && lerna run build --scope=@ukic/react --stream && lerna run build --scope=@ukic/angular-community-supported --stream",


Please create a separate build command for Angular and ensure that the build all command excludes angular

GCHQ-Developer-112 · 2026-01-23T09:53:24Z

packages/angular-community-supported/README.md

+
+This is a joint project led by [MI6](https://www.sis.gov.uk), working with [GCHQ](https://www.gchq.gov.uk), [MI5](https://www.mi5.gov.uk) and [HMGCC](https://www.hmgcc.gov.uk) (our national security partner).
+
+<div style="border: 1px red solid; border-radius: 3px; background-color: red; color: white; padding:8px">


This styling doesn't seem to show up

Suggested change

<div style="border: 1px red solid; border-radius: 3px; background-color: red; color: white; padding:8px">

GCHQ-Developer-112 · 2026-01-23T09:53:57Z

packages/angular-community-supported/README.md

+<div style="border: 1px red solid; border-radius: 3px; background-color: red; color: white; padding:8px">
+
+### Support Info
+**This Angular-native package is not maintained or supported by the core ICDS team and is entirely community-developed**


Suggested change

**This Angular-native package is not maintained or supported by the core ICDS team and is entirely community-developed**

> [!WARNING]

> This Angular-native package is not maintained or supported by the core ICDS team and is entirely community-developed

GCHQ-Developer-112 · 2026-01-23T09:54:11Z

packages/angular-community-supported/README.md

+### Support Info
+**This Angular-native package is not maintained or supported by the core ICDS team and is entirely community-developed**
+
+</div>


Suggested change

</div>

GCHQ-Developer-299

Will review again when @GCHQ-Developer-112 's comments have been addressed

GCHQDev01001010 added 3 commits January 22, 2026 12:00

ci(root): prepares repo for angular wrapper outputs

da950a2

Adds references to the upcoming Angular packages to the build, commit and ci files. Also tweaks the contributing documentation slightly. re mi6#3933

GCHQDev01001010 mentioned this pull request Jan 22, 2026

Angular native wrappers - #3933 #4180

Closed

23 tasks

GCHQDev01001010 added 2 commits January 22, 2026 13:33

chore(root): adds angular prettier ignore for generated files

220eaed

style(angular-community-supported): applies prettier fixes

11e84d9

GCHQ-Developer-112 reviewed Jan 23, 2026

View reviewed changes

GCHQ-Developer-299 requested changes Jan 26, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Angular native wrappers - #3933 #4206

Angular native wrappers - #3933 #4206

Uh oh!

GCHQDev01001010 commented Jan 22, 2026 •

edited

Loading

Uh oh!

GCHQ-Developer-112 left a comment

Uh oh!

GCHQ-Developer-112 Jan 23, 2026

Uh oh!

GCHQ-Developer-112 Jan 23, 2026

Uh oh!

GCHQ-Developer-112 Jan 23, 2026

Uh oh!

GCHQ-Developer-112 Jan 23, 2026

Uh oh!

GCHQ-Developer-112 Jan 23, 2026

Uh oh!

GCHQ-Developer-112 Jan 23, 2026

Uh oh!

GCHQ-Developer-112 Jan 23, 2026

Uh oh!

GCHQ-Developer-112 Jan 23, 2026

Uh oh!

GCHQ-Developer-299 left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants


		This is a joint project led by [MI6](https://www.sis.gov.uk), working with [GCHQ](https://www.gchq.gov.uk), [MI5](https://www.mi5.gov.uk) and [HMGCC](https://www.hmgcc.gov.uk) (our national security partner).

		<div style="border: 1px red solid; border-radius: 3px; background-color: red; color: white; padding:8px">

	This Angular-native package is not maintained or supported by the core ICDS team and is entirely community-developed
	> [!WARNING]
	> This Angular-native package is not maintained or supported by the core ICDS team and is entirely community-developed

Angular native wrappers - #3933 #4206

Are you sure you want to change the base?

Angular native wrappers - #3933 #4206

Uh oh!

Conversation

GCHQDev01001010 commented Jan 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary of the changes

Related issue

Checklist

General

Testing

Accessibility

Resize/zoom behaviour

System modes

Testing content extremes

Uh oh!

GCHQ-Developer-112 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

GCHQ-Developer-299 left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

GCHQDev01001010 commented Jan 22, 2026 •

edited

Loading