Angular native wrappers - #3933 by GCHQDev01001010 · Pull Request #4206 · mi6/ic-ui-kit

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.

GCHQ-Developer-112

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

.husky/pre-commit

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

as discussed at the meeting last week, this is a separate folder that gets added in due to the new dist output that is required for the angular output target plugin. I put it in the git ignore to avoid adding excess bulk to the git repo and won't affect the web component source code.
I will return to this and see if there is a better way this can be approached, such that the source components for the angular build match those for the react one or the base web-component output, but our testing so far hasn't worked out.

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

packages/web-components/package.json

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


Why has this been added?

As per previous comment and the discussion held last week, this is the output of a new dist target that we need (with some specific packaging) as a source for the angular plugin to work it's magic turning the web components into the natively wrapped equivalents.
If there is another way to grab the components that doesn't require a new version being output I will try to find it and change this back, but currently this doesn't seem possible.

CONTRIBUTING.md

package.json

packages/angular-community-supported/README.md

GCHQ-Developer-299

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

packages/angular-community-supported/src/schematics/add/schema.json

GCHQ-Developer-112 · 2026-02-24T10:16:38Z

packages/angular-community-supported/standalone/src/directives/radio-value-accessor.ts

Will a directive need to be created for each event emitted by our components?

This is only for the ones that are highlighted in the value-accessors part of the config. They are generated in order to allow angular to treat the relevant components as form controls and to know where to find the value.

packages/angular-community-supported/README.md

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

… of angular in peer deps

…e angular packages for audit

…tencil

…wrappers to use ICDS v 3.19e

…sure builds output correctly updates the various exports and entry points to account for changes in how the latest version of the stencil output targets bundle the module

…r guidance to Contributing.md As per review comments, angular-community-supported project removed from pre-commit hook and CONTRIBUTING.md updated so that Angular guidance was separated out from the React section.

…g-add command & updates README Per PR comments, removed the description from the argument of the ng-add command as it is mildly redundant. Also updated the Angular package's README for readability and grammar

…date with 3.21.0

…ed files

GCHQDev01001010

Pushed with latest version and PR comments addressed

GCHQDev01001010 · 2026-03-05T14:14:13Z

packages/angular-community-supported/standalone/src/directives/radio-value-accessor.ts

This is only for the ones that are highlighted in the value-accessors part of the config. They are generated in order to allow angular to treat the relevant components as form controls and to know where to find the value.

GCHQDev01001010 · 2026-03-05T14:55:50Z

packages/web-components/package.json

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


As per previous comment and the discussion held last week, this is the output of a new dist target that we need (with some specific packaging) as a source for the angular plugin to work it's magic turning the web components into the natively wrapped equivalents.
If there is another way to grab the components that doesn't require a new version being output I will try to find it and change this back, but currently this doesn't seem possible.

GCHQDev01001010 · 2026-03-05T16:16:02Z

packages/web-components/.gitignore

 dist/
 www/
 loader/
+components/


as discussed at the meeting last week, this is a separate folder that gets added in due to the new dist output that is required for the angular output target plugin. I put it in the git ignore to avoid adding excess bulk to the git repo and won't affect the web component source code.
I will return to this and see if there is a better way this can be approached, such that the source components for the angular build match those for the react one or the base web-component output, but our testing so far hasn't worked out.

GCHQDev01001010 mentioned this pull request Jan 22, 2026

Angular native wrappers - #3933 #4180

Closed

23 tasks

GCHQ-Developer-112 reviewed Jan 23, 2026

View reviewed changes

GCHQ-Developer-299 requested changes Jan 26, 2026

View reviewed changes

GCHQDev01001010 force-pushed the 3933-angular-native-output branch 2 times, most recently from 227365d to cdf95c7 Compare February 11, 2026 13:02

GCHQ-Developer-112 reviewed Feb 24, 2026

View reviewed changes

GCHQDev01001010 added 20 commits March 6, 2026 11:24

ci(root): prepares repo for angular wrapper outputs

9ce9718

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

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

6b919d7

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

7ab2a69

feat(angular-community-supported): added support for previous version…

008aae4

… of angular in peer deps

ci(root): moved community packages into a separate build script

5950841

chore(angular-community-supported): swap docs warning style and updat…

6afe8d6

…e angular packages for audit

chore(root): acknowledges audit warning for angular dependency

a466db6

chore(web-components): update custom element stencil output for 3.19

9331521

build(root): add excpetion to eslint for angular files generated by s…

a16d897

…tencil

fix(root): fix lint command error

003ccf2

chore(angular-community-supported): addrsses PR comment & updates ng …

f4dca6f

…wrappers to use ICDS v 3.19e

chore(root): updates angular output target to latest

9e74138

feat(angular-community-supported): updates angular package.json to en…

a0997ba

…sure builds output correctly updates the various exports and entry points to account for changes in how the latest version of the stencil output targets bundle the module

feat(root): adds community build to build:all script

0d4a74d

docs(angular-community-supported): removes the description from the n…

cd43e17

…g-add command & updates README Per PR comments, removed the description from the argument of the ng-add command as it is mildly redundant. Also updated the Angular package's README for readability and grammar

chore(angular-community-supported): brings the angular package up to …

3f8f323

…date with 3.21.0

build(root): fixes lintstaged to properly exclude the angular generat…

122eaba

…ed files

GCHQDev01001010 force-pushed the 3933-angular-native-output branch from 63fe92f to 122eaba Compare March 6, 2026 14:23

GCHQDev01001010 commented Mar 6, 2026

View reviewed changes

GCHQDev01001010 requested review from GCHQ-Developer-112 and GCHQ-Developer-299 March 6, 2026 15:00

GCHQ-Developer-112 requested a review from a team March 12, 2026 11:50

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!

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!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

GCHQ-Developer-299 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

GCHQDev01001010 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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

GCHQDev01001010 commented Jan 22, 2026 •

edited

Loading