support small height text input

klippa-app · Sep 12, 2024 · b5d2b26 · b5d2b26
1 parent 34c70ba
commit b5d2b26
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 3 deletions.
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": "18.22.2",
+ "version": "18.22.3",
  "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 {