add angular 17 sample (#5591)

packages/samples/angular/.editorconfig

@@ -0,0 +1,17 @@
+# https://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_style = tab
+max_line_length = 160
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+indent_style = space
+insert_final_newline = false
+trim_trailing_whitespace = false

packages/samples/angular/.eslintignore

@@ -0,0 +1 @@
+**/assets/**

packages/samples/angular/.eslintrc.js

@@ -0,0 +1 @@
+module.exports = require('@leanup/stack/.eslintrc');

packages/samples/angular/.gitignore

@@ -0,0 +1,53 @@
+# Next
+.next
+
+# GraphQL
+src/__generated__
+
+# IDE's
+.idea
+.project
+*.sublime-*
+*.code-*
+
+
+# Node.js
+node_modules
+npm-debug.log
+
+
+# Build and test tools
+*.zip
+/public/assets/
+/dist/
+
+# Cache
+.sass-cache
+.cache
+
+
+# Operating system
+.DS_Store
+Thumbs.db
+
+
+# Other
+/.husky
+/.reports
+.env
+.eslintcache
+*~
+*.log
+*.tgz
+
+assets/bundes/
+assets/codicons/
+assets/fontawesome-free/
+assets/icofont/
+assets/kreon/
+assets/material-icons/
+assets/material-symbols/
+assets/noto-sans/
+assets/roboto/
+assets/tabler-icons/
+assets/kolibri.ico

packages/samples/angular/.prettierignore

@@ -0,0 +1,4 @@
+**/assets/**
+*.feature
+*.sass
+*.scss

packages/samples/angular/.ts-prunerc.js

@@ -0,0 +1,4 @@
+// https://github.com/nadeesha/ts-prune
+https: module.exports = {
+	ignore: 'node_modules',
+};

packages/samples/angular/angular.json

@@ -0,0 +1,93 @@
+{
+	"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+	"version": 1,
+	"newProjectRoot": "projects",
+	"projects": {
+		"ng-dummy": {
+			"projectType": "application",
+			"schematics": {
+				"@schematics/angular:component": {
+					"style": "sass"
+				}
+			},
+			"root": "",
+			"sourceRoot": "src",
+			"prefix": "app",
+			"architect": {
+				"build": {
+					"builder": "@angular-devkit/build-angular:browser",
+					"options": {
+						"outputPath": "dist",
+						"index": "template.html",
+						"main": "src/main.ts",
+						"tsConfig": "tsconfig.app.json",
+						"aot": false,
+						"assets": ["src/assets"]
+					},
+					"configurations": {
+						"production": {
+							"optimization": true,
+							"outputHashing": "none",
+							"sourceMap": false,
+							"extractCss": true,
+							"namedChunks": false,
+							"aot": true,
+							"extractLicenses": true,
+							"vendorChunk": false,
+							"buildOptimizer": true
+						}
+					}
+				},
+				"serve": {
+					"builder": "@angular-devkit/build-angular:dev-server",
+					"options": {
+						"browserTarget": "ng-dummy:build"
+					},
+					"configurations": {
+						"production": {
+							"browserTarget": "ng-dummy:build:production"
+						}
+					}
+				},
+				"extract-i18n": {
+					"builder": "@angular-devkit/build-angular:extract-i18n",
+					"options": {
+						"browserTarget": "ng-dummy:build"
+					}
+				},
+				"test": {
+					"builder": "@angular-devkit/build-angular:karma",
+					"options": {
+						"main": "src/test.ts",
+						"polyfills": "src/polyfills.ts",
+						"tsConfig": "tsconfig.spec.json",
+						"karmaConfig": "karma.conf.js",
+						"assets": ["src/favicon.ico", "src/assets"],
+						"styles": ["src/styles.sass"],
+						"scripts": []
+					}
+				},
+				"lint": {
+					"builder": "@angular-devkit/build-angular:tslint",
+					"options": {
+						"tsConfig": ["tsconfig.app.json", "tsconfig.spec.json", "e2e/tsconfig.json"],
+						"exclude": ["**/node_modules/**"]
+					}
+				},
+				"e2e": {
+					"builder": "@angular-devkit/build-angular:protractor",
+					"options": {
+						"protractorConfig": "e2e/protractor.conf.js",
+						"devServerTarget": "ng-dummy:serve"
+					},
+					"configurations": {
+						"production": {
+							"devServerTarget": "ng-dummy:serve:production"
+						}
+					}
+				}
+			}
+		}
+	},
+	"defaultProject": "ng-dummy"
+}

packages/samples/angular/package.json

@@ -0,0 +1,50 @@
+{
+	"name": "angular-17",
+	"version": "0.0.0",
+	"description": "description",
+	"license": "UNLICENSED",
+	"scripts": {
+		"clean": "git clean -f -d -X",
+		"clean:locks": "rimraf package-lock.json pnpm-lock.yaml && npm run clean",
+		"build": "rimraf dist && cross-env NODE_ENV=production webpack",
+		"format": "prettier --check src",
+		"xlint": "eslint \"{src,tests}/**/*.{html,js,json,jsx,ts,tsx,gql,graphql}\"",
+		"serve": "cross-env NODE_ENV=development webpack serve --devtool=source-map",
+		"start": "npm run serve",
+		"unused": "ts-prune -e src",
+		"postinstall": "npm-run-all postinstall:*",
+		"postinstall:components-assets": "cpy \"node_modules/@public-ui/components/assets/**/*\" public/assets --dot",
+		"postinstall:themes-assets": "cpy \"node_modules/@public-ui/themes/assets/**/*\" public/assets --dot"
+	},
+	"dependencies": {
+		"@angular/common": "17.0.2",
+		"@angular/compiler": "17.0.2",
+		"@angular/compiler-cli": "17.0.2",
+		"@angular/core": "17.0.2",
+		"@angular/forms": "17.0.2",
+		"@angular/platform-browser": "17.0.2",
+		"@angular/platform-browser-dynamic": "17.0.2",
+		"@public-ui/angular-v16": "2.0.0-rc.10",
+		"@public-ui/components": "2.0.0-rc.10",
+		"@public-ui/themes": "2.0.0-rc.10",
+		"zone.js": "0.14.2"
+	},
+	"devDependencies": {
+		"@a11y-ui/core": "1.0.7",
+		"@leanup/stack-angular": "1.3.48",
+		"@leanup/stack": "1.3.44",
+		"@leanup/stack-webpack": "1.3.48",
+		"@ngtools/webpack": "17.0.0",
+		"chromedriver": "119.0.1",
+		"cpy-cli": "5.0.0",
+		"nightwatch-axe-verbose": "2.2.2",
+		"npm-check-updates": "16.14.6",
+		"npm-run-all": "4.1.5",
+		"rimraf": "3.0.2",
+		"ts-prune": "0.10.3",
+		"typescript": "5.2.2"
+	},
+	"files": [
+		"dist"
+	]
+}

