refactor: header to work with 3.0 navigation

packages/components/_templates/mitosis/new/db-ui-components-angular.ejs.t

@@ -0,0 +1,7 @@
+---
+inject: true
+to: src/styles/db-ui-components.scss
+after: angular-workaround
+skip_if: db<%= name %>
+---
+db<%= name %>,

packages/components/_templates/mitosis/new/db-ui-core.ejs.t → packages/components/_templates/mitosis/new/db-ui-components-use.ejs.t

@@ -1,7 +1,7 @@
 ---
 inject: true
 to: src/styles/db-ui-components.scss
-append: true
+prepend: true
 skip_if: components/<%= name %>
 ---
 @use "../components/<%= name %>/<%= name %>" as *;

packages/components/_templates/mitosis/new/readme.ejs.t

@@ -1,7 +1,7 @@
 ---
 to: src/components/<%= name %>/README.md
 ---
-How to use DB<%= h.changeCase.pascal(name) %>
+# How to use DB<%= h.changeCase.pascal(name) %>
 
 ## Angular
 

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/drawer/index.ts

@@ -0,0 +1 @@
+export { DBDrawer, DBDrawerModule } from './drawer';

packages/components/overrides/angular/src/components/header/action-bar.directive.ts

@@ -0,0 +1,6 @@
+import { Directive } from '@angular/core';
+
+@Directive({
+	selector: '[dbActionBar]'
+})
+export class ActionBarDirective {}

packages/components/overrides/angular/src/components/header/meta-navigation.directive.ts

@@ -0,0 +1,6 @@
+import { Directive } from '@angular/core';
+
+@Directive({
+	selector: '[dbMetaNavigation]'
+})
+export class MetaNavigationDirective {}

packages/components/overrides/angular/src/components/header/navigation.directive.ts

@@ -0,0 +1,6 @@
+import { Directive } from '@angular/core';
+
+@Directive({
+	selector: '[dbNavigation]'
+})
+export class NavigationDirective {}

packages/components/package.json

@@ -15,6 +15,7 @@
     "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/",
+    "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",
     "copy-output": "npm-run-all copy:*",

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

@@ -6,7 +6,8 @@
  * 	global?:{from:string,to:string}[],
  * 	angular?:{from:string,to:string}[],
  * 	react?:{from:string,to:string}[],
