adds maxLength and minLength to input

Author: stuartwk

package-lock.json

@@ -22,16 +22,16 @@
 	"devDependencies": {
 		"@lit/react": "^1.0.0",
 		"@types/node": "^20.0.0",
-		"@types/react": "^18.0.0",
-		"@types/react-dom": "^18.0.0",
+		"@types/react": "^19.0.0",
+		"@types/react-dom": "^19.0.0",
 		"typescript": "^5.0.0",
 		"vite": "^5.0.0",
 		"vite-plugin-dts": "^3.0.0"
 	},
 	"peerDependencies": {
 		"@lit/react": "^1.0.0",
-		"react": "^18.0.0 || ^19.0.0",
-		"react-dom": "^18.0.0 || ^19.0.0",
+		"react": "^19.0.0",
+		"react-dom": "^19.0.0",
 		"lit": "^3.0.0"
 	}
 }

package.json

@@ -30,6 +30,8 @@ export class Input extends LitElement {
 	@property({ type: String }) hint = "";
 	@property({ type: Boolean, reflect: true }) invalid = false;
 	@property({ type: Boolean, reflect: true }) required = false;
+	@property({ type: Number }) minLength?: number;
+	@property({ type: Number }) maxLength?: number;
 
 	// Event handler for input changes
 	private handleInput(e: InputEvent) {
@@ -90,6 +92,8 @@ export class Input extends LitElement {
 						?disabled=${this.disabled || this.loading}
 						?readonly=${this.readonly}
 						?required=${this.required}
+						minlength=${this.minLength ?? ""}
+						maxlength=${this.maxLength ?? ""}
 						name=${this.name}
 						class="input-field ${this.invalid ? "error" : ""}"
 						@input=${this.handleInput}

src/components/input/input.ts

@@ -33,6 +33,8 @@ export interface InputProps {
 	label?: string;
 	hint?: string;
 	required?: boolean;
+	minLength?: number;
+	maxLength?: number;
 	onInput?: (e: CustomEvent<InputChangeDetail>) => void;
 	onChange?: (e: CustomEvent<InputChangeDetail>) => void;
 	className?: string;