refactor: header to work with 3.0 navigation

.jscpd.json

@@ -42,6 +42,7 @@
 		"packages/components/src/components/**/*.spec.tsx",
 		"packages/components/src/components/tag/tag.spec.tsx",
 		"**/**config.ts",
+		"**/navigation-items.ts",
 		"packages/foundations/assets/icons/functional/fonts/sources/*.json"
 	],
 	"absolute": true

README.md

@@ -75,7 +75,7 @@ Here is an overview of all components you can use:
 | Floating-Button                                                     | 02 - Action       |   ❌   |        ❌        |
 | Footer                                                              | 01 - Layout       |   ❌   |        ✅        |
 | Grid                                                                | 01 - Layout       |   ❌   |        ✅        |
-| Header                                                              | 01 - Layout       |   ❌   |        ✅        |
+| Header                                                              | 01 - Layout       |  Beta  |        ✅        |
 | [Icons](packages/components/src/components/icon)                    | 04 - Data-Display |  Beta  |        ✅        |
 | Image                                                               | 04 - Data-Display |   ❌   |        ✅        |
 | Indicator                                                           | 04 - Data-Display |   ❌   |        ❌        |

packages/components/mitosis.config.js

@@ -20,10 +20,15 @@ module.exports = {
 				attributeChangedCallback(test, json) {
 					const properties =
 						json?.meta?.useMetadata?.component?.properties?.map(
-							(prop) => prop.name
+							(prop) => prop.name.toLowerCase()
 						) || [];
 					return (
-						'this.props[name] = newValue;\n' +
+						'const foundProp = this.componentProps.find(prop=> prop.toLowerCase() === name);\n' +
+						"if (newValue === 'false') {\n" +
+						'\t\t\tdelete this.props[foundProp];\n' +
+						'\t\t} else {\n' +
+						'\t\t\tthis.props[foundProp] = newValue;\n' +
+						'\t\t}' +
 						'    this.update();' +
 						'}' +
 						'static get observedAttributes() {\n' +

packages/components/overrides/angular/src/components/main-navigation/index.ts

@@ -0,0 +1 @@
+export { DBMainNavigation, DBMainNavigationModule } from './main-navigation';

packages/components/overrides/angular/src/components/sub-navigation/index.ts

@@ -0,0 +1 @@
+export { DBSubNavigation, DBSubNavigationModule } from './sub-navigation';

packages/components/package.json

@@ -19,9 +19,10 @@
     "build:mitosis": "mitosis build",
     "build:mv-styles": "cpr src build -o -f \"(.ts|.tsx|.md)$\"",
     "build:sass": "sass build --no-source-map --load-path=node_modules/ --load-path=../../node_modules/ --future-deprecation=import",
+    "build:z-directives": "cpr overrides/angular ../../output/angular -o",
     "build:z-post": "node scripts/post-build/index.js",
     "build:z2-docs": "react-docgen ../../output/react/src/components/**/*.tsx -o ../../output/docs.json -i *.spec.tsx",
-    "compile:angular": "mitosis build -c mitosis-angular.config.js && node -e \"require('./scripts/post-build/angular.js')(true)\" && cpr ../../output/tmp/angular/src ../../output/angular/src -o",
+    "compile:angular": "mitosis build -c mitosis-angular.config.js && node -e \"require('./scripts/post-build/angular.js')(true)\" && npm run build:z-directives && cpr ../../output/tmp/angular/src ../../output/angular/src -o",
     "compile:react": "mitosis build -c mitosis-react.config.js && node -e \"require('./scripts/post-build/react.js')(true)\" && cpr ../../output/tmp/react/src ../../output/react/src -o",
     "compile:vue": "mitosis build -c mitosis-vue.config.js && node -e \"require('./scripts/post-build/vue.js')(true)\" && cpr ../../output/tmp/vue/vue3/src ../../output/vue/vue3/src -o",
     "copy-output": "npm-run-all copy:*",

packages/components/scripts/post-build/angular.js

@@ -1,6 +1,7 @@
 const Replace = require('replace-in-file');
+const FS = require('node:fs');
 const { components } = require('./components');
-const { runReplacements } = require('../utils');
+const { runReplacements, getComponentName } = require('../utils');
 
 const changeFile = (component, input) => {
 	return input
@@ -38,18 +39,17 @@ const changeFile = (component, input) => {
  *
  * @param {*} replacements
  * @param {*} componentName
+ * @param {*} upperComponentName
  * @param {*} valueAccessor 	'checked' | 'value' [adopt if needed]
  */
 const setControlValueAccessorReplacements = (
 	replacements,
 	componentName,
+	upperComponentName,
 	valueAccessor
 ) => {
 	// for native angular support (e.g. reactive forms) we have to implement
 	// the ControlValueAccessor interface with all impacts :/
-	const upperComponentName = `DB${
-		componentName.charAt(0).toUpperCase() + componentName.slice(1)
-	}`;
 
 	replacements.push({
 		from: '} from "@angular/core";',
@@ -105,9 +105,71 @@ const setControlValueAccessorReplacements = (
 	});
 };
 
+/**
+ * It's not possible to use <ng-content> multiple times in a component.
+ * In Angular, you have to use a directive for this...
+ * This is a workaround to replace it in the file.
+ * @param replacements
+ * @param componentName {string}
+ * @param upperComponentName {string}
+ * @param directives {{name:string, ngContentName?:string}[]}
+ */
+const setDirectiveReplacements = (
+	replacements,
+	componentName,
+	upperComponentName,
+	directives
+) => {
+	for (const directive of directives) {
+		// Add ng-content multiple times to overwrite all
+		for (let i = 0; i < 4; i++) {
+			replacements.push({
+				from: `<ng-content${
+					directive.ngContentName
+						? ` select="[${directive.ngContentName}]"`
+						: ''
+				}>`,
+				to: `<ng-content *ngTemplateOutlet="db${directive.name}">`
+			});
+		}
+
+		replacements.push({
+			from: `export class ${upperComponentName} {\n`,
+			to:
+				`export class ${upperComponentName} {\n` +
+				`\t@ContentChild(${directive.name}Directive, { read: TemplateRef }) db${directive.name}: any;\n`
+		});
+
+		replacements.push({
+			from: 'import { NgModule } from "@angular/core";',
+			to:
+				'import { NgModule } from "@angular/core";\n' +
+				`import { ${directive.name}Directive } from './${directive.name}.directive';\n`
+		});
+
+		FS.writeFileSync(
+			`../../output/angular/src/components/${componentName}/${directive.name}.directive.ts`,
+			'/* Angular cannot handle multiple slots with the same name, we need to use Directives for this. */\n' +
+				"import { Directive } from '@angular/core';" +
+				`
+@Directive({
+\tselector: '[db${directive.name}]'
+})
+export class ${directive.name}Directive {}
+`
+		);
+	}
+
+	replacements.push({
+		from: 'import { NgModule } from "@angular/core";',
+		to: "import { NgModule, ContentChild, TemplateRef } from '@angular/core';"
+	});
+};
+
 module.exports = (tmp) => {
 	for (const component of components) {
 		const componentName = component.name;
+		const upperComponentName = `DB${getComponentName(component.name)}`;
 		const file = `../../${
 			tmp ? 'output/tmp' : 'output'
 		}/angular/src/components/${componentName}/${componentName}.ts`;
@@ -118,18 +180,24 @@ module.exports = (tmp) => {
 
 		const replacements = [];
 
-		if (
-			component.config &&
-			component.config.angular &&
-			component.config.angular.controlValueAccessor
-		) {
+		if (component.config?.angular?.controlValueAccessor) {
 			setControlValueAccessorReplacements(
 				replacements,
 				componentName,
+				upperComponentName,
 				component.config.angular.controlValueAccessor // value / checked / ...
 			);
 		}
 
+		if (component.config?.angular?.directives?.length > 0) {
+			setDirectiveReplacements(
+				replacements,
+				componentName,
+				upperComponentName,
+				component.config.angular.directives
+			);
+		}
+
 		try {
 			Replace.sync(options);
 			runReplacements(replacements, component, 'angular', file);