@rijkshuisstijl-community/components-angular 1.0.0 → 1.2.0

package/README.md

@@ -8,3 +8,58 @@ _Dit project wordt **niet** gesteund door het Ministerie van Algemene Zaken._
 centrale overheid van Nederland.**
 
 Deze package is onderdeel van het [Rijkshuisstijl Community](../../README.md) project.
+
+## Aan de slag met Angular-componenten
+
+Om de Angular-componenten van de Rijkshuisstijl-community te gebruiken, installeer je het [components-angular npm package](https://www.npmjs.com/package/@rijkshuisstijl-community/components-angular).
+
+```bash
+npm install --save-dev @rijkshuisstijl-community/components-angular
+```
+
+Dit installeert de Angular-componenten. Om deze componenten te gebruiken, kun je ze importeren in jouw app.
+
+```ts
+import { ButtonComponent } from '@rijkshuisstijl-community/components-angular';
+
+@Component({
+  selector: 'app-root',
+  imports: [ButtonComponent],
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.css',
+})
+export class AppComponent {
+  title = 'angular-test';
+}
+```
+
+### Thema toepassen
+
+De Angular-componenten hebben geen eigen styling. Om de Rijkshuisstijl aan je project toe te voegen, installeer je het [design-tokens npm package](https://www.npmjs.com/package/@rijkshuisstijl-community/design-tokens) en het [components-css npm package](https://www.npmjs.com/package/@rijkshuisstijl-community/components-css).
+
+```bash
+npm install --save-dev @rijkshuisstijl-community/design-tokens
+npm install --save-dev @rijkshuisstijl-community/components-css
+```
+
+Deze pakketten bevat de CSS-variabelen van het design systeem en de CSS-classes die de componenten aan de variabelen koppelen. Importeer het `index.css`-bestand uit de `dist` mappen van de pakketten, en omring het deel van je applicatie waar je het thema wilt toepassen met het Rijkshuisstijl-thema: `rhc-theme`.
+
+```ts
+import { Component } from '@angular/core';
+import { ButtonComponent } from '@rijkshuisstijl-community/components-angular';
+import '@rijkshuisstijl-community/design-tokens/dist/index.css'; // design tokens importeren
+import '@rijkshuisstijl-community/components-css/dist/index.css'; // css importeren
+
+@Component({
+  selector: 'app-root',
+  imports: [ButtonComponent],
+  template: `
+    <main class="main" class="rhc-theme">
+      <button rhc-button [appearance]="'primary-action'" [disabled]="false">hello world</button>
+    </main>
+  `,
+})
+export class AppComponent {}
+```
+
+Bekijk de [packages/font/README.md](https://github.com/nl-design-system/rijkshuisstijl-community/blob/main/packages/font/README.md) voor de meerdere manieren om de lettertypen te installeren voor jouw project.

package/dist/README.md

@@ -8,3 +8,58 @@ _Dit project wordt **niet** gesteund door het Ministerie van Algemene Zaken._
 centrale overheid van Nederland.**
 
 Deze package is onderdeel van het [Rijkshuisstijl Community](../../README.md) project.
+
+## Aan de slag met Angular-componenten
+
+Om de Angular-componenten van de Rijkshuisstijl-community te gebruiken, installeer je het [components-angular npm package](https://www.npmjs.com/package/@rijkshuisstijl-community/components-angular).
+
+```bash
+npm install --save-dev @rijkshuisstijl-community/components-angular
+```
+
+Dit installeert de Angular-componenten. Om deze componenten te gebruiken, kun je ze importeren in jouw app.
+
+```ts
+import { ButtonComponent } from '@rijkshuisstijl-community/components-angular';
+
+@Component({
+  selector: 'app-root',
+  imports: [ButtonComponent],
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.css',
+})
+export class AppComponent {
+  title = 'angular-test';
+}
+```
+
+### Thema toepassen
+
+De Angular-componenten hebben geen eigen styling. Om de Rijkshuisstijl aan je project toe te voegen, installeer je het [design-tokens npm package](https://www.npmjs.com/package/@rijkshuisstijl-community/design-tokens) en het [components-css npm package](https://www.npmjs.com/package/@rijkshuisstijl-community/components-css).
+
+```bash
+npm install --save-dev @rijkshuisstijl-community/design-tokens
+npm install --save-dev @rijkshuisstijl-community/components-css
+```
+
+Deze pakketten bevat de CSS-variabelen van het design systeem en de CSS-classes die de componenten aan de variabelen koppelen. Importeer het `index.css`-bestand uit de `dist` mappen van de pakketten, en omring het deel van je applicatie waar je het thema wilt toepassen met het Rijkshuisstijl-thema: `rhc-theme`.
+
+```ts
+import { Component } from '@angular/core';
+import { ButtonComponent } from '@rijkshuisstijl-community/components-angular';
+import '@rijkshuisstijl-community/design-tokens/dist/index.css'; // design tokens importeren
+import '@rijkshuisstijl-community/components-css/dist/index.css'; // css importeren
+
+@Component({
+  selector: 'app-root',
+  imports: [ButtonComponent],
+  template: `
+    <main class="main" class="rhc-theme">
+      <button rhc-button [appearance]="'primary-action'" [disabled]="false">hello world</button>
+    </main>
+  `,
+})
+export class AppComponent {}
+```
+
+Bekijk de [packages/font/README.md](https://github.com/nl-design-system/rijkshuisstijl-community/blob/main/packages/font/README.md) voor de meerdere manieren om de lettertypen te installeren voor jouw project.

package/dist/button/button.component.d.ts

@@ -2,7 +2,6 @@ import * as i0 from "@angular/core";
 export declare class ButtonComponent {
     appearance?: '' | 'primary-action' | 'secondary-action' | 'subtle';
     disabled?: boolean;
-    computedClasses: () => string;
     static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "rhc-button", never, { "appearance": { "alias": "appearance"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "button[rhc-button]", never, { "appearance": { "alias": "appearance"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, ["*"], true, never>;
 }

package/dist/column-layout/column-layout.component.d.ts

@@ -0,0 +1,6 @@
+import * as i0 from "@angular/core";
+export declare class ColumnLayoutComponent {
+    rule?: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ColumnLayoutComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ColumnLayoutComponent, "rhc-column-layout", never, { "rule": { "alias": "rule"; "required": false; }; }, {}, never, ["*"], true, never>;
+}

package/dist/data-summary/data-summary.component.d.ts

@@ -0,0 +1,6 @@
+import * as i0 from "@angular/core";
+export declare class DataSummaryComponent {
+    appearance: 'Column' | 'Row';
+    static ɵfac: i0.ɵɵFactoryDeclaration<DataSummaryComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DataSummaryComponent, "rhc-data-summary", never, { "appearance": { "alias": "appearance"; "required": false; }; }, {}, never, ["*"], true, never>;
+}

package/dist/data-summary-item/data-summary-item.component.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+export declare class DataSummaryItemComponent {
+    key: string;
+    value: string;
+    href?: string;
+    target?: '_self' | '_blank' | '_parent' | '_top' | '_unfencedTop';
+    actionLabel?: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DataSummaryItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DataSummaryItemComponent, "div[rhc-data-summary-item]", never, { "key": { "alias": "key"; "required": false; }; "value": { "alias": "value"; "required": false; }; "href": { "alias": "href"; "required": false; }; "target": { "alias": "target"; "required": false; }; "actionLabel": { "alias": "actionLabel"; "required": false; }; }, {}, never, ["*"], true, never>;
+}