feat: add Angular wrapper

angular.json

@@ -0,0 +1,41 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "src",
+  "cli": {
+    "cache": {
+      "path": "node_modules/.cache/angular"
+    }
+  },
+  "projects": {
+    "angular": {
+      "projectType": "library",
+      "root": "src/angular",
+      "sourceRoot": "src/angular",
+      "prefix": "sbb",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "project": "src/angular/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "src/angular/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "src/angular/tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:web-test-runner",
+          "options": {
+            "tsConfig": "src/angular/tsconfig.spec.json"
+          }
+        }
+      }
+    }
+  }
+}

eslint.config.js

@@ -66,6 +66,23 @@ export default [
       'lyne/test-describe-title-rule': 'off',
     },
   },
+  {
+    files: ['src/angular/**/*.ts', 'src/angular-experimental/**/*.ts'],
+    rules: {
+      'lyne/class-decorator-position-rule': 'off',
+      'lyne/decorator-order-rule': 'off',
+      'lyne/property-decorator-accessor-rule': 'off',
+      'lyne/property-type-rule': 'off',
+      'lyne/import-extension-rule': 'off',
+      'import-x/no-unresolved': 'off',
+    },
+  },
+  {
+    files: ['src/angular/core/**/*.ts', 'src/angular-experimental/core/**/*.ts'],
+    rules: {
+      'lyne/angular-generator-rule': 'off',
+    },
+  },
   {
     files: ['**/*.spec.ts'],
     rules: {

package.json

@@ -26,6 +26,7 @@
     "build:elements:development": "NODE_ENV=development vite build --mode development --config src/elements/vite.config.ts",
     "build:elements-experimental:production": "vite build --config src/elements-experimental/vite.config.ts",
     "build:elements-experimental:development": "NODE_ENV=development vite build --mode development --config src/elements-experimental/vite.config.ts",
+    "build:angular": "ng build angular",
     "build:react": "npm-run-all --sequential build:react:* build:react-experimental:*",
     "build:react:production": "vite build --config src/react/vite.config.ts",
     "build:react:development": "NODE_ENV=development vite build --mode development --config src/react/vite.config.ts",
@@ -54,6 +55,7 @@
     "lint:tsc:components-spec": "tsc --noEmit --project src/elements/tsconfig.spec.json",
     "lint:tsc:components-experimental": "tsc --noEmit --project src/elements-experimental/tsconfig.json",
     "lint:tsc:components-experimental-spec": "tsc --noEmit --project src/elements-experimental/tsconfig.spec.json",
+    "lint:tsc:angular": "tsc --noEmit --project src/angular/tsconfig.lib.json",
     "lint:tsc:visual-regression-app": "tsc --noEmit --project src/visual-regression-app/tsconfig.json",
     "start": "storybook dev -p 6006",
     "start:visual-regression-app": "vite --config src/visual-regression-app/vite.config.ts",
@@ -71,6 +73,16 @@
     "lit": "3.2.1"
   },
   "devDependencies": {
+    "@angular-devkit/build-angular": "19.0.1",
+    "@angular/cdk": "19.0.1",
+    "@angular/cli": "19.0.1",
+    "@angular/common": "19.0.1",
+    "@angular/compiler": "19.0.1",
+    "@angular/compiler-cli": "19.0.1",
+    "@angular/core": "19.0.1",
+    "@angular/forms": "19.0.1",
+    "@angular/platform-browser": "19.0.1",
+    "@angular/router": "19.0.1",
     "@commitlint/cli": "19.6.0",
     "@commitlint/config-conventional": "19.6.0",
     "@custom-elements-manifest/analyzer": "0.10.3",
@@ -125,13 +137,15 @@
     "lint-staged": "15.2.10",
     "lit-analyzer": "2.0.3",
     "madge": "8.0.0",
+    "ng-packagr": "19.0.1",
     "npm-run-all2": "7.0.1",
     "octokit": "4.0.2",
     "playwright": "1.47.2",
     "postcss": "8.4.49",
     "prettier": "3.4.1",
     "react": "18.3.1",
     "rollup-plugin-postcss-lit": "2.1.0",
+    "rxjs": "~7.8.0",
     "sass": "1.81.1",
     "sinon": "19.0.2",
     "storybook": "8.4.6",
@@ -145,7 +159,8 @@
     "typescript-eslint": "8.17.0",
     "urlpattern-polyfill": "10.0.0",
     "vite": "6.0.2",
-    "vite-plugin-dts": "4.3.0"
+    "vite-plugin-dts": "4.3.0",
+    "zone.js": "0.15.0"
   },
   "resolutions": {
     "@types/node": "20.17.9",

src/angular-experimental/journey-summary/index.ts

@@ -0,0 +1 @@
+export * from './journey-summary';

src/angular-experimental/journey-summary/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "index.ts"
+  }
+}