- * 	vue?:{from:string,to:string}[]
+ * 	vue?:{from:string,to:string}[],
+ * 	webComponents?:{from:string,to:string}[]
  * },
  * config?:{
  *     vue?:{
@@ -16,6 +17,30 @@
  * }]}
  */
 const getComponents = () => [
+	{
+		name: 'drawer',
+		defaultStylePath: 'components/drawer/drawer-web-component.css',
+		overwrites: {
+			global: [
+				{ from: '(event) => handleClose', to: '() => handleClose' },
+				{ from: 'handleClose(event)', to: 'handleClose(event: any)' }
+			],
+			angular: [
+				{
+					from: 'this.dialogRef.nativeElement',
+					to: 'this.dialogRef?.nativeElement'
+				}
+			],
+			vue: [
+				{
+					from: 'import { DBDrawerState, DBDrawerProps } from "./model";',
+					to: ''
+				}
+			],
+			webComponents: [{ from: '__prev.find', to: '!!__prev.find' }]
+		}
+	},
+
 	{
 		name: 'infotext',
 		defaultStylePath: 'components/infotext/infotext.css',
@@ -78,13 +103,90 @@ const getComponents = () => [
 	},
 	{
 		name: 'header',
-		defaultStylePath: 'components/header/header.css',
+		defaultStylePath: 'components/header/header-web-component.css',
 		overwrites: {
+			global: [
+				{
+					from: '(event) => toggle()',
+					to: '() => toggle()'
+				},
+				{
+					from: '(event) => toggle()',
+					to: '() => toggle()'
+				}
+			],
+			angular: [
+				{ from: '(close)', to: '(onClose)' },
+				{
+					from: '<ng-content select="[action-bar]">',
+					to: '<ng-content *ngTemplateOutlet="dbActionBar">'
+				},
+				{
+					from: '<ng-content select="[meta-navigation]">',
+					to: '<ng-content *ngTemplateOutlet="dbMetaNavigation">'
+				},
+				{
+					from: '<ng-content>',
+					to: '<ng-content *ngTemplateOutlet="dbNavigation">'
+				},
+				{
+					from: '<ng-content select="[action-bar]">',
+					to: '<ng-content *ngTemplateOutlet="dbActionBar">'
+				},
+				{
+					from: '<ng-content select="[meta-navigation]">',
+					to: '<ng-content *ngTemplateOutlet="dbMetaNavigation">'
+				},
+				{
+					from: '<ng-content>',
+					to: '<ng-content *ngTemplateOutlet="dbNavigation">'
+				},
+				{
+					from: 'export class DBHeader {\n',
+					to:
+						'export class DBHeader {\n' +
+						'\t@ContentChild(ActionBarDirective, { read: TemplateRef }) dbActionBar: any;\n' +
+						'\t@ContentChild(NavigationDirective, { read: TemplateRef }) dbNavigation: any;\n' +
+						'\t@ContentChild(MetaNavigationDirective, { read: TemplateRef }) dbMetaNavigation: any;\n'
+				},
+				{
+					from: 'import { NgModule } from "@angular/core";',
+					to:
+						"import { NgModule, ContentChild, TemplateRef } from '@angular/core';\t\n" +
+						"import { ActionBarDirective } from './action-bar.directive';\n" +
+						"import { NavigationDirective } from './navigation.directive';\n" +
+						"import { MetaNavigationDirective } from './meta-navigation.directive';"
+				}
+			],
 			vue: [
 				{
 					from: 'import { DBHeaderState, DBHeaderProps } from "./model";',
 					to: ''
 				}
+			],
+			webComponents: [
+				{
+					from: '<slot></slot>',
+					to: '<slot name="navigation-mobile"></slot>'
+				},
+				{
+					from: 'name="meta-navigation"',
+					to: 'name="meta-navigation-mobile"'
+				},
+				{
+					from: 'name="action-bar"',
+					to: 'name="action-bar-mobile"'
+				},
+				{
+					from:
+						'        el.removeEventListener("close", this.onDbDrawerDbHeaderClose);\n' +
+						'        el.addEventListener("close", this.onDbDrawerDbHeaderClose);',
+					to: 'el.props.onClose = this.onDbDrawerDbHeaderClose;'
+				},
+				{
+					from: 'if(this.props.drawerOpen)         el.setAttribute("open", this.props.drawerOpen);',
+					to: '        el.setAttribute("open", Boolean(this.props.drawerOpen));'
+				}
 			]
 		}
 	},
@@ -138,7 +240,7 @@ const getComponents = () => [
 	},
 	{
 		name: 'divider',
-		defaultStylePath: 'components/divider/divider.css',
+		defaultStylePath: 'components/divider/divider-web-component.css',
 		overwrites: {
 			vue: [
 				{

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

@@ -64,8 +64,9 @@ const workaroundAttributes = (lines) => {
 
 module.exports = () => {
 	for (const component of Components) {
+		const filePath = `../../output/webcomponent/src/components/${component.name}/${component.name}.ts`;
 		const fixImports = {
-			files: `../../output/webcomponent/src/components/${component.name}/${component.name}.ts`,
+			files: filePath,
 			processor(input) {
 				let lines = input
 					.split('\n')
@@ -88,19 +89,26 @@ module.exports = () => {
 		};
 
 		const defaultStyleUrl = {
-			files: `../../output/webcomponent/src/components/${component.name}/${component.name}.ts`,
+			files: filePath,
 			from: 'this.state = {',
 			to: `this.state = {stylePath: "${component.defaultStylePath}",`
 		};
 
 		try {
 			Replace.sync(fixImports);
 			Replace.sync(defaultStyleUrl);
-			if (
-				Fse.pathExistsSync(
-					`../../output/webcomponent/src/components/${component.name}/${component.name}.ts`
-				)
-			) {
+
+			if (component?.overwrites?.webComponents) {
+				for (const over of component.overwrites.webComponents) {
+					Replace.sync({
+						files: filePath,
+						from: over.from,
+						to: over.to
+					});
+				}
+			}
+
+			if (Fse.pathExistsSync(filePath)) {
 				Fse.moveSync(
 					`../../output/webcomponent/src/components/${component.name}/${component.name}.ts`,
 					`../../output/webcomponent/src/components/${component.name}/${component.name}.js`

packages/components/src/components/brand/brand.lite.tsx

@@ -44,11 +44,11 @@ export default function DBBrand(props: DBBrandProps) {
 					/>
 				</Show>
 				<Show when={props.anchorChildren}>
-					<>{props.children}</>
+					<strong class="db-brand-title">{props.children}</strong>
 				</Show>
 			</a>
 			<Show when={!props.anchorChildren}>
-				<>{props.children}</>
+				<strong class="db-brand-title">{props.children}</strong>
 			</Show>
 		</div>
 	);

packages/components/src/components/brand/brand.scss

@@ -18,9 +18,10 @@
 	}
 }
 
+.db-brand-title {
+	display: contents;
+}
+
 .db-logo {
 	height: $db-sizing-sm;
-	@media screen and (min-width: $db-screens-m) {
-		height: $db-sizing-md;
-	}
 }

packages/components/src/components/divider/divider-web-component.scss

@@ -0,0 +1 @@
+@import "divider";

packages/components/src/components/divider/divider.scss

@@ -14,7 +14,7 @@
 	}
 
 	&[data-variant="vertical"] {
-		height: auto;
+		height: 100%;
 		width: to-rem(1);
 
 		&:not([data-margin="none"]) {

packages/components/src/components/drawer/README.md

@@ -0,0 +1,13 @@
+# How to use DBDrawer
+
+## Angular
+
+TODO
+
+## React
+
+TODO
+
+## Vue
+
+TODO

packages/components/src/components/drawer/drawer-web-component.scss

@@ -0,0 +1,11 @@
+@use "@db-ui/foundations/build/scss/helpers/functions" as *;
+@import "../../styles/dialog-init";
+@import "drawer";
+
+.db-drawer {
+	.db-drawer-container {
+		.db-drawer-header {
+			height: to-rem(32);
+		}
+	}
+}