feat: input component

package.json

@@ -27,6 +27,7 @@
     "update:components:button": "cpr ../core/source/_patterns/01-elements/buttons/button.scss packages/components/src/components/button/button.scss -o",
     "update:components:card": "cpr ../core/source/_patterns/02-components/cards/card.scss packages/components/src/components/card/card.scss -o",
     "update:components:cards": "cpr ../core/source/_patterns/02-components/cards/cards.scss packages/components/src/components/cards/cards.scss -o",
+    "update:components:input": "cpr ../core/source/_patterns/02-components/input/input.scss packages/components/src/components/input/input.scss -o",
     "update:components": "npm-run-all -p update:core:*",
     "build:foundations": "npm run build --workspace=@db-ui/foundations",
     "build:components": "npm run build --workspace=@db-ui/components",

packages/components/overrides/angular/src/components/input/index.ts

@@ -0,0 +1 @@
+export { DBInput, DBInputModule } from "./input";

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

@@ -1,4 +1,9 @@
 module.exports = [
+  {
+    name: "input",
+    defaultStylePath: "components/input/input.css",
+  },
+
 	{
 		name: 'divider',
 		defaultStylePath: 'components/divider/divider.css',

packages/components/src/components/card/card.scss

@@ -46,7 +46,7 @@
 	&[data-variant="ia"] {
 		&:hover {
 			cursor: pointer;
-			box-shadow: $db-elevation-8;
+			box-shadow: $db-elevation-4;
 		}
 
 		&:active {

packages/components/src/components/input/index.ts

@@ -0,0 +1 @@
+export { default as DBInput } from "./input";

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

@@ -0,0 +1,99 @@
+import { onMount, Show, useMetadata, useRef, useStore } from "@builder.io/mitosis";
+import { DBInputState, DBInputProps, iconVariants } from "./model";
+import { DBIcon } from '../icon';
+import "./input.scss";
+
+useMetadata({
+  isAttachedToShadowDom: false,
+  component: {
+    includeIcon: false,
+    properties: [],
+  },
+});
+
+export default function DBInput(props: DBInputProps) {
+  const textInputRef = useRef(null);
+  const state = useStore<DBInputState>({
+		_isValid: undefined,
+		handleChange: (event) => {
+			if (props.onChange) {
+				props.onChange(event);
+			}
+			if (props.change) {
+				props.change(event);
+			}
+
+			if (textInputRef?.validity?.valid != state._isValid ) {
+				state._isValid = textInputRef?.validity?.valid;
+				if( props.validityChange ) {
+					props.validityChange(textInputRef?.validity?.valid);
+				}
+			}
+		},
+		handleBlur: (event) => {
+			if (props.onBlur) {
+				props.onBlur(event);
+			}
+			if (props.blur) {
+				props.blur(event);
+			}
+		},
+		handleFocus: (event) => {
+			if (props.onFocus) {
+				props.onFocus(event);
+			}
+			if (props.focus) {
+				props.focus(event);
+			}
+		}
+  });
+
+  onMount(() => {
+    if (props.stylePath) {
+      state.stylePath = props.stylePath;
+    }
+  });
+
+  return (
+		<div class={ 'db-input ' + (props.className || '') } data-variant={props.variant}>
+			<Show when={state.stylePath}>
+				<link rel="stylesheet" href={state.stylePath} />
+			</Show>
+			<Show when={props.iconBefore}>
+				<DBIcon icon={props.iconBefore} className="icon-before" />
+			</Show>
+			<input
+				ref={textInputRef}
+				id={props.id}
+				name={props.name}
+				type={props.type || 'text'}
+				placeholder={props.placeholder}
+				aria-labelledby={props.id + '-label'}
+				disabled={props.disabled}
+				required={props.required}
+				value={props.value}
+				maxLength={props.maxLength}
+				minLength={props.minLength}
+				pattern={props.pattern}
+				onChange={(event) => state.handleChange(event)}
+				onBlur={(event) => state.handleBlur(event)}
+				onFocus={(event) => state.handleFocus(event)}
+			/>
+			<label for={props.id} aria-hidden="true" id={props.id + '-label'}>
+				<span>{props.label}</span>
+			</label>
+			<Show when={props.description}>
+				<p className="description">{props.description}</p>
+			</Show>
+			<Show when={props.variant || props.required || props.pattern}>
+				<DBIcon
+					icon={props.variant && iconVariants[props.variant]}
+					className="icon-input-state"
+				/>
+			</Show>
+			<Show when={props.iconAfter}>
+				<DBIcon icon={props.iconAfter} className="icon-after" />
+			</Show>
+		</div>
+  );
+}