fix(DBLink): leading/trailing whitespace when using icons (by mitosis update)

packages/components/configs/angular/index.cjs

@@ -6,6 +6,7 @@ const onClickPlugin = require('../plugins/on-click.cjs');
 module.exports = {
 	typescript: true,
 	attributePassing: {
+		enabled: true,
 		customRef: '_ref'
 	},
 	api: 'signals',

packages/components/package.json

@@ -46,8 +46,8 @@
   },
   "devDependencies": {
     "@builder.io/eslint-plugin-mitosis": "0.0.17",
-    "@builder.io/mitosis": "0.10.0",
-    "@builder.io/mitosis-cli": "0.10.0",
+    "@builder.io/mitosis": "0.12.1",
+    "@builder.io/mitosis-cli": "0.12.1",
     "@typescript-eslint/eslint-plugin": "8.37.0",
     "cpr": "3.0.1",
     "cssnano": "7.1.0",

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

@@ -1,6 +1,6 @@
 import { replaceInFileSync } from 'replace-in-file';
 
-import { readFileSync, writeFileSync } from 'node:fs';
+import { writeFileSync } from 'node:fs';
 
 import components, { Overwrite } from './components.js';
 
@@ -21,7 +21,7 @@ const setControlValueAccessorReplacements = (
 	replacements.push({
 		from: '} from "@angular/core";',
 		to:
-			`Renderer2, model } from "@angular/core";\n` +
+			`Renderer2 } from "@angular/core";\n` +
 			`import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n`
 	});
 
@@ -58,7 +58,7 @@ const setControlValueAccessorReplacements = (
 	// insert custom interface functions before ngOnInit
 	// TODO update attribute by config if necessary (e.g. for checked attribute?)
 	replacements.push({
-		from: 'ngOnInit()',
+		from: 'ngAfterViewInit()',
 		to: `
 		writeValue(value: any) {
 			${valueAccessorRequired ? 'if(value){' : ''}
@@ -83,7 +83,7 @@ const setControlValueAccessorReplacements = (
 		  this.disabled.set(disabled);
 		}
 
-		ngOnInit()`
+		ngAfterViewInit()`
 	});
 };
 
@@ -169,29 +169,12 @@ export default (tmp?: boolean) => {
 		});
 
 		const replacements: Overwrite[] = [
-			// TODO: We don't need this after Angular drops support for v17 in may 2025
 			{
 				from: /allowSignalWrites: true,/g,
 				to: ''
 			}
 		];
 
-		if (
-			readFileSync(file)
-				.toString()
-				.includes('this.initialized.set(true);')
-		) {
-			// TODO: Solve this in mitosis by splitting onInit and onMount into ngOnInit and ngAfterViewInit
-			replacements.push({
-				from: 'this.initialized.set(true);',
-				to: ''
-			});
-			replacements.push({
-				from: 'ngAfterViewInit() {',
-				to: 'ngAfterViewInit() {\nthis.initialized.set(true);\n'
-			});
-		}
-
 		if (component.config?.angular?.controlValueAccessor) {
 			setControlValueAccessorReplacements(
 				replacements,

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

@@ -75,18 +75,7 @@ export const getComponents = (): Component[] => [
 				{
 					from: 'attr.checked',
 					to: 'checked'
-				},
-				// To remove whitespaces from label...
-				{
-					from: `      <label [attr.id]="_labelId()">
-        {{label() ?? DEFAULT_LABEL}}
-        <select`,
-					to: `<label [attr.id]="_labelId()">{{label() ?? DEFAULT_LABEL}}<select`
-				},
-				// TODO: Move this to mitosis
-				{ from: 'trackByOption0', to: 'trackByOption0(i,option)' },
-				{ from: 'trackByOption1', to: 'trackByOption1(index,option)' },
-				{ from: 'trackByOption2', to: 'trackByOption2(i,option)' }
+				}
 			],
 			react: [
 				{ from: 'key={uuid()}', to: 'key={getOptionLabel(option)}' }

packages/components/src/components/checkbox/checkbox.lite.tsx

@@ -34,7 +34,10 @@ import { DBCheckboxProps, DBCheckboxState } from './model';
 
 useMetadata({
 	angular: {
-		nativeAttributes: ['disabled', 'required', 'checked', 'indeterminate']
+		nativeAttributes: ['disabled', 'required', 'checked', 'indeterminate'],
+		signals: {
+			writeable: ['disabled', 'checked']
+		}
 	}
 });
 

packages/components/src/components/custom-select-list-item/custom-select-list-item.lite.tsx

@@ -21,7 +21,10 @@ import {
 
 useMetadata({
 	angular: {
-		nativeAttributes: ['disabled', 'checked', 'value', 'name']
+		nativeAttributes: ['disabled', 'checked', 'value', 'name'],
+		signals: {
+			writeable: ['disabled', 'checked']
+		}
 	}
 });
 

packages/components/src/components/custom-select/custom-select.lite.tsx

@@ -67,7 +67,10 @@ import {
 
 useMetadata({
 	angular: {
-		nativeAttributes: ['disabled']
+		nativeAttributes: ['disabled', 'required', 'multiple'],
+		signals: {
+			writeable: ['disabled', 'values']
+		}
 	}
 });
 
@@ -99,6 +102,7 @@ export default function DBCustomSelect(props: DBCustomSelectProps) {
 		_placeholderId: undefined,
 		_infoTextId: undefined,
 		_validity: 'no-validation',
+		_userInteraction: false,
 		// Workaround for Vue output: TS for Vue would think that it could be a function, and by this we clarify that it's a string
 		_descByIds: '',
 		_selectedLabels: '',
@@ -142,7 +146,9 @@ export default function DBCustomSelect(props: DBCustomSelectProps) {
 					state._voiceOverFallback = state._invalidMessage;
 					delay(() => (state._voiceOverFallback = ''), 1000);
 				}
-				state._validity = props.validation ?? 'invalid';
+				if (state._userInteraction) {
+					state._validity = props.validation ?? 'invalid';
+				}
 			} else if (
 				state.hasValidState() &&
 				selectRef?.validity.valid &&
@@ -422,6 +428,7 @@ export default function DBCustomSelect(props: DBCustomSelectProps) {
 			if (skip) return;
 
 			state._values = values;
+			state._userInteraction = true;
 			if (props.onOptionSelected) {
 				props.onOptionSelected(values ?? []);
 			}
@@ -688,8 +695,10 @@ export default function DBCustomSelect(props: DBCustomSelectProps) {
 	}, [props.values]);
 
 	onUpdate(() => {
-		state.handleValidation();
-	}, [state._values]);
+		if (selectRef) {
+			state.handleValidation();
+		}
+	}, [state._values, selectRef]);
 
 	onUpdate(() => {
 		state._validity = props.validation;

packages/components/src/components/custom-select/model.ts

@@ -261,6 +261,7 @@ export type DBCustomSelectDefaultState = {
 	_internalChangeTimestamp: number;
 	_documentClickListenerCallbackId?: string;
 	_searchValue?: string;
+	_userInteraction?: boolean;
 	getNativeSelectValue: () => string;
 	getOptionLabel: (option: CustomSelectOptionType) => string;
 	getOptionChecked: (value?: string) => boolean;

packages/components/src/components/header/header.lite.tsx

@@ -7,8 +7,8 @@ import {
 	useRef,
 	useStore
 } from '@builder.io/mitosis';
-import { DEFAULT_BURGER_MENU, DEFAULT_ID } from '../../shared/constants';
-import { addAttributeToChildren, cls, getBoolean, uuid } from '../../utils';
+import { DEFAULT_BURGER_MENU } from '../../shared/constants';
+import { addAttributeToChildren, cls, getBoolean } from '../../utils';
 import { isEventTargetNavigationItem } from '../../utils/navigation';
 import DBButton from '../button/button.lite';
 import DBDrawer from '../drawer/drawer.lite';
@@ -22,7 +22,6 @@ export default function DBHeader(props: DBHeaderProps) {
 	const _ref = useRef<HTMLDivElement | any>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBHeaderState>({
-		_id: DEFAULT_ID,
 		initialized: false,
 		forcedToMobile: false,
 		handleToggle: (event?: any) => {
@@ -45,33 +44,27 @@ export default function DBHeader(props: DBHeaderProps) {
 
 	onMount(() => {
 		state.initialized = true;
-		state._id = props.id || 'header-' + uuid();
 	});
 
 	onUpdate(() => {
-		if (state.initialized && document && state._id && props.forceMobile) {
-			const headerElement = document.getElementById(
-				state._id ?? ''
-			) as HTMLElement;
-			if (headerElement) {
-				// Adds this attribute to the header to enable all styling which would have
-				// @media screen and (min-width: $db-screens-m) to show mobile navigation on a desktop device
-				addAttributeToChildren(headerElement, {
-					key: 'data-force-mobile',
-					value: 'true'
-				});
-			}
+		if (state.initialized && _ref && props.forceMobile) {
+			// Adds this attribute to the header to enable all styling which would have
+			// @media screen and (min-width: $db-screens-m) to show mobile navigation on a desktop device
+			addAttributeToChildren(_ref, {
+				key: 'data-force-mobile',
+				value: 'true'
+			});
 			state.forcedToMobile = true;
 		}
-	}, [state.initialized]);
+	}, [state.initialized, _ref]);
 
 	// jscpd:ignore-end
 
 	return (
 		<header
 			ref={_ref}
 			class={cls('db-header', props.className)}
-			id={state._id}
+			id={props.id}
 			data-width={props.width}
 			data-on-forcing-mobile={props.forceMobile && !state.forcedToMobile}>
 			<DBDrawer
@@ -113,7 +106,6 @@ export default function DBHeader(props: DBHeaderProps) {
 				<div class="db-header-action-container">
 					<div class="db-header-burger-menu-container">
 						<DBButton
-							id={state._id + '-burger-menu'}
 							icon="menu"
 							noText
 							variant="ghost"

packages/components/src/components/input/input.lite.tsx

@@ -48,7 +48,10 @@ import { DBInputProps, DBInputState } from './model';
 
 useMetadata({
 	angular: {
-		nativeAttributes: ['disabled', 'required']
+		nativeAttributes: ['disabled', 'required'],
+		signals: {
+			writeable: ['disabled', 'value']
+		}
 	}
 });
 

packages/components/src/components/radio/radio.lite.tsx

@@ -18,7 +18,10 @@ import { DBRadioProps, DBRadioState } from './model';
 
 useMetadata({
 	angular: {
-		nativeAttributes: ['disabled', 'required', 'checked', 'indeterminate']
+		nativeAttributes: ['disabled', 'required', 'checked', 'indeterminate'],
+		signals: {
+			writeable: ['disabled', 'value']
+		}
 	}
 });
 useDefaultProps<DBRadioProps>({});

packages/components/src/components/select/select.lite.tsx

@@ -44,7 +44,10 @@ import { DBSelectOptionType, DBSelectProps, DBSelectState } from './model';
 
 useMetadata({
 	angular: {
-		nativeAttributes: ['disabled', 'required', 'value']
+		nativeAttributes: ['disabled', 'required', 'value'],
+		signals: {
+			writeable: ['disabled', 'value']
+		}
 	}
 });
 useDefaultProps<DBSelectProps>({});