Input with action updates

src/lib/inputs/input-with-action/input-with-action.component.html

@@ -3,6 +3,7 @@
         (ngModelChange)="valueChange.emit($event)"
         [(ngModel)]="value"
         [autocomplete]="autocomplete"
+        [disabled]="disabled"
         [id]="inputId"
         [ngModelOptions]="{ standalone: true }"
         [placeholder]="placeholder"
@@ -18,7 +19,6 @@
         (action)="reset()"
         *ngIf="isSearch && hasContent"
         [buttonId]="inputId + '-clear'"
-        [size]="25"
         icon="iqser:close"
     ></iqser-circle-button>
 
@@ -28,6 +28,5 @@
         [buttonId]="actionButtonId"
         [disabled]="!hasContent"
         [icon]="icon!"
-        [size]="25"
     ></iqser-circle-button>
 </form>

src/lib/inputs/input-with-action/input-with-action.component.scss

@@ -9,6 +9,7 @@ mat-icon.disabled {
 
 iqser-circle-button {
     position: absolute;
-    top: 4px;
-    right: 5px;
+    --circle-button-size: calc(var(--iqser-inputs-height) * 0.7) !important;
+    top: calc((var(--iqser-inputs-height) - var(--circle-button-size)) / 2 - 1px);
+    right: calc((var(--iqser-inputs-height) - var(--circle-button-size)) / 2 - 1px);
 }

src/lib/inputs/input-with-action/input-with-action.component.ts

@@ -22,6 +22,7 @@ export class InputWithActionComponent {
     @Input() icon?: string;
     @Input() autocomplete: 'on' | 'off' = 'on';
     @Input() value = '';
+    @Input() disabled = false;
     @Output() readonly action = new EventEmitter<string>();
     @Output() readonly valueChange = new EventEmitter<string>();