Merge pull request #239 from db-ui/fix-input-issues

fix: issue with input and pipeline

output/angular/angular.json

@@ -27,5 +27,8 @@
 			}
 		}
 	},
-	"defaultProject": "lib"
+	"defaultProject": "lib",
+	"cli": {
+		"analytics": false
+	}
 }

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

@@ -1,7 +1,30 @@
 module.exports = [
 	{
 		name: 'input',
-		defaultStylePath: 'components/input/input.css'
+		defaultStylePath: 'components/input/input.css',
+		overwrites: {
+			global: [
+				{ from: 'handleChange(event)', to: 'handleChange(event:any)' },
+				{ from: 'handleBlur(event)', to: 'handleBlur(event:any)' },
+				{ from: 'handleFocus(event)', to: 'handleFocus(event:any)' }
+			],
+			angular: [
+				{
+					from: 'this.textInputRef.nativeElement',
+					to: 'this.textInputRef?.nativeElement'
+				}
+			],
+			vue: [
+				{
+					from: 'import { DBInputState, DBInputProps, iconVariants } from "./model";',
+					to: 'import { iconVariants } from "./model";'
+				},
+				{
+					from: '_isValid: undefined,',
+					to: ''
+				}
+			]
+		}
 	},
 
 	{

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

@@ -7,7 +7,7 @@ import {
 } from '@builder.io/mitosis';
 import { DBInputState, DBInputProps, iconVariants } from './model';
 import { DBIcon } from '../icon';
-import './input.scss';
+import { DEFAULT_ID, uuid } from '../../utils';
 
 useMetadata({
 	isAttachedToShadowDom: false,
@@ -18,8 +18,9 @@ useMetadata({
 });
 
 export default function DBInput(props: DBInputProps) {
-	const textInputRef = useRef(null);
+	const textInputRef = useRef<HTMLInputElement>(null);
 	const state = useStore<DBInputState>({
+		mId: DEFAULT_ID,
 		_isValid: undefined,
 		handleChange: (event) => {
 			if (props.onChange) {
@@ -32,7 +33,7 @@ export default function DBInput(props: DBInputProps) {
 			if (textInputRef?.validity?.valid != state._isValid) {
 				state._isValid = textInputRef?.validity?.valid;
 				if (props.validityChange) {
-					props.validityChange(textInputRef?.validity?.valid);
+					props.validityChange(!!textInputRef?.validity?.valid);
 				}
 			}
 		},
@@ -55,6 +56,11 @@ export default function DBInput(props: DBInputProps) {
 	});
 
 	onMount(() => {
+		if (props.id) {
+			state.mId = props.id;
+		} else {
+			state.mId = 'input-' + uuid();
+		}
 		if (props.stylePath) {
 			state.stylePath = props.stylePath;
 		}
@@ -72,11 +78,11 @@ export default function DBInput(props: DBInputProps) {
 			</Show>
 			<input
 				ref={textInputRef}
-				id={props.id}
+				id={state.mId}
 				name={props.name}
 				type={props.type || 'text'}
 				placeholder={props.placeholder}
-				aria-labelledby={props.id + '-label'}
+				aria-labelledby={state.mId + '-label'}
 				disabled={props.disabled}
 				required={props.required}
 				value={props.value}
@@ -87,7 +93,10 @@ export default function DBInput(props: DBInputProps) {
 				onBlur={(event) => state.handleBlur(event)}
 				onFocus={(event) => state.handleFocus(event)}
 			/>
-			<label for={props.id} aria-hidden="true" id={props.id + '-label'}>
+			<label
+				htmlFor={state.mId}
+				aria-hidden="true"
+				id={state.mId + '-label'}>
 				<span>{props.label}</span>
 			</label>
 			<Show when={props.description}>

packages/components/src/components/input/input.scss

@@ -1,14 +1,13 @@
 @charset "utf-8";
 
+@use "@db-ui/foundations/build/scss/default.assets-paths" as *;
 @use "@db-ui/foundations/build/scss/variables" as *;
 @use "@db-ui/foundations/build/scss/variables.global" as *;
 @use "@db-ui/foundations/build/scss/helpers/functions" as *;
 @use "@db-ui/foundations/build/scss/icon/icons.helpers" as *;
 @use "@db-ui/foundations/build/scss/tonality" as *;
 @use "@db-ui/foundations/build/scss/color-placeholder" as *;
 
-$icons-path: "../../../icons/" !default;
-
 @mixin label-focus-animation(
 	$translationX: var(--db-input-padding-inline-start)
 ) {
@@ -218,7 +217,6 @@ $icons-path: "../../../icons/" !default;
 
 		&[type="search"] {
 			$paddingLeft: calc($db-spacing-fixed-sm * 2 + 0.625rem);
-			$icons-path: "../../../icons/" !default;
 
 			padding-inline-start: var(--db-input-padding-inline-start);
 

packages/components/src/components/input/model.ts

@@ -3,7 +3,7 @@ import {
 	FocusEventState,
 	GlobalTextProps,
 	ValidEventProps
-} from './../../shared/model';
+} from '../../shared/model';
 import {
 	ChangeEventState,
 	ChangeEventProps,
@@ -12,8 +12,8 @@ import {
 } from '../../shared/model';
 
 export type DBInputDefaultProps = {
-	id: string;
-	label: string;
+	id?: string;
+	label?: string;
 	type?:
 		| 'text'
 		| 'search'
@@ -52,6 +52,7 @@ export type DBInputProps = DBInputDefaultProps &
 	ValidEventProps;
 
 export type DBInputDefaultState = {
+	mId?: string;
 	_isValid: boolean | undefined;
 };
 

packages/components/src/components/tab/model.ts

@@ -30,7 +30,7 @@ export type DBTabDefaultProps = {
 export type DBTabProps = DBTabDefaultProps & GlobalProps;
 
 export type DBTabDefaultState = {
-	id?: string;
+	mId?: string;
 };
 
 export type DBTabState = DBTabDefaultState & GlobalState;

packages/components/src/components/tab/tab.lite.tsx

@@ -5,7 +5,7 @@ import {
 	useStore,
 	useRef
 } from '@builder.io/mitosis';
-import { uuid } from '../../utils';
+import { DEFAULT_ID, uuid } from '../../utils';
 import type { DBTabState, DBTabProps } from './model';
 
 useMetadata({
@@ -30,11 +30,11 @@ useMetadata({
 export default function DBTab(props: DBTabProps) {
 	const inputRef = useRef<HTMLInputElement>(null);
 	const state = useStore<DBTabState>({
-		id: 'ID_WILL_BE_OVERWRITE_ON_MOUNT_AND_THIS_CONSTANT_WONT_SHOW_UP_ONLY_IF_YOU_ARE_A_JAVA_DEVELOPER'
+		mId: DEFAULT_ID
 	});
 
 	onMount(() => {
-		state.id = uuid();
+		state.mId = uuid();
 		if (props.stylePath) {
 			state.stylePath = props.stylePath;
 		}
@@ -53,12 +53,12 @@ export default function DBTab(props: DBTabProps) {
 				ref={inputRef}
 				type="radio"
 				name={props.name}
-				id={state.id}
+				id={state.mId}
 			/>
-			<label htmlFor={state.id} role="tab">
+			<label htmlFor={state.mId} role="tab">
 				{props.label}
 			</label>
-			<section id={'content-' + state.id} role="tabpanel">
+			<section id={'content-' + state.mId} role="tabpanel">
 				<Show when={props.content}> {props.content}</Show>
 				{props.children}
 			</section>

packages/components/src/utils/index.ts

@@ -1,22 +1,6 @@
 export const uuid = () => {
-	try {
-		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-		// @ts-expect-error
-		return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
-			(
-				c ^
-				(crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
-			).toString(16)
-		);
-	} catch {
-		// This is only for jest tests
-		return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(
-			/[xy]/g,
-			function (c) {
-				const r = (Math.random() * 16) | 0;
-				const v = c == 'x' ? r : (r & 0x3) | 0x8;
-				return v.toString(16);
-			}
-		);
-	}
+	return window?.crypto?.randomUUID() || Math.random().toString();
 };
+
+export const DEFAULT_ID =
+	'ID_WILL_BE_OVERWRITTEN_ON_MOUNT_AND_THIS_CONSTANT_WONT_SHOW_UP_ONLY_IF_YOU_ARE_ARENT_INITIALIZING_IT_IN_THE_FRONTEND';

showcases/angular-current-showcase/package.json

@@ -11,22 +11,22 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^15.1.0",
-    "@angular/common": "^15.1.0",
+    "@angular/animations": "^15.1.1",
+    "@angular/common": "^15.1.1",
     "@angular/compiler": "^15.1.1",
-    "@angular/core": "^15.1.0",
-    "@angular/forms": "^15.1.0",
-    "@angular/platform-browser": "^15.1.0",
-    "@angular/platform-browser-dynamic": "^15.1.0",
-    "@angular/router": "^15.1.0",
+    "@angular/core": "^15.1.1",
+    "@angular/forms": "^15.1.1",
+    "@angular/platform-browser": "^15.1.1",
+    "@angular/platform-browser-dynamic": "^15.1.1",
+    "@angular/router": "^15.1.1",
     "rxjs": "~7.8.0",
     "tslib": "^2.4.1",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^15.1.1",
-    "@angular/cli": "^15.1.0",
-    "@angular/compiler-cli": "^15.1.0",
+    "@angular-devkit/build-angular": "^15.1.2",
+    "@angular/cli": "^15.1.2",
+    "@angular/compiler-cli": "^15.1.1",
     "schematics-scss-migrate": "^1.3.15",
     "typescript": "4.8.4"
   }

showcases/angular-lts-showcase/package.json

@@ -11,22 +11,22 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^14.2.12",
-    "@angular/common": "^14.2.12",
-    "@angular/compiler": "^15.1.1",
-    "@angular/core": "^14.2.12",
-    "@angular/forms": "^14.2.12",
-    "@angular/platform-browser": "^14.2.12",
-    "@angular/platform-browser-dynamic": "^14.2.12",
-    "@angular/router": "^14.2.12",
+    "@angular/animations": "14.2.12",
+    "@angular/common": "14.2.12",
+    "@angular/compiler": "14.2.12",
+    "@angular/core": "14.2.12",
+    "@angular/forms": "14.2.12",
+    "@angular/platform-browser": "14.2.12",
+    "@angular/platform-browser-dynamic": "14.2.12",
+    "@angular/router": "14.2.12",
     "rxjs": "~7.8.0",
     "tslib": "^2.4.1",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^14.2.10",
-    "@angular/cli": "^14.2.10",
-    "@angular/compiler-cli": "^14.2.12",
+    "@angular-devkit/build-angular": "14.2.10",
+    "@angular/cli": "14.2.10",
+    "@angular/compiler-cli": "14.2.12",
     "schematics-scss-migrate": "^1.3.15",
     "typescript": "4.6.x"
   }

showcases/react-showcase/src/app.tsx

@@ -37,7 +37,6 @@ const App = () => (
 					placeholder="irgendein Text"
 					iconBefore="edit"
 					variant="error"
-					id="input-expr-error"
 					value="hello"
 				/>