packages/samples/angular/prettier.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+	printWidth: 160,
+	singleQuote: true,
+	useTabs: true,
+};

packages/samples/angular/public/.htaccess

@@ -0,0 +1,3 @@
+RewriteEngine On
+RewriteCond %{HTTPS} !=on
+RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

packages/samples/angular/public/index.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en" dir="ltr">
+	<head>
+		<title>KoliBri | Public UI</title>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<link rel="shortcut icon" type="image/x-icon" href="assets/kolibri.ico" />
+		<link rel="stylesheet" href="assets/codicons/codicon.css" />
+		<link rel="stylesheet" href="main.css" />
+		<meta name="robots" content="noindex" />
+		<meta name="kolibri" content="dev-mode=true" />
+	</head>
+	<body>
+		<div id="app"></div>
+		<script async src="main.js"></script>
+		<noscript>This website requires that you enable JavaScript.</noscript>
+	</body>
+</html>

packages/samples/angular/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /

packages/samples/angular/src/angular.main.ts

@@ -0,0 +1,26 @@
+// Polyfills
+import 'core-js/features/reflect';
+import 'zone.js';
+
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './angular.module';
+
+const ENVs = {
+	NODE_ENV: '$$NODE_ENV$$',
+};
+if (ENVs.NODE_ENV === 'production') {
+	enableProdMode();
+}
+
+const htmlDivElement: HTMLElement | null = document.querySelector<HTMLDivElement>('div#app');
+if (htmlDivElement instanceof HTMLElement) {
+	htmlDivElement.appendChild(document.createElement('app'));
+
+	platformBrowserDynamic()
+		.bootstrapModule(AppModule)
+		.then(() => {})
+		.catch(() => {})
+		.finally(() => {});
+}

