various fixes

digitalspace · Feb 8, 2024 · db13b3e · db13b3e
1 parent 3024c69
commit db13b3e
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 9 deletions.
diff --git a/...forms/src/lib/components/input-types/date-input/calendar/calendar/calendar.component.html b/...forms/src/lib/components/input-types/date-input/calendar/calendar/calendar.component.html
@@ -1,4 +1,4 @@
-<div class="p-3" style="max-width: 345px">
+<div class="p-3" style="width: 345px">
   <!-- Header -->
   <div class="row d-flex">
     <div class="d-flex justify-content-between">

diff --git a/projects/ngds-forms/src/lib/components/input-types/date-input/date-input.component.html b/projects/ngds-forms/src/lib/components/input-types/date-input/date-input.component.html
@@ -12,8 +12,10 @@
     <!-- Input display control value-->
     <button #inputElement class="form-control border-0 text-start rounded-3" style="margin-left: 1px" type="button"   data-bs-toggle="dropdown"
       data-bs-auto-close="outside" [ngClass]="getInputClasses()"
-      [disabled]="isDisabled" style="min-height:2.25rem;" [value]="control?.value">
-      {{ currentDisplay || placeholder }}
+      [disabled]="isDisabled" style="height:2.25rem;" [value]="control?.value">
+      <div [ngClass]="{'text-muted': !control?.value}">
+        {{ currentDisplay || placeholder }}
+      </div>
       <!-- Calendar dropdowns -->
     </button>
 
@@ -45,7 +47,7 @@
 </div>
 
 <!-- Calendar template -->
-<ng-template #calendarTemplate>
+<ng-template #calendarTemplate style="width: 345px;">
   <ngds-calendar-manager [disabled]="isDisabled" (dateChange)="handleDateChange($event)" [control]="control"
     (clearDates)="handleClearDates()" (displayChange)="handleDisplayChange()" [timezone]="timezone"
     [disabledDatesFn]="disabledDatesFn.bind(this)" [dateRange]="dateRange" [minDisplayDepth]="minMode"

diff --git a/projects/ngds-forms/src/lib/components/input-types/number-input/number-input.component.html b/projects/ngds-forms/src/lib/components/input-types/number-input/number-input.component.html
@@ -14,6 +14,7 @@
     <input inputmode="numeric" #inputElement [(ngModel)]="displayValue"
       class="form-control border-0 rounded-3"
       [ngClass]="getInputClasses()"
+      autocomplete="off"
       [placeholder]="placeholder ? placeholder : ''" (focus)="onFocus()" (blur)="onLoseFocus()" [attr.id]="control?.id">
 
     <!-- Increment/decrement buttons -->

diff --git a/.../ngds-forms/src/lib/components/input-types/typeahead-input/typeahead-input.component.html b/.../ngds-forms/src/lib/components/input-types/typeahead-input/typeahead-input.component.html
@@ -13,6 +13,9 @@
     <button #inputElement class="form-select border-0 rounded-3" style="min-height: 2.25rem;"
       [ngClass]="getInputClasses()" [disabled]="isDisabled"
       (click)="openDropdown()">
+      <div class="text-muted">
+        {{ placeholderDisplay() }}
+      </div>
       <!-- Input display current value -->
       <!-- Multiselect display items -->
       <div *ngIf="multiselect && control?.value?.length" class="m-0 d-flex justify-content-left row">
@@ -21,10 +24,10 @@
         </ngds-multiselect-item>
       </div>
       <!-- Text input for typeahead -->
-      <input #typeaheadInput [hidden]="!isOpen.value" [(ngModel)]="currentDisplay" [placeholder]="placeholder ? placeholder : ''"
+      <input #typeaheadInput autocomplete="off" [hidden]="!isOpen.value" [(ngModel)]="currentDisplay" [placeholder]="placeholder ? placeholder : ''"
         (ngModelChange)="matchControlToInput()" [typeahead]="selectionListItems" (typeaheadOnSelect)="selected()"
         typeaheadOptionField="display" [optionsListTemplate]="getTemplate()" [typeaheadMinLength]="typeaheadMinLength"
-        [adaptivePosition]="true" [attr.disabled]="isDisabled" class="py-1 w-100 h-100 rounded border-0 multiselect-input"
+        [adaptivePosition]="true" [disabled]="isDisabled" class="w-100 h-100 rounded border-0 multiselect-input"
         [ngClass]="{'is-invalid': isInvalid, 'shrink-input': !isOpen.value}" (focus)="onFocus()" (blur)="onBlur()" [attr.id]="control?.id">
         <!-- Placeholder -->
         <div class="text-muted text-start" *ngIf="multiselect && placeholder && !control.value && !isFocused">

diff --git a/...ts/ngds-forms/src/lib/components/input-types/typeahead-input/typeahead-input.component.ts b/...ts/ngds-forms/src/lib/components/input-types/typeahead-input/typeahead-input.component.ts
@@ -111,6 +111,13 @@ export class NgdsTypeaheadInput extends NgdsInput implements AfterViewInit {
     this.editByModel = false;
   }
 
+  placeholderDisplay() {
+    if (!this.isOpen.value && this.placeholder && !this.multiselect) {
+      return this.placeholder;
+    }
+    return '';
+  }
+
   // Get the dropdown list template
   getTemplate() {
     if (this.selectionListTemplate) {

diff --git a/src/app/home/demonstrator/monitor/monitor.component.ts b/src/app/home/demonstrator/monitor/monitor.component.ts
@@ -53,12 +53,12 @@ export class MonitorComponent {
     if (this.control?.value?.length > 0 && Array.isArray(this.control.value)) {
       return `[ ` + this.control.value.join(', ') + ` ]`;
     }
+    if (isNaN(this.control?.value) && typeof this.control?.value === 'number') {
+      return '<NaN>';
+    }
     if (this.control?.value === null) {
       return '<null>';
     }
-    if (isNaN(this.control?.value)) {
-      return '<NaN>';
-    }
     if (this.control?.value === undefined) {
       return '<undefined>';
     }