support small height text input

wouter-willems · wouter-willems · commit 9584d9597899 · 2024-09-12T14:57:53.000+02:00
diff --git a/projects/demo/src/app/demo/demo.component.html b/projects/demo/src/app/demo/demo.component.html
@@ -6,7 +6,7 @@
 
 		<div style="flex: 1 1 0px; margin-top: 5rem; margin-bottom: 10rem; margin-left: 20rem; max-width: 16rem;">
 			<klp-form-element caption="Name Je weet erfjwefwewkfjewerfjwefjewerfjwefwewkfjewerfjwefjew" spaceDistribution="34-66" direction="vertical">
-				<klp-form-text-input formControlName="name" [clearable]="true">
+				<klp-form-text-input formControlName="name" [clearable]="true" size="small">
 				</klp-form-text-input>
 				<klp-form-error error="async"></klp-form-error>
 			</klp-form-element>
diff --git a/projects/klippa/ngx-enhancy-forms/package.json b/projects/klippa/ngx-enhancy-forms/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@klippa/ngx-enhancy-forms",
-  "version": "14.22.17",
+  "version": "14.22.18",
   "publishConfig": {
     "access": "public"
   },
diff --git a/projects/klippa/ngx-enhancy-forms/src/lib/elements/text-input/text-input.component.html b/projects/klippa/ngx-enhancy-forms/src/lib/elements/text-input/text-input.component.html
@@ -1,4 +1,4 @@
-<div class="componentContainer">
+<div class="componentContainer" [ngClass]="{smallSized: size === 'small'}">
 	<ng-container *ngIf="icon?.length > 0">
 		<i class="ti-search" *ngIf="icon === 'search'"></i>
 	</ng-container>
diff --git a/projects/klippa/ngx-enhancy-forms/src/lib/elements/text-input/text-input.component.scss b/projects/klippa/ngx-enhancy-forms/src/lib/elements/text-input/text-input.component.scss
@@ -11,6 +11,9 @@
 
 .componentContainer {
 	position: relative;
+	&.smallSized input {
+		height: 32px;
+	}
 }
 
 i {
diff --git a/projects/klippa/ngx-enhancy-forms/src/lib/elements/text-input/text-input.component.ts b/projects/klippa/ngx-enhancy-forms/src/lib/elements/text-input/text-input.component.ts
@@ -18,6 +18,7 @@ export class TextInputComponent extends ValueAccessorBase<string> {
 	@Input() hasBorderLeft = true;
 	@Input() hasBorderRight = true;
 	@Input() passwordPeekIcon: TemplateRef<any>;
+	@Input() size: 'small' | 'medium' = 'medium';
 	@Output() onBlur = new EventEmitter<void>();
 
 	public togglePeakPassword(): void {

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@klippa/ngx-enhancy-forms",`
`3`		`- "version": "14.22.17",`
	`3`	`+ "version": "14.22.18",`
`4`	`4`	`"publishConfig": {`
`5`	`5`	`"access": "public"`
`6`	`6`	`},`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<div class="componentContainer">`
	`1`	`+<div class="componentContainer" [ngClass]="{smallSized: size === 'small'}">`
`2`	`2`	`<ng-container *ngIf="icon?.length > 0">`
`3`	`3`	`<i class="ti-search" *ngIf="icon === 'search'"></i>`
`4`	`4`	`</ng-container>`
Original file line number	Diff line number	Diff line change
`@@ -11,6 +11,9 @@`
`11`	`11`
`12`	`12`	`.componentContainer {`
`13`	`13`	`position: relative;`
	`14`	`+ &.smallSized input {`
	`15`	`+ height: 32px;`
	`16`	`+ }`
`14`	`17`	`}`
`15`	`18`
`16`	`19`	`i {`