src/angular-experimental/pearl-chain-time/index.ts

@@ -0,0 +1 @@
+export * from './pearl-chain-time';

src/angular-experimental/pearl-chain-time/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "index.ts"
+  }
+}

src/angular-experimental/pearl-chain-vertical-item/index.ts

@@ -0,0 +1 @@
+export * from './pearl-chain-vertical-item';

src/angular-experimental/pearl-chain-vertical-item/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "index.ts"
+  }
+}

src/angular-experimental/pearl-chain-vertical/index.ts

@@ -0,0 +1 @@
+export * from './pearl-chain-vertical';

src/angular-experimental/pearl-chain-vertical/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "index.ts"
+  }
+}

src/angular-experimental/pearl-chain/index.ts

@@ -0,0 +1 @@
+export * from './pearl-chain';

src/angular-experimental/pearl-chain/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "index.ts"
+  }
+}

src/angular-experimental/timetable-duration/index.ts

@@ -0,0 +1 @@
+export * from './timetable-duration';

src/angular-experimental/timetable-duration/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "index.ts"
+  }
+}

src/angular-experimental/timetable-row/index.ts

@@ -0,0 +1 @@
+export * from './timetable-row';

src/angular-experimental/timetable-row/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "index.ts"
+  }
+}

src/angular/accordion/index.ts

@@ -0,0 +1 @@
+export * from './accordion';

src/angular/accordion/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "index.ts"
+  }
+}

src/angular/action-group/index.ts

@@ -0,0 +1 @@
+export * from './action-group';

src/angular/action-group/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "index.ts"
+  }
+}

src/angular/alert/alert-group/index.ts

@@ -0,0 +1 @@
+export * from './alert-group';

src/angular/alert/alert-group/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "index.ts"
+  }
+}

src/angular/alert/alert/index.ts

@@ -0,0 +1 @@
+export * from './alert';

src/angular/alert/alert/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "index.ts"
+  }
+}

src/angular/autocomplete-grid/autocomplete-grid-button/index.ts

@@ -0,0 +1 @@
+export * from './autocomplete-grid-button';

src/angular/autocomplete-grid/autocomplete-grid-button/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "index.ts"
+  }
+}

src/angular/autocomplete-grid/autocomplete-grid-cell/index.ts

@@ -0,0 +1 @@
+export * from './autocomplete-grid-cell';

src/angular/autocomplete-grid/autocomplete-grid-cell/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "index.ts"
+  }
+}

src/angular/autocomplete-grid/autocomplete-grid-optgroup/index.ts

@@ -0,0 +1 @@
+export * from './autocomplete-grid-optgroup';

src/angular/autocomplete-grid/autocomplete-grid-optgroup/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "index.ts"
+  }
+}

src/angular/autocomplete-grid/autocomplete-grid-option/index.ts

@@ -0,0 +1 @@
+export * from './autocomplete-grid-option';

src/angular/autocomplete-grid/autocomplete-grid-option/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "index.ts"
+  }
+}

src/angular/autocomplete-grid/autocomplete-grid-row/index.ts

@@ -0,0 +1 @@
+export * from './autocomplete-grid-row';

src/angular/autocomplete-grid/autocomplete-grid-row/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "index.ts"
+  }
+}

src/angular/autocomplete-grid/autocomplete-grid/index.ts

@@ -0,0 +1 @@
+export * from './autocomplete-grid';

src/angular/autocomplete-grid/autocomplete-grid/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "index.ts"
+  }
+}

src/angular/autocomplete/autocomplete-base-element.ts

