@aegov/designsystem-angular 0.2.25 → 4.0.0

package/README.md

@@ -1,64 +1,83 @@
-# ComponentLibrary
+# AEGOV Design System for Angular
 
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 22.0.0.
+Angular wrappers for the UAE Government Design System web components ([`@aegov/designsystem`](https://www.npmjs.com/package/@aegov/designsystem)): one standalone component per element, with typed inputs and outputs. Supports Angular 18 and later.
 
-## Code scaffolding
-
-Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+## Installation
 
 ```bash
-ng generate component component-name
+npm install @aegov/designsystem @aegov/designsystem-angular
 ```
 
-For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+**Tailwind CSS v4 is required in your project.** Add three imports to `src/styles.css`, in this order:
 
-```bash
-ng generate --help
+```css
+@import "tailwindcss";
+@import "@aegov/designsystem/base";
+@import "@aegov/designsystem/theme";
 ```
 
-## Building
-
-To build the library, run:
-
-```bash
-ng build component-library
+## Usage
+
+Import the wrappers a component uses. Each wrapper registers its own element, so there is nothing else to set up:
+
+```ts
+import { Component } from '@angular/core';
+import { AegovButton, AegovInput } from '@aegov/designsystem-angular';
+
+@Component({
+  selector: 'app-signup',
+  imports: [AegovButton, AegovInput],
+  template: `
+    <aegov-input fieldId="email" type="email" name="email" isRequired />
+    <aegov-button variant="primary" size="lg" (aegovButtonClick)="submit()">
+      Submit application
+    </aegov-button>
+  `,
+})
+export class SignupComponent {
+  submit() {}
+}
 ```
 
-This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
-
-### Publishing the Library
-
-Once the project is built, you can publish your library by following these steps:
+Inputs use the camelCase property names and are type-checked under `strictTemplates`. Boolean and number inputs also accept static attributes: `isRequired`, `isDisabled="false"`, `pages="5"`. Events are outputs named after the DOM event, such as `(aegovButtonClick)`.
 
-1. Navigate to the `dist` directory:
+### Global setup
 
-   ```bash
-   cd dist/component-library
-   ```
+Add `provideDesignSystem()` to the application's providers to run the design system's global script, which creates the toast live region and `window.aegovToast`. It also registers every `aegov-*` element, including ones you render without importing their wrapper. It loads the design system's lazy loader when the application starts. It is exported only from the `@aegov/designsystem-angular/provider` entry point, so an application that doesn't use it ships none of the loader's files.
 
-2. Run the `npm publish` command to publish your library to the npm registry:
-   ```bash
-   npm publish
-   ```
+```ts
+// app.config.ts
+import { ApplicationConfig } from '@angular/core';
+import { provideDesignSystem } from '@aegov/designsystem-angular/provider';
 
-## Running unit tests
-
-To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
-
-```bash
-ng test
+export const appConfig: ApplicationConfig = {
+  providers: [
+    // ...your existing providers
+    provideDesignSystem(),
+  ],
+};
 ```
 
-## Running end-to-end tests
+### NgModule applications
 
-For end-to-end (e2e) testing, run:
+`DesignSystemModule` re-exports every wrapper and has no providers. Add `provideDesignSystem()` to the root module for the global setup:
 
-```bash
-ng e2e
-```
+```ts
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { DesignSystemModule } from '@aegov/designsystem-angular';
+import { provideDesignSystem } from '@aegov/designsystem-angular/provider';
+import { AppComponent } from './app.component';
 
-Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+@NgModule({
+  declarations: [AppComponent],
+  imports: [BrowserModule, DesignSystemModule],
+  providers: [provideDesignSystem()],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
 
-## Additional Resources
+## Documentation
 
-For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+The full guide, including server-side rendering and every component's API, is *Using with Angular* on the documentation site: [designsystem.gov.ae](https://designsystem.gov.ae).

package/fesm2022/aegov-designsystem-angular-provider.mjs

@@ -0,0 +1,36 @@
+import { makeEnvironmentProviders, APP_INITIALIZER } from '@angular/core';
+
+/**
+ * Registers every `aegov-*` element through the lazy loader and runs the design
+ * system's global script (toast live region, `window.aegovToast`).
+ *
+ * Add it to the application's providers (`bootstrapApplication`, or the root
+ * NgModule's `providers`). It must be an application-level provider: Angular only
+ * runs `APP_INITIALIZER` from the root environment injector.
+ *
+ * The loader is imported dynamically so apps that never call this function don't
+ * bundle it (the loader is a side-effect module). It lives in this secondary entry
+ * point because a bundler emits the loader's lazy chunks for any `import()` in a
+ * module it includes, even inside a function the app never calls: an app that
+ * imports only wrappers from `@aegov/designsystem-angular` would otherwise ship
+ * ~70 unused chunk files.
+ *
+ * This is what `provideAppInitializer()` expands to; the token form is used so the
+ * package keeps working on Angular 18, which has no `provideAppInitializer()`.
+ */
+function provideDesignSystem() {
+    return makeEnvironmentProviders([
+        {
+            provide: APP_INITIALIZER,
+            multi: true,
+            useValue: () => import('@aegov/designsystem/loader').then((loader) => loader.defineCustomElements()),
+        },
+    ]);
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { provideDesignSystem };
+//# sourceMappingURL=aegov-designsystem-angular-provider.mjs.map

package/fesm2022/aegov-designsystem-angular-provider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"aegov-designsystem-angular-provider.mjs","sources":["../../../projects/component-library/provider/public-api.ts","../../../projects/component-library/provider/aegov-designsystem-angular-provider.ts"],"sourcesContent":["import { APP_INITIALIZER, EnvironmentProviders, makeEnvironmentProviders } from '@angular/core';\n\n/**\n * Registers every `aegov-*` element through the lazy loader and runs the design\n * system's global script (toast live region, `window.aegovToast`).\n *\n * Add it to the application's providers (`bootstrapApplication`, or the root\n * NgModule's `providers`). It must be an application-level provider: Angular only\n * runs `APP_INITIALIZER` from the root environment injector.\n *\n * The loader is imported dynamically so apps that never call this function don't\n * bundle it (the loader is a side-effect module). It lives in this secondary entry\n * point because a bundler emits the loader's lazy chunks for any `import()` in a\n * module it includes, even inside a function the app never calls: an app that\n * imports only wrappers from `@aegov/designsystem-angular` would otherwise ship\n * ~70 unused chunk files.\n *\n * This is what `provideAppInitializer()` expands to; the token form is used so the\n * package keeps working on Angular 18, which has no `provideAppInitializer()`.\n */\nexport function provideDesignSystem(): EnvironmentProviders {\n  return makeEnvironmentProviders([\n    {\n      provide: APP_INITIALIZER,\n      multi: true,\n      useValue: () => import('@aegov/designsystem/loader').then((loader) => loader.defineCustomElements()),\n    },\n  ]);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;AAEA;;;;;;;;;;;;;;;;;AAiBG;SACa,mBAAmB,GAAA;AACjC,IAAA,OAAO,wBAAwB,CAAC;AAC9B,QAAA;AACE,YAAA,OAAO,EAAE,eAAe;AACxB,YAAA,KAAK,EAAE,IAAI;YACX,QAAQ,EAAE,MAAM,OAAO,4BAA4B,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,oBAAoB,EAAE,CAAC;AACrG,SAAA;AACF,KAAA,CAAC;AACJ;;AC5BA;;AAEG;;;;"}