packages/samples/angular/src/angular.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './components/app/component';
+import { KoliBriModule } from '@public-ui/angular-v16';
+import { defineCustomElements } from '@public-ui/components/dist/loader';
+import { register } from '@public-ui/components';
+import { DEFAULT } from '@public-ui/themes';
+
+@NgModule({
+	bootstrap: [AppComponent],
+	declarations: [AppComponent],
+	imports: [BrowserModule, FormsModule, KoliBriModule],
+})
+export class AppModule {
+	public constructor() {
+		register(DEFAULT, defineCustomElements).catch(console.warn);
+	}
+}

packages/samples/angular/src/components/app/component.html

@@ -0,0 +1,35 @@
+<div class="itzbund container mx-auto my-10 max-w-800px">
+	<header class="text-center">
+		<div class="grid grid-cols-2 items-center">
+			<div>
+				<kol-kolibri class="block m-auto w-40" _labeled="false"></kol-kolibri>
+			</div>
+			<div>
+				<img class="block m-auto w-25" style="width: 5.25rem" src="{{framework}}" alt="Logo vom Angular Framework" />
+			</div>
+		</div>
+		<strong class="text-2xl">Webpack + Angular + KoliBri | Public UI</strong>
+	</header>
+	<main class="grid md:grid-cols-2 gap-6 p-12">
+		<kol-alert _type="success" _heading="Dokumentation" _variant="card" _level="{2}">
+			<kol-link _href="https://public-ui.github.io/" _label="" _target="_blank">
+				<span slot="expert"><kol-icon _label="" _icon="fa-sharp fa-solid fa-book"></kol-icon> Dokumentation öffnen</span>
+			</kol-link>
+		</kol-alert>
+		<kol-alert _type="info" _heading="Theming" _variant="card" _level="{2}">
+			<kol-link _href="https://public-ui.github.io/docs/concepts/styling/designer" _label="" _target="_blank">
+				<span slot="expert"><kol-icon _label="" _icon="fa-solid fa-palette"></kol-icon> KoliBri-Designer öffnen</span>
+			</kol-link>
+		</kol-alert>
+		<kol-alert _type="warning" _heading="Mitwirken" _variant="card" _level="{2}">
+			<kol-link _href="https://github.com/public-ui/kolibri/" _label="" _target="_blank">
+				<span slot="expert"><kol-icon _label="" _icon="fa-brands fa-github"></kol-icon> GitHub öffnen</span>
+			</kol-link>
+		</kol-alert>
+		<kol-alert _type="error" _heading="Kontakt" _variant="card" _level="{2}">
+			<kol-link _href="mailto:kolibri@itzbund.de" _label="" _target="_blank">
+				<span slot="expert"><kol-icon _label="" _icon="fa-solid fa-envelope"></kol-icon> E-Mail schreiben</span>
+			</kol-link>
+		</kol-alert>
+	</main>
+</div>

packages/samples/angular/src/components/app/component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+import IMG_FRAMEWORK from '../../assets/logo.angular.png';
+
+@Component({
+	selector: 'app',
+	templateUrl: 'component.html',
+})
+export class AppComponent {
+	public readonly framework = IMG_FRAMEWORK;
+}

packages/samples/angular/src/declare.d.ts

@@ -0,0 +1,4 @@
+declare module '*.jpeg';
+declare module '*.jpg';
+declare module '*.png';
+declare module '*.gif';

packages/samples/angular/src/main.ts

@@ -0,0 +1,8 @@
+// Static CSS
+import './style.css';
+
+// App style
+import './style.scss';
+
+// App
+import './angular.main';