@@ -0,0 +1,51 @@
+/* eslint-disable lyne/angular-generator-rule */
+import { ElementRef, inject, Input, NgZone } from '@angular/core';
+
+import { booleanAttribute } from '@sbb-esta/lyne-angular/core';
+import { SbbOpenCloseBaseElement } from '@sbb-esta/lyne-angular/core/base-elements/open-close-base-element';
+import { SbbNegativeMixin } from '@sbb-esta/lyne-angular/core/mixins/negative-mixin';
+
+export abstract class SbbAutocompleteBaseElement extends SbbNegativeMixin(SbbOpenCloseBaseElement) {
+  #element = inject(ElementRef<SbbAutocompleteBaseElement>);
+  #ngZone = inject(NgZone);
+
+  @Input()
+  public set origin(value: string | HTMLElement | null) {
+    this.#ngZone.runOutsideAngular(() => (this.#element.nativeElement.origin = value));
+  }
+  public get origin(): string | HTMLElement | null {
+    return this.#element.nativeElement.origin;
+  }
+
+  @Input()
+  public set trigger(value: string | HTMLElement | null) {
+    this.#ngZone.runOutsideAngular(() => (this.#element.nativeElement.trigger = value));
+  }
+  public get trigger(): string | HTMLElement | null {
+    return this.#element.nativeElement.trigger;
+  }
+
+  @Input({ alias: 'preserve-icon-space', transform: booleanAttribute })
+  public set preserveIconSpace(value: boolean) {
+    this.#ngZone.runOutsideAngular(() => (this.#element.nativeElement.preserveIconSpace = value));
+  }
+  public get preserveIconSpace(): boolean {
+    return this.#element.nativeElement.preserveIconSpace;
+  }
+
+  public get originElement(): HTMLElement {
+    return this.#element.nativeElement.originElement;
+  }
+
+  public get triggerElement(): HTMLInputElement | undefined {
+    return this.#element.nativeElement.triggerElement;
+  }
+
+  public open(): void {
+    return this.#element.nativeElement.open();
+  }
+
+  public close(): void {
+    return this.#element.nativeElement.close();
+  }
+}

src/angular/autocomplete/index.ts

@@ -0,0 +1 @@
+export * from './autocomplete';

src/angular/autocomplete/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "index.ts"
+  }
+}

src/angular/breadcrumb/breadcrumb-group/index.ts

@@ -0,0 +1 @@
+export * from './breadcrumb-group';

src/angular/breadcrumb/breadcrumb-group/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "index.ts"
+  }
+}

src/angular/breadcrumb/breadcrumb/index.ts

@@ -0,0 +1 @@
+export * from './breadcrumb';

src/angular/breadcrumb/breadcrumb/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "index.ts"
+  }
+}

src/angular/button/accent-button-link/accent-button-link.ts

@@ -0,0 +1,10 @@
+import { Directive } from '@angular/core';
+import '@sbb-esta/lyne-elements/button/accent-button-link.js';
+
+
+@Directive({
+  selector: 'sbb-accent-button-link',
+  standalone: true,
+})
+export class SbbAccentButtonLink extends SbbButtonCommonElementMixin(SbbDisabledInteractiveMixin(SbbDisabledMixin(SbbLinkBaseElement))) {
+}

src/angular/button/accent-button-link/index.ts

@@ -0,0 +1 @@
+export * from './accent-button-link';

src/angular/button/accent-button-link/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "index.ts"
+  }
+}

src/angular/button/accent-button-static/accent-button-static.ts

@@ -0,0 +1,10 @@
+import { Directive } from '@angular/core';
+import '@sbb-esta/lyne-elements/button/accent-button-static.js';
+
+
+@Directive({
+  selector: 'sbb-accent-button-static',
+  standalone: true,
+})
+export class SbbAccentButtonStatic extends SbbButtonCommonElementMixin(SbbDisabledMixin(SbbActionBaseElement)) {
+}

src/angular/button/accent-button-static/index.ts

@@ -0,0 +1 @@
+export * from './accent-button-static';

src/angular/button/accent-button-static/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "index.ts"
+  }
+}

src/angular/button/accent-button/accent-button.ts

@@ -0,0 +1,10 @@
+import { Directive } from '@angular/core';
+import '@sbb-esta/lyne-elements/button/accent-button.js';
+
+
+@Directive({
+  selector: 'sbb-accent-button',
+  standalone: true,
+})
+export class SbbAccentButton extends SbbButtonCommonElementMixin(SbbDisabledTabIndexActionMixin(SbbButtonBaseElement)) {
+}

src/angular/button/accent-button/index.ts

@@ -0,0 +1 @@
+export * from './accent-button';

src/angular/button/accent-button/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "index.ts"
+  }
+}

src/angular/button/button-link/index.ts

@@ -0,0 +1 @@
+export * from './button-link';