@rijkshuisstijl-community/components-angular 1.0.0 → 1.1.0

package/dist/figure/figure.component.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+export declare class FigureComponent {
+    borderEndEndRadius?: number;
+    borderEndStartRadius?: number;
+    borderStartEndRadius?: number;
+    borderStartStartRadius?: number;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FigureComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FigureComponent, "figure[rhc-figure]", never, { "borderEndEndRadius": { "alias": "borderEndEndRadius"; "required": false; }; "borderEndStartRadius": { "alias": "borderEndStartRadius"; "required": false; }; "borderStartEndRadius": { "alias": "borderStartEndRadius"; "required": false; }; "borderStartStartRadius": { "alias": "borderStartStartRadius"; "required": false; }; }, {}, never, ["*"], true, never>;
+}

package/dist/figure-caption/figure-caption.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class FigureCaptionComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<FigureCaptionComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FigureCaptionComponent, "figcaption[rhc-figure-caption]", never, {}, {}, never, ["*"], true, never>;
+}

package/dist/form-field/form-field.component.d.ts

@@ -0,0 +1,12 @@
+import * as i0 from "@angular/core";
+export declare class FormFieldComponent {
+    type?: 'checkbox' | 'radio' | 'text';
+    class?: string;
+    invalid?: boolean;
+    showInput?: boolean;
+    showLabel?: boolean;
+    showDescription?: boolean;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<FormFieldComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FormFieldComponent, "rhc-form-field", never, { "type": { "alias": "type"; "required": false; }; "class": { "alias": "class"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "showInput": { "alias": "showInput"; "required": false; }; "showLabel": { "alias": "showLabel"; "required": false; }; "showDescription": { "alias": "showDescription"; "required": false; }; }, {}, never, ["[rhc-form-label]", "rhc-form-field-description", "rhc-form-field-error-message", "[rhc-text-input]", "*"], true, never>;
+}

package/dist/form-field-description/form-field-description.component.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+export declare class FormFieldDescriptionComponent {
+    invalid?: boolean;
+    valid?: boolean;
+    warning?: boolean;
+    class?: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FormFieldDescriptionComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FormFieldDescriptionComponent, "rhc-form-field-description", never, { "invalid": { "alias": "invalid"; "required": false; }; "valid": { "alias": "valid"; "required": false; }; "warning": { "alias": "warning"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
+}

package/dist/form-field-error-message/form-field-error-message.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class FormFieldErrorMessageComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<FormFieldErrorMessageComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FormFieldErrorMessageComponent, "rhc-form-field-error-message", never, {}, {}, never, ["*"], true, never>;
+}

package/dist/form-field-text-input/form-field-text-input.component.d.ts

@@ -0,0 +1,37 @@
+import { ControlValueAccessor } from '@angular/forms';
+import * as i0 from "@angular/core";
+export type TextInputTypes = 'date' | 'datetime-local' | 'email' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';
+export declare class FormFieldTextInputComponent implements ControlValueAccessor {
+    invalid?: boolean;
+    showDescription?: boolean;
+    label?: string;
+    errorMessage?: string;
+    description?: string;
+    status?: string;
+    required?: boolean;
+    readonly?: boolean;
+    dir?: 'auto' | 'ltr' | 'rtl';
+    name?: string;
+    autocomplete?: string;
+    placeholder?: string;
+    size?: number;
+    minLength?: number;
+    maxLength?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    type?: TextInputTypes;
+    inputId: string;
+    value: string;
+    disabled: boolean;
+    private onChange;
+    private onTouched;
+    onValueChange(event: Event): void;
+    markAsTouched(): void;
+    writeValue(value: string): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FormFieldTextInputComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FormFieldTextInputComponent, "rhc-form-field-text-input", never, { "invalid": { "alias": "invalid"; "required": false; }; "showDescription": { "alias": "showDescription"; "required": false; }; "label": { "alias": "label"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "description": { "alias": "description"; "required": false; }; "status": { "alias": "status"; "required": false; }; "required": { "alias": "required"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "dir": { "alias": "dir"; "required": false; }; "name": { "alias": "name"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "size": { "alias": "size"; "required": false; }; "minLength": { "alias": "minLength"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "step": { "alias": "step"; "required": false; }; "type": { "alias": "type"; "required": false; }; "inputId": { "alias": "inputId"; "required": true; }; }, {}, never, never, true, never>;
+}

package/dist/form-label/form-label.component.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+export declare class FormLabelComponent {
+    disabled?: boolean;
+    checked?: boolean;
+    type?: 'checkbox' | 'radio';
+    static ɵfac: i0.ɵɵFactoryDeclaration<FormLabelComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FormLabelComponent, "label[rhc-form-label]", never, { "disabled": { "alias": "disabled"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "type": { "alias": "type"; "required": false; }; }, {}, never, ["*"], true, never>;
+}

package/dist/image/image.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class ImageComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ImageComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ImageComponent, "img[rhc-image]", never, {}, {}, never, ["*"], true, never>;
+}

package/dist/link-list/link-list.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class LinkListComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<LinkListComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LinkListComponent, "rhc-link-list", never, {}, {}, never, ["*"], true, never>;
+}

package/dist/link-list-item/link-list-item.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class LinkListItemComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<LinkListItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LinkListItemComponent, "li[rhc-link-list-item]", never, {}, {}, never, ["*"], true, never>;
+}

package/dist/link-list-link/link-list-link.component.d.ts

@@ -0,0 +1,6 @@
+import * as i0 from "@angular/core";
+export declare class LinkListLinkComponent {
+    href: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LinkListLinkComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LinkListLinkComponent, "a[rhc-link-list-link]", never, { "href": { "alias": "href"; "required": true; }; }, {}, never, ["[icon]", "*"], true, never>;
+}

package/dist/logo/logo.component.d.ts

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+export declare class LogoComponent {
+    organisation: string;
+    subtitle?: string | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LogoComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LogoComponent, "figure[rhc-logo]", never, { "organisation": { "alias": "organisation"; "required": true; }; "subtitle": { "alias": "subtitle"; "required": false; }; }, {}, never, ["*"], true, never>;
+}

package/dist/navbar/navbar.component.d.ts

@@ -0,0 +1,6 @@
+import * as i0 from "@angular/core";
+export declare class NavbarComponent {
+    showEndItems?: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NavbarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NavbarComponent, "rhc-navbar", never, { "showEndItems": { "alias": "showEndItems"; "required": false; }; }, {}, never, ["[rhc-navbar-item][rhcHeadingItem]", "[rhc-navbar-item]:not([rhcEndItem])", "[rhc-navbar-item][rhcEndItem]", "*"], true, never>;
+}

package/dist/navbar-item/end-item.directive.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+/**
+ * Deze directive wordt gebruikt als "marker". Hiermee kunnen <li>'s gemarkeerd worden als endItem.
+ * Een endItem wordt aan het einde van de navbar geplaatst.
+ */
+export declare class EndItemDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<EndItemDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<EndItemDirective, "[rhcEndItem]", never, {}, {}, never, never, true, never>;
+}

package/dist/navbar-item/heading-item.directive.d.ts

@@ -0,0 +1,6 @@
+import * as i0 from "@angular/core";
+export declare class HeadingItemDirective {
+    className: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HeadingItemDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HeadingItemDirective, "[rhcHeadingItem]", never, {}, {}, never, never, true, never>;
+}

package/dist/navbar-item/navbar-item.component.d.ts

@@ -0,0 +1,6 @@
+import * as i0 from "@angular/core";
+export declare class NavbarItemComponent {
+    href: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NavbarItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NavbarItemComponent, "li[rhc-navbar-item]", never, { "href": { "alias": "href"; "required": true; }; }, {}, never, ["[icon]", "*"], true, never>;
+}

package/dist/public-api.d.ts

@@ -3,4 +3,24 @@ export * from './paragraph/paragraph.component';
 export * from './link/link.component';
 export * from './button/button.component';
 export * from './action-group/action-group.component';
+export * from './image/image.component';
+export * from './figure/figure.component';
+export * from './figure-caption/figure-caption.component';
 export * from './icon/public-api';
+export * from './unordered-list/unordered-list.component';
+export * from './unordered-list-item/unordered-list-item.component';
+export * from './column-layout/column-layout.component';
+export * from './logo/logo.component';
+export * from './form-field/form-field.component';
+export * from './form-field-description/form-field-description.component';
+export * from './form-field-error-message/form-field-error-message.component';
+export * from './form-field-text-input/form-field-text-input.component';
+export * from './form-label/form-label.component';
+export * from './text-input/text-input.component';
+export * from './link-list-link/link-list-link.component';
+export * from './link-list/link-list.component';
+export * from './link-list-item/link-list-item.component';
+export * from './navbar/navbar.component';
+export * from './navbar-item/navbar-item.component';
+export * from './navbar-item/heading-item.directive';
+export * from './navbar-item/end-item.directive';

package/dist/text-input/text-input.component.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+export declare class TextInputComponent {
+    disabled?: boolean | undefined;
+    invalid?: boolean | undefined;
+    required?: boolean | undefined;
+    readonly?: boolean | undefined;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TextInputComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TextInputComponent, "input[rhc-text-input]", never, { "disabled": { "alias": "disabled"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "required": { "alias": "required"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; }, {}, never, ["*"], true, never>;
+}

package/dist/unordered-list/unordered-list.component.d.ts

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

package/dist/unordered-list-item/unordered-list-item.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class UnorderedListItemComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<UnorderedListItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UnorderedListItemComponent, "li[rhc-unordered-list-item]", never, {}, {}, never, ["*"], true, never>;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rijkshuisstijl-community/components-angular",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "author": "Community for NL Design System",
   "description": "Angular component library for the Rijkshuisstijl Community repository, based on the NL Design System architecture",
   "license": "EUPL-1.2",
@@ -19,9 +19,10 @@
     "directory": "packages/components-angular"
   },
   "dependencies": {
-    "tslib": "2.3.0"
+    "tslib": "2.3.0",
+    "angular-tabler-icons": "3.26.0"
   },
-  "devDependencies": {
+  "peerDependencies": {
     "@angular-devkit/build-angular": "19.2.0",
     "@angular/cli": "19.2.3",
     "@angular/common": "19.2.0",
@@ -31,22 +32,29 @@
     "@angular/forms": "19.2.0",
     "@angular/platform-browser": "19.2.0",
     "@angular/platform-browser-dynamic": "19.2.0",
-    "@angular/router": "19.2.0",
+    "@angular/router": "19.2.0"
+  },
+  "devDependencies": {
     "@nl-design-system-candidate/heading-css": "1.0.0",
     "@nl-design-system-candidate/link-css": "1.0.1",
     "@nl-design-system-candidate/paragraph-css": "2.0.1",
     "@testing-library/jest-dom": "5.17.0",
     "@types/jest": "29.5.14",
     "@types/testing-library__jest-dom": "5.14.9",
-    "angular-tabler-icons": "3.26.0",
     "jest": "29.7.0",
     "jest-preset-angular": "14.5.4",
     "ng-packagr": "19.2.0",
     "rxjs": "7.8.0",
     "typescript": "5.7.2",
     "zone.js": "0.15.0",
-    "@rijkshuisstijl-community/components-css": "1.1.0"
+    "@rijkshuisstijl-community/components-css": "1.2.0"
   },
+  "files": [
+    "dist/"
+  ],
+  "main": "./dist/fesm2022/rijkshuisstijl-community-components-angular.mjs",
+  "module": "./dist/fesm2022/rijkshuisstijl-community-components-angular.mjs",
+  "types": "./dist/index.d.ts",
   "scripts": {
     "ng": "ng",
     "build": "ng build",

package/.eslintrc.json

@@ -1,5 +0,0 @@
-{
-  "env": {
-    "jest": true
-  }
-}

package/CHANGELOG.md

@@ -1,15 +0,0 @@
-# @rijkshuisstijl-community/components-angular
-
-## 1.0.0
-
-### Major Changes
-
-- 6deb00e: Initial release
-
-### Minor Changes
-
-- 5d9ff09: Added paragraph component
-- d6ef9eb: Added Link component
-- ffb7e8e: Added Angular Button component and installed the icons package
-- a961845: Added action-group Angular component
-- d369cf5: Added icon components in Angular

package/angular.json

@@ -1,37 +0,0 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "version": 1,
-  "newProjectRoot": "projects",
-  "projects": {
-    "components-angular": {
-      "projectType": "library",
-      "root": "",
-      "sourceRoot": "/src",
-      "prefix": "lib",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:ng-packagr",
-          "options": {
-            "project": "./ng-package.json"
-          },
-          "configurations": {
-            "production": {
-              "tsConfig": "./tsconfig.lib.prod.json"
-            },
-            "development": {
-              "tsConfig": "./tsconfig.lib.json"
-            }
-          },
-          "defaultConfiguration": "production"
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "tsConfig": "./tsconfig.spec.json",
-            "polyfills": ["zone.js", "zone.js/testing"]
-          }
-        }
-      }
-    }
-  }
-}

package/jest.config.js

@@ -1,5 +0,0 @@
-export default {
-  preset: 'jest-preset-angular',
-  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
-  globalSetup: 'jest-preset-angular/global-setup',
-};

package/ng-package.json

@@ -1,7 +0,0 @@
-{
-  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "dist",
-  "lib": {
-    "entryFile": "./src/public-api.ts"
-  }
-}

package/setup-jest.ts

@@ -1,3 +0,0 @@
-import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
-setupZoneTestEnv();
-import '@testing-library/jest-dom';

package/src/action-group/action-group.component.html

@@ -1,9 +0,0 @@
-<div
-  [class]="{
-    'utrecht-button-group': true,
-    'utrecht-button-group--column': direction === 'column',
-    'utrecht-button-group--row': direction === 'row',
-  }"
->
-  <ng-content />
-</div>

package/src/action-group/action-group.component.spec.ts

@@ -1,46 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { ActionGroupComponent } from './action-group.component';
-
-describe('ActionGroupComponent', () => {
-  let component: ActionGroupComponent;
-  let fixture: ComponentFixture<ActionGroupComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [ActionGroupComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(ActionGroupComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should have "utrecht-button-group--row" class by default', () => {
-    const divEl = fixture.debugElement.query(By.css('div')).nativeElement;
-    expect(divEl.classList).toContain('utrecht-button-group--row');
-    expect(divEl.classList).not.toContain('utrecht-button-group--column');
-  });
-
-  it('should apply "column" direction class when input is column', () => {
-    component.direction = 'column';
-    fixture.detectChanges();
-
-    const divEl = fixture.debugElement.query(By.css('div')).nativeElement;
-    expect(divEl.classList).toContain('utrecht-button-group--column');
-    expect(divEl.classList).not.toContain('utrecht-button-group--row');
-  });
-
-  it('should apply "row" direction class when input is row', () => {
-    component.direction = 'row';
-    fixture.detectChanges();
-
-    const divEl = fixture.debugElement.query(By.css('div')).nativeElement;
-    expect(divEl.classList).toContain('utrecht-button-group--row');
-    expect(divEl.classList).not.toContain('utrecht-button-group--column');
-  });
-});

package/src/action-group/action-group.component.ts

@@ -1,10 +0,0 @@
-import { Component, Input } from '@angular/core';
-
-@Component({
-  selector: 'rhc-action-group',
-  imports: [],
-  templateUrl: './action-group.component.html',
-})
-export class ActionGroupComponent {
-  @Input() direction: 'column' | 'row' = 'row';
-}

package/src/button/button.component.html

@@ -1,3 +0,0 @@
-<button class="{{ computedClasses() }}" [disabled]="disabled">
-  <ng-content></ng-content>
-</button>

package/src/button/button.component.spec.ts

@@ -1,41 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ButtonComponent } from './button.component';
-
-describe('ButtonComponent', () => {
-  let component: ButtonComponent;
-  let fixture: ComponentFixture<ButtonComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [ButtonComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(ButtonComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should render a native <button>', () => {
-    const button = fixture.nativeElement.querySelector('button');
-    expect(button).toBeTruthy();
-    expect(button.tagName.toLowerCase()).toBe('button');
-  });
-
-  it('should apply the primary-action class', () => {
-    component.appearance = 'primary-action';
-    fixture.detectChanges();
-    const button = fixture.nativeElement.querySelector('button');
-    expect(button.classList).toContain('utrecht-button--primary-action');
-  });
-
-  it('should be disabled when the disabled input is true', () => {
-    component.disabled = true;
-    fixture.detectChanges();
-    const button = fixture.nativeElement.querySelector('button');
-    expect(button.disabled).toBe(true);
-  });
-});

package/src/button/button.component.ts

@@ -1,14 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, Input } from '@angular/core';
-
-@Component({
-  selector: 'rhc-button',
-  imports: [CommonModule],
-  templateUrl: './button.component.html',
-})
-export class ButtonComponent {
-  @Input() appearance?: '' | 'primary-action' | 'secondary-action' | 'subtle' = '';
-  @Input() disabled?: boolean = false;
-
-  computedClasses = () => `utrecht-button utrecht-button--${this.appearance}`;
-}

package/src/heading/heading.component.css

@@ -1 +0,0 @@
-@import "@nl-design-system-candidate/heading-css/heading.css";

package/src/heading/heading.component.html

@@ -1,31 +0,0 @@
-@switch (level) {
-  @case (1) {
-    <h1 class="{{ computedClasses() }}">
-      <ng-container [ngTemplateOutlet]="content"></ng-container>
-    </h1>
-  }
-  @case (2) {
-    <h2 class="{{ computedClasses() }}">
-      <ng-container [ngTemplateOutlet]="content"></ng-container>
-    </h2>
-  }
-  @case (3) {
-    <h3 class="{{ computedClasses() }}">
-      <ng-container [ngTemplateOutlet]="content"></ng-container>
-    </h3>
-  }
-  @case (4) {
-    <h4 class="{{ computedClasses() }}">
-      <ng-container [ngTemplateOutlet]="content"></ng-container>
-    </h4>
-  }
-  @case (5) {
-    <h5 class="{{ computedClasses() }}">
-      <ng-container [ngTemplateOutlet]="content"></ng-container>
-    </h5>
-  }
-}
-
-<ng-template #content>
-  <ng-content></ng-content>
-</ng-template>

package/src/heading/heading.component.spec.ts

@@ -1,54 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { HeadingComponent, HeadingLevel } from './heading.component';
-
-describe('HeadingComponent', () => {
-  let component: HeadingComponent;
-  let fixture: ComponentFixture<HeadingComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [HeadingComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(HeadingComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should use the correct heading level', () => {
-    for (let level of [1, 2, 3, 4, 5] as HeadingLevel[]) {
-      component.level = level;
-      fixture.detectChanges();
-      const element = fixture.nativeElement.querySelector(`h${level}`);
-      expect(element).toBeTruthy();
-    }
-  });
-
-  it('should apply the css class according to appearance level', () => {
-    component.level = 5;
-    component.appearanceLevel = 2;
-    fixture.detectChanges();
-    const element = fixture.debugElement.query(By.css('.nl-heading--level-2'));
-    expect(element).toBeTruthy();
-  });
-
-  it('should contain the nl-heading class', () => {
-    component.level = 3;
-    fixture.detectChanges();
-    const element = fixture.debugElement.query(By.css('.nl-heading'));
-    expect(element).toBeTruthy();
-  });
-
-  it('should render rich text content', () => {
-    component.level = 1;
-    fixture.detectChanges();
-    const headingDebugElement = fixture.debugElement.query(By.css('.nl-heading--level-1'));
-    headingDebugElement.nativeElement.innerHTML = '<strong>Breaking</strong> news';
-    expect(fixture.nativeElement).toContainHTML('strong');
-  });
-});

package/src/heading/heading.component.ts

@@ -1,19 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, Input } from '@angular/core';
-
-export const headingLevels = [1, 2, 3, 4, 5] as const;
-export type HeadingLevel = (typeof headingLevels)[number];
-
-@Component({
-  selector: 'rhc-heading',
-  imports: [CommonModule],
-  templateUrl: './heading.component.html',
-  styleUrl: './heading.component.css',
-})
-export class HeadingComponent {
-  @Input({ required: true }) level!: HeadingLevel;
-  @Input() appearanceLevel?: HeadingLevel;
-
-  stylingLevel = () => this.appearanceLevel ?? this.level;
-  computedClasses = () => `nl-heading nl-heading--level-${this.stylingLevel()}`;
-}