From 4a9f6667ff26bf1ea7905d92a392aba66be7beb8 Mon Sep 17 00:00:00 2001
From: Dennis Kigen <kigen.work@gmail.com>
Date: Wed, 10 Jan 2024 23:22:09 +0300
Subject: [PATCH] (test) Add unit tests for NumberInputComponent (#117)

---
 .prettierignore                               |   2 +-
 .../ngx-remote-select.component.ts            |   4 +-
 .../remote-select.component.html              |  41 +++---
 .../number-input/number-input.component.html  |  19 ++-
 .../number-input.component.spec.ts            | 105 +++++++-------
 .../number-input/number-input.component.ts    |  10 +-
 .../form-renderer.component.html              |  53 ++++---
 .../form-renderer.component.scss              |  20 ++-
 .../src/form-entry/utils/messages.ts          |  26 ++--
 .../ngx-formentry/styles/ngx-formentry.css    |  18 ++-
 src/app/adult-1.6.json                        |  33 +----
 src/assets/carbon.select.theme.css            |  12 +-
 src/translations/en.json                      |  88 ++++++------
 src/translations/fr.json                      |  84 +++++------
 src/translations/km.json                      | 131 +++++++++---------
 15 files changed, 346 insertions(+), 300 deletions(-)

diff --git a/.prettierignore b/.prettierignore
index f26a922d..d002cbaf 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -37,4 +37,4 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
-./package-lock.json
\ No newline at end of file
+./package-lock.json
diff --git a/projects/ngx-formentry/src/components/ngx-remote-select/ngx-remote-select.component.ts b/projects/ngx-formentry/src/components/ngx-remote-select/ngx-remote-select.component.ts
index a7d25829..dd1a3de9 100644
--- a/projects/ngx-formentry/src/components/ngx-remote-select/ngx-remote-select.component.ts
+++ b/projects/ngx-formentry/src/components/ngx-remote-select/ngx-remote-select.component.ts
@@ -19,6 +19,7 @@ import { SelectOption } from '../../form-entry/question-models/interfaces/select
 
 import { DataSource } from '../../form-entry/question-models/interfaces/data-source';
 import * as _ from 'lodash';
+
 @Component({
   selector: 'ofe-remote-select',
   templateUrl: 'remote-select.component.html',
@@ -40,11 +41,12 @@ export class RemoteSelectComponent implements OnInit, ControlValueAccessor {
   value = [];
   loading = false;
   searchText = '';
-  notFoundMsg = 'match no found';
+  notFoundMsg = 'Match not found';
   @Input() placeholder = 'Search...';
   @Input() componentID: string;
   @Input() disabled = false;
   @Input() theme = 'dark';
+  @Input() invalid = 'false';
   @Output() done: EventEmitter<any> = new EventEmitter<any>();
 
   private _dataSource: DataSource;
diff --git a/projects/ngx-formentry/src/components/ngx-remote-select/remote-select.component.html b/projects/ngx-formentry/src/components/ngx-remote-select/remote-select.component.html
index 51b1d2ce..5a981497 100644
--- a/projects/ngx-formentry/src/components/ngx-remote-select/remote-select.component.html
+++ b/projects/ngx-formentry/src/components/ngx-remote-select/remote-select.component.html
@@ -1,20 +1,21 @@
-<div>
-  <ng-select
-    [ngClass]="{ 'afe-custom': theme === 'light' }"
-    [disabled]="disabled"
-    [items]="remoteOptions$ | async"
-    bindLabel="label"
-    bindValue="value"
-    [multiple]="false"
-    [hideSelected]="true"
-    [compareWith]="compareItems"
-    [trackByFn]="trackByFn"
-    [loading]="loading"
-    typeToSearchText="{{ 'enterMoreCharacters' | translate }}"
-    [typeahead]="remoteOptionInput$"
-    [(ngModel)]="selectedRemoteOptions"
-    [appendTo]="'form'"
-    (ngModelChange)="selected($event)"
-  >
-  </ng-select>
-</div>
+<ng-select
+  [ngClass]="{
+      'afe-custom': theme === 'light',
+      'invalid': invalid ? true : null,
+    }"
+  [disabled]="disabled"
+  [items]="remoteOptions$ | async"
+  bindLabel="label"
+  bindValue="value"
+  [multiple]="false"
+  [hideSelected]="true"
+  [compareWith]="compareItems"
+  [trackByFn]="trackByFn"
+  [loading]="loading"
+  typeToSearchText="{{ 'enterMoreCharacters' | translate }}"
+  [typeahead]="remoteOptionInput$"
+  [(ngModel)]="selectedRemoteOptions"
+  [appendTo]="'form'"
+  (ngModelChange)="selected($event)"
+>
+</ng-select>
diff --git a/projects/ngx-formentry/src/components/number-input/number-input.component.html b/projects/ngx-formentry/src/components/number-input/number-input.component.html
index 3aa7545e..a538561b 100644
--- a/projects/ngx-formentry/src/components/number-input/number-input.component.html
+++ b/projects/ngx-formentry/src/components/number-input/number-input.component.html
@@ -8,7 +8,8 @@
     'cds--number--helpertext': helperText,
     'cds--skeleton': skeleton,
     'cds--number--sm': size === 'sm',
-    'cds--number--xl': size === 'xl'
+    'cds--number--md': size === 'md',
+    'cds--number--lg': size === 'lg'
   }"
 >
   <div
@@ -18,9 +19,9 @@
     }"
   >
     <input
+      ofeNumberScroll
       type="number"
       [id]="id"
-      ofeNumberScroll
       [value]="value"
       [attr.min]="min"
       [attr.max]="max"
@@ -29,8 +30,22 @@
       [attr.step]="step"
       [disabled]="disabled"
       [required]="required"
+      [attr.data-invalid]="invalid ? invalid : null"
+      [placeholder]="placeholder"
       (input)="onNumberInputChange($event)"
     />
+    <svg
+      *ngIf="!skeleton && !warn && invalid"
+      cdsIcon="warning--filled"
+      size="16"
+      class="cds--number__invalid"
+    ></svg>
+    <svg
+      *ngIf="!skeleton && !invalid && warn"
+      cdsIcon="warning--alt--filled"
+      size="16"
+      class="cds--number__invalid cds--number__invalid--warning"
+    ></svg>
     <div class="cds--number__controls">
       <button
         type="button"
diff --git a/projects/ngx-formentry/src/components/number-input/number-input.component.spec.ts b/projects/ngx-formentry/src/components/number-input/number-input.component.spec.ts
index 58818273..f4c29fec 100644
--- a/projects/ngx-formentry/src/components/number-input/number-input.component.spec.ts
+++ b/projects/ngx-formentry/src/components/number-input/number-input.component.spec.ts
@@ -7,7 +7,10 @@ describe('NumberInputComponent', () => {
   let fixture: ComponentFixture<NumberInputComponent>;
   let debugEl: DebugElement;
   let nativeEl: HTMLElement;
-  let numberField: HTMLElement;
+  let containerElement: HTMLElement;
+  let inputElement: HTMLInputElement;
+  let incrementButton: HTMLButtonElement;
+  let decrementButton: HTMLButtonElement;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
@@ -18,75 +21,68 @@ describe('NumberInputComponent', () => {
     component = fixture.componentInstance;
     debugEl = fixture.debugElement;
     nativeEl = debugEl.nativeElement;
-    numberField = nativeEl.querySelector('div.cds--number');
-
+    containerElement = nativeEl.querySelector('div.cds--number');
+    inputElement = containerElement.querySelector('input[type="number"]');
+    incrementButton = containerElement.querySelector('button.up-icon');
+    decrementButton = containerElement.querySelector('button.down-icon');
     component.id = 'test-id';
-    component.theme = 'light';
-    component.disabled = false;
-    component.skeleton = false;
-    component.invalid = false;
-    component.size = 'md';
-    component.required = false;
-    component.value = null;
 
     fixture.detectChanges();
   });
 
   it('should create', () => {
-    expect(component).toBeTruthy();
-    expect(numberField).toBeTruthy();
+    expect(component instanceof NumberInputComponent).toBe(true);
+    expect(inputElement).toBeDefined();
   });
 
   it('should render a number input with the correct attributes', () => {
-    component.label = 'Pill count';
     component.value = 10;
+    component.label = 'Pill count';
+    component.placeholder = 'Enter pill count';
 
-    const input = numberField.querySelector('input[type="number"]');
-    expect(input.getAttribute('id')).toBe('test-id');
-    expect(input.getAttribute('type')).toBe('number');
-    expect(input.getAttribute('min')).toBe(null);
-    expect(input.getAttribute('max')).toBe(null);
+    fixture.detectChanges();
+
+    expect(inputElement.getAttribute('id')).toBe('test-id');
+    expect(inputElement.getAttribute('type')).toBe('number');
+    expect(inputElement.getAttribute('min')).toBe(null);
+    expect(inputElement.getAttribute('max')).toBe(null);
+    expect(inputElement.getAttribute('placeholder')).toBe('Enter pill count');
   });
 
   it('should decrement and increment the value when the buttons are clicked', () => {
     component.value = 10;
-    const buttons = numberField.querySelectorAll('button');
-    const decrementBtn = buttons[0];
-    const incrementBtn = buttons[1];
 
-    decrementBtn.click();
+    decrementButton.click();
     fixture.detectChanges();
 
     expect(component.value).toBe(9);
 
-    decrementBtn.click();
+    decrementButton.click();
     fixture.detectChanges();
 
     expect(component.value).toBe(8);
 
-    incrementBtn.click();
+    incrementButton.click();
     fixture.detectChanges();
 
     expect(component.value).toBe(9);
 
-    incrementBtn.click();
+    incrementButton.click();
     fixture.detectChanges();
 
     expect(component.value).toBe(10);
   });
 
   it('should not decrement the value below the min value', () => {
-    component.min = 10;
     component.value = 10;
-    const buttons = numberField.querySelectorAll('button');
-    const decrementBtn = buttons[0];
+    component.min = 10;
 
-    decrementBtn.click();
+    decrementButton.click();
     fixture.detectChanges();
 
     expect(component.value).toBe(10);
 
-    decrementBtn.click();
+    decrementButton.click();
     fixture.detectChanges();
 
     expect(component.value).not.toBe(9);
@@ -94,75 +90,82 @@ describe('NumberInputComponent', () => {
   });
 
   it('should not increment the value above the max value', () => {
-    component.max = 10;
     component.value = 10;
-    const buttons = numberField.querySelectorAll('button');
-    const incrementBtn = buttons[1];
+    component.max = 10;
 
-    incrementBtn.click();
+    incrementButton.click();
     fixture.detectChanges();
 
     expect(component.value).toBe(10);
 
-    incrementBtn.click();
+    incrementButton.click();
     fixture.detectChanges();
 
     expect(component.value).not.toBe(11);
     expect(component.value).toBe(10);
   });
 
-  it('should decrement or increment the value by the step count value', () => {
-    component.step = 5;
+  it('should decrement or increment the value by the provided step count', () => {
     component.value = 10;
-    const buttons = numberField.querySelectorAll('button');
-    const decrementBtn = buttons[0];
-    const incrementBtn = buttons[1];
+    component.step = 5;
 
-    decrementBtn.click();
+    decrementButton.click();
     fixture.detectChanges();
 
     expect(component.value).toBe(5);
 
-    incrementBtn.click();
+    incrementButton.click();
     fixture.detectChanges();
 
     expect(component.value).toBe(10);
   });
 
   it('should render helperText below the input when provided', () => {
+    const helperText = 'Max of 50';
     component.value = 49;
     component.max = 50;
-    component.helperText = 'Max of 50';
+    component.helperText = helperText;
 
     fixture.detectChanges();
 
-    const helperText = numberField.querySelector('div.cds--form__helper-text');
-    expect(helperText.textContent).toBe('Max of 50');
+    const helperTextElement = containerElement.querySelector(
+      'div.cds--form__helper-text'
+    );
+    expect(containerElement.className.includes('cds--number--helpertext'));
+    expect(helperTextElement.textContent).toBe(helperText);
   });
 
-  it('should render the supplied warning text when the warn input is true', () => {
+  it('should render the supplied warning text when the warn property is truthy', () => {
     component.value = 11;
     component.max = 10;
     component.warn = true;
     component.warnText = 'Min value should be 10';
 
-    numberField.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab' }));
+    containerElement.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'Tab' })
+    );
     fixture.detectChanges();
 
-    const warnText = numberField.querySelector('div.cds--form-requirement');
+    const warnText = containerElement.querySelector(
+      'div.cds--form-requirement'
+    );
     expect(warnText.textContent).toBe('Min value should be 10');
   });
 
-  it('should render the supplied invalid text when the invalid input is true', () => {
+  it('should render the supplied invalid text when the invalid property is truthy', () => {
     component.value = 11;
     component.max = 10;
     component.invalid = true;
     component.invalidText = 'Min value should be 10';
 
-    numberField.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab' }));
+    containerElement.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'Tab' })
+    );
     fixture.detectChanges();
 
-    const invalidText = numberField.querySelector('div.cds--form-requirement');
+    const invalidText = containerElement.querySelector(
+      'div.cds--form-requirement'
+    );
     expect(invalidText.textContent).toBe('Min value should be 10');
   });
 });
diff --git a/projects/ngx-formentry/src/components/number-input/number-input.component.ts b/projects/ngx-formentry/src/components/number-input/number-input.component.ts
index f6a33734..0d74a503 100644
--- a/projects/ngx-formentry/src/components/number-input/number-input.component.ts
+++ b/projects/ngx-formentry/src/components/number-input/number-input.component.ts
@@ -60,10 +60,14 @@ export class NumberInputComponent implements ControlValueAccessor {
    * The unique id for the number component.
    */
   @Input() id = `number-${NumberInputComponent.numberCount}`;
+  /**
+   * Sets the placeholder attribute on the `input` element.
+   */
+  @Input() placeholder = '';
   /**
    * Number input field render size
    */
-  @Input() size: 'sm' | 'md' | 'xl' = 'md';
+  @Input() size: 'sm' | 'md' | 'lg' = 'md';
   /**
    * Reflects the required attribute of the `input` element.
    */
@@ -133,11 +137,11 @@ export class NumberInputComponent implements ControlValueAccessor {
   /**
    * Sets the decrement label text
    */
-  @Input() decrementLabel = 'Decrease';
+  @Input() decrementLabel = 'Decrement';
   /**
    * Sets the increment label text
    */
-  @Input() incrementLabel = 'Increase';
+  @Input() incrementLabel = 'Increment';
 
   protected _value = 0;
 
diff --git a/projects/ngx-formentry/src/form-entry/form-renderer/form-renderer.component.html b/projects/ngx-formentry/src/form-entry/form-renderer/form-renderer.component.html
index 7e7f8f37..72847f65 100644
--- a/projects/ngx-formentry/src/form-entry/form-renderer/form-renderer.component.html
+++ b/projects/ngx-formentry/src/form-entry/form-renderer/form-renderer.component.html
@@ -14,9 +14,10 @@
         [parentComponent]="this"
         [parentGroup]="node.control"
         [labelMap]="labelMap"
-      >
-      </ofe-form-renderer>
+      ></ofe-form-renderer>
     </ofe-tab>
+
+    <!-- TODO: Figure out why is this code doing the same thing as the ErrorRenderer component -->
     <div *ngIf="showErrors()" class="container">
       <div
         data-notification
@@ -66,13 +67,13 @@
     </div>
   </ofe-tab-set>
 </div>
+
 <div *ngIf="node.question.renderingType === 'page'">
   <!--Page Components-->
   <ofe-custom-component-wrapper
     [dark]="theme === 'light'"
     [componentConfigs]="node.question.componentConfigs"
-  >
-  </ofe-custom-component-wrapper>
+  ></ofe-custom-component-wrapper>
   <ofe-form-renderer
     *ngFor="let question of node.question.questions"
     [parentComponent]="this"
@@ -81,6 +82,7 @@
     [labelMap]="labelMap"
   ></ofe-form-renderer>
 </div>
+
 <div *ngIf="node.question.renderingType === 'section' && checkSection(node)">
   <div class="cds--layout">
     <ul class="cds--accordion cds--accordion--end">
@@ -137,8 +139,7 @@
   <ofe-custom-component-wrapper
     [dark]="!(theme === 'light')"
     [componentConfigs]="node.question.componentConfigs"
-  >
-  </ofe-custom-component-wrapper>
+  ></ofe-custom-component-wrapper>
   <div class="cds--form-item">
     <!--LEAF CONTROL-->
     <div class="question-area">
@@ -177,8 +178,7 @@
           [formControlName]="node.question.key"
           [id]="node.question.key + 'id'"
           [question]="node.question"
-        >
-        </ofe-custom-control-wrapper>
+        ></ofe-custom-control-wrapper>
       </div>
 
       <ng-template #nativeControls>
@@ -188,6 +188,7 @@
             *ngSwitchCase="'select'"
             [formControlName]="node.question.key"
             [id]="node.question.key + 'id'"
+            [invalid]="node.control.touched && !node.control.valid"
           >
             <option
               *ngFor="let option of node.question.options"
@@ -203,8 +204,7 @@
               [formControlName]="node.question.key"
               [id]="node.question.key + 'id'"
               (fileChanged)="upload($event)"
-            >
-            </ofe-file-upload>
+            ></ofe-file-upload>
           </div>
 
           <textarea
@@ -233,6 +233,7 @@
             [componentID]="node.question.key + 'id'"
             [formControlName]="node.question.key"
             [id]="node.question.key + 'id'"
+            [invalid]="node.control.touched && !node.control.valid"
           ></ofe-remote-select>
 
           <ofe-ngx-date-time-picker
@@ -243,10 +244,13 @@
             [formControlName]="node.question.key"
             *ngSwitchCase="'date'"
             [datePickerFormat]="node.question.datePickerFormat"
-          >
-          </ofe-ngx-date-time-picker>
+          ></ofe-ngx-date-time-picker>
+
           <ng-select
-            [ngClass]="{ 'afe-custom': theme === 'light' }"
+            [ngClass]="{
+              'afe-custom': theme === 'light',
+              invalid: node.control.touched && !node.control.valid ? true : null
+            }"
             [id]="node.question.key + 'id'"
             *ngSwitchCase="'multi-select'"
             [multiple]="true"
@@ -254,6 +258,7 @@
             placeholder=""
             clearAllText="Clear"
             [formControlName]="node.question.key"
+            [invalid]="node.control.touched && !node.control.valid"
           >
             <ng-option
               *ngFor="let option of node.question.options"
@@ -264,12 +269,16 @@
           </ng-select>
 
           <ng-select
-            [ngClass]="{ 'afe-custom': theme === 'light' }"
+            [ngClass]="{
+              'afe-custom': theme === 'light',
+              invalid: node.control.touched && !node.control.valid ? true : null
+            }"
             [id]="node.question.key + 'id'"
             *ngSwitchCase="'single-select'"
             placeholder=""
             clearAllText="Clear"
             [formControlName]="node.question.key"
+            [invalid]="node.control.touched && !node.control.valid"
           >
             <ng-option
               *ngFor="let option of node.question.options"
@@ -289,8 +298,8 @@
             [minlength]="node.question.extras.questionOptions.minLength"
             [formControlName]="node.question.key"
             [attr.placeholder]="node.question.placeholder | translate"
-          >
-          </ofe-number-input>
+            [invalid]="node.control.touched && !node.control.valid"
+          ></ofe-number-input>
 
           <div *ngSwitchCase="'workspace-launcher'">
             <ofe-workspace-launcher
@@ -378,7 +387,7 @@
             </div>
           </div>
           <ofe-appointments-overview [node]="node"></ofe-appointments-overview>
-          <div *ngIf="hasErrors()">
+          <div class="error" *ngIf="hasErrors()">
             <div *ngFor="let e of errors()">
               <span class="text-danger">{{ e }}</span>
             </div>
@@ -406,7 +415,7 @@
 <label
   *ngIf="node.control && node.control.alert && node.control.alert !== ''"
   class="cds--label text-warn"
-  style="display: flex; align-items: center; margin: 0.125rem 0"
+  style="display: flex; align-items: center; margin: 0.25rem 0"
 >
   <svg
     focusable="false"
@@ -476,7 +485,9 @@ <h4 style="margin: 2px; font-weight: bold">
               [node]="child.children[question.key]"
               [parentGroup]="child.control"
               [labelMap]="labelMap"
-            ></ofe-form-renderer>
+            >
+            </ofe-form-renderer>
+
             <div>{{ child.orderNumber }}</div>
             <div class="cds--layout">
               <button
@@ -509,6 +520,7 @@ <h4 style="margin: 2px; font-weight: bold">
               [parentGroup]="child.control"
               [labelMap]="labelMap"
             ></ofe-form-renderer>
+
             <button
               type="button "
               class="cds--btn cds--btn--danger cds--btn--sm"
@@ -539,6 +551,7 @@ <h4 style="margin: 2px; font-weight: bold">
               [labelMap]="labelMap"
               [controlId]="i"
             ></ofe-form-renderer>
+
             <button
               type="button"
               style="width: 100px"
@@ -569,6 +582,7 @@ <h4 style="margin: 2px; font-weight: bold">
               [labelMap]="labelMap"
               [controlId]="i"
             ></ofe-form-renderer>
+
             <button
               type="button"
               style="width: 100px"
@@ -604,6 +618,7 @@ <h4 style="margin: 2px; font-weight: bold">
     </div>
   </div>
 </div>
+
 <div
   *ngIf="node.question.controlType === 2"
   [hidden]="node.control.hidden"
diff --git a/projects/ngx-formentry/src/form-entry/form-renderer/form-renderer.component.scss b/projects/ngx-formentry/src/form-entry/form-renderer/form-renderer.component.scss
index e6c24808..b29f217c 100644
--- a/projects/ngx-formentry/src/form-entry/form-renderer/form-renderer.component.scss
+++ b/projects/ngx-formentry/src/form-entry/form-renderer/form-renderer.component.scss
@@ -81,7 +81,7 @@ li:hover {
   border-style: ridge;
   border-width: 1px;
   border-color: #337ab7;
-  margin-top: 2px;
+  margin-top: 0.25rem;
 }
 
 .hide-info {
@@ -134,7 +134,7 @@ ng-select.form-control {
 }
 
 .error {
-  margin-bottom: 3rem;
+  margin-top: 0.25rem;
 }
 
 .afe-control {
@@ -183,3 +183,19 @@ ng-select.form-control {
 .custom-text-area {
   width: 100%;
 }
+
+.container {
+  .cds--inline-notification--error {
+    display: flex;
+    align-items: center;
+
+    svg {
+      margin-left: 1rem;
+      margin-block-start: 0;
+    }
+  }
+
+  .cds--inline-notification--low-contrast::before {
+    border-width: 1px 1px 0 0;
+  }
+}
diff --git a/projects/ngx-formentry/src/form-entry/utils/messages.ts b/projects/ngx-formentry/src/form-entry/utils/messages.ts
index cb744a28..6a3de285 100644
--- a/projects/ngx-formentry/src/form-entry/utils/messages.ts
+++ b/projects/ngx-formentry/src/form-entry/utils/messages.ts
@@ -1,19 +1,27 @@
 export class Messages {
-  public static readonly requiredField = 'This field is required!';
+  public static readonly requiredField = 'This field is required';
 
-  public static readonly invalidDate = 'Provided date is invalid!';
+  public static readonly invalidDate =
+    'Invalid date. Please select a valid date';
 
-  public static readonly futureDateRestriction = 'Future date is not allowed!';
+  public static readonly futureDateRestriction =
+    'Dates in the future are not allowed';
 
-  public static readonly minLength = 'Min Length should be {minLength}';
+  public static readonly minLength =
+    'Please enter a value with at least {minLength} characters';
 
-  public static readonly maxLength = 'Max Length should be {maxLength}';
+  public static readonly maxLength =
+    'Please enter a value with no more than {maxLength} characters';
 
-  public static readonly maxDate = 'Max Date should be {maxDate}';
+  public static readonly maxDate =
+    'Please select a date that is on or before {maxDate}';
 
-  public static readonly minDate = 'Min Date should be {minDate}';
+  public static readonly minDate =
+    'Please select a date that is on or after {minDate}';
 
-  public static readonly max = 'Max value should be {max}';
+  public static readonly max =
+    'Please enter a value less than or equal to {max}';
 
-  public static readonly min = 'Min value should be {min}';
+  public static readonly min =
+    'Please enter a value greater than or equal to {min}';
 }
diff --git a/projects/ngx-formentry/styles/ngx-formentry.css b/projects/ngx-formentry/styles/ngx-formentry.css
index 43597b52..3916382f 100644
--- a/projects/ngx-formentry/styles/ngx-formentry.css
+++ b/projects/ngx-formentry/styles/ngx-formentry.css
@@ -1,8 +1,18 @@
 .ng-select {
-  padding-bottom: 1.25em;
+  padding-bottom: 0.25em;
   min-width: 16rem;
 }
 
+/* error state */
+.ng-select.invalid > .ng-select-container {
+  outline: 2px solid #da1e28;
+  outline-offset: -2px;
+}
+
+.ng-select.invalid > .ng-select-container::after {
+  border: none;
+}
+
 .ng-select.ng-select-disabled .ng-select-container:after {
   border-bottom-color: transparent;
 }
@@ -89,8 +99,7 @@
     width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
 }
 
-.ng-select .ng-select-container .ng-value-container .ng-input {
-  bottom: 0.4375em;
+.ng-select .ng-select-container .ng-input {
   padding: 0 1rem;
 }
 
@@ -228,7 +237,7 @@
 }
 
 .ng-dropdown-panel {
-  margin-top: -1rem;
+  margin-top: 0;
   background: #fff;
   left: 0;
 }
@@ -353,6 +362,7 @@
   padding-left: 5px;
   padding-right: 0;
 }
+
 .ng-select-container {
   background-color: #f4f4f4;
 }
diff --git a/src/app/adult-1.6.json b/src/app/adult-1.6.json
index 4ab75375..8e7d33e9 100644
--- a/src/app/adult-1.6.json
+++ b/src/app/adult-1.6.json
@@ -3361,9 +3361,7 @@
                   "type": "obs",
                   "hide": {
                     "field": "tb_current",
-                    "value": [
-                      "b8aa06ca-93c6-40ea-b144-c74f841926f4"
-                    ]
+                    "value": ["b8aa06ca-93c6-40ea-b144-c74f841926f4"]
                   },
                   "id": "__ptxCzFD2s"
                 }
@@ -6992,9 +6990,7 @@
                   "type": "obs",
                   "hide": {
                     "field": "q26f",
-                    "value": [
-                      "b8aa06ca-93c6-40ea-b144-c74f841926f4"
-                    ]
+                    "value": ["b8aa06ca-93c6-40ea-b144-c74f841926f4"]
                   },
                   "id": "__Jywyp94Lw"
                 }
@@ -8015,16 +8011,7 @@
               "questionOptions": {
                 "concept": "318a5e8b-218c-4f66-9106-cd581dec1f95",
                 "rendering": "date",
-                "weeksList": [
-                  2,
-                  4,
-                  6,
-                  8,
-                  12,
-                  16,
-                  24,
-                  36
-                ]
+                "weeksList": [2, 4, 6, 8, 12, 16, 24, 36]
               },
               "validators": [
                 {
@@ -8054,17 +8041,7 @@
               "questionOptions": {
                 "concept": "a8a666ba-1350-11df-a1f1-0026b9348838",
                 "rendering": "date",
-                "weeksList": [
-                  2,
-                  4,
-                  6,
-                  8,
-                  12,
-                  16,
-                  20,
-                  24,
-                  36
-                ]
+                "weeksList": [2, 4, 6, 8, 12, 16, 20, 24, 36]
               },
               "validators": [
                 {
@@ -8200,4 +8177,4 @@
       ]
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/src/assets/carbon.select.theme.css b/src/assets/carbon.select.theme.css
index a0761cf7..6093d747 100644
--- a/src/assets/carbon.select.theme.css
+++ b/src/assets/carbon.select.theme.css
@@ -1,7 +1,7 @@
 .ng-select {
   font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono',
     'Bitstream Vera Sans Mono', Courier, monospace;
-  padding-bottom: 1.25em;
+  padding-bottom: 0.25em;
 }
 
 .ng-select.ng-select-disabled .ng-select-container:after {
@@ -80,7 +80,7 @@
   transition: border-color 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
 }
 
-.ng-select .ng-select-container .ng-value-container {
+.ng-select .ng-select-container {
   align-items: stretch;
   padding: 0;
   border-top: 0.84375em solid transparent;
@@ -95,7 +95,7 @@
     width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
 }
 
-.ng-select .ng-select-container .ng-value-container .ng-input {
+.ng-select .ng-select-container .ng-input {
   bottom: 0.4375em;
   padding: 0 1rem;
 }
@@ -128,11 +128,7 @@
   margin: 0 0.4375em 0.4375em 0;
 }
 
-[dir='rtl']
-  .ng-select.ng-select-multiple
-  .ng-select-container
-  .ng-value-container
-  .ng-value {
+[dir='rtl'] .ng-select.ng-select-multiple .ng-select-container .ng-value {
   margin: 0 0 0.4375em 0.4375em;
 }
 
diff --git a/src/translations/en.json b/src/translations/en.json
index d8a8a4a6..2415d8e6 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -1,53 +1,53 @@
 {
-  "requiredField": "This field is required!",
-  "invalidDate": "Provided date is invalid!",
-  "futureDateRestriction": "Future date is not allowed!",
-  "minLength": "Min Length should be {minLength}",
-  "maxLength": "Max Length should be {maxLength}",
-  "maxDate": "Max Date should be {maxDate}",
-  "minDate": "Min Date should be {minDate}",
-  "max": "Max value should be {max}",
-  "min": "Min value should be {min}",
-  "previousValue": "Previous Value",
+  "aDayAgo": "a day ago",
   "add": "Add",
-  "remove": "Remove",
-  "useValue": "Use Value",
-  "componentLoadingFailed": "Component Loading failed...",
-  "loadingComponent": "Loading Component...",
-  "weeks": "Weeks",
-  "selectWeeks": "Select Weeks",
-  "enterMoreCharacters": "Please enter 2 or more characters",
-  "addSecond":"Add a second",
-  "minusSecond":"Minus a second",
-  "addMinute":"Add a minute",
-  "minusMinute":"Minus a minute",
-  "addHour":"Add a hour",
-  "minusHour":"Minus a hour",
-  "previousMonth":"Previous month",
-  "nextMonth":"Next month",
-  "previousYear":"Previous year",
-  "nextYear":"Next year",
-  "previous21Years":"Previous 21 years",
-  "next21Years":"Next 21 years",
-  "changeToMonthView":"Change to month view",
-  "chooseMonthAndYear":"Choose month and year",
+  "addHour": "Add a hour",
+  "addMinute": "Add a minute",
+  "addSecond": "Add a second",
   "aFewSecondsAgo": "a few seconds ago",
   "aMinuteAgo": "a minute ago",
-  "minutesAgo": " minutes ago",
-  "anHourAgo": "an hour ago",
-  "hoursAgo": " hours ago",
-  "aDayAgo": "a day ago",
-  "daysAgo": " days ago",
   "aMonthAgo": "a month ago",
-  "monthsAgo": " months ago",
+  "anHourAgo": "an hour ago",
   "aYearAgo": "a year ago",
-  "yearsAgo": " years ago",
-  "cancel":"Cancel",
-  "set":"Set",
-  "from":"From",
-  "to":"To",
-  "fix": "Fix",
+  "cancel": "Cancel",
+  "changeToMonthView": "Change to month view",
+  "chooseMonthAndYear": "Choose month and year",
   "clearEntry": "Are you sure you want to clear this entry?",
+  "componentLoadingFailed": "Component Loading failed...",
+  "daysAgo": " days ago",
   "deleteEntry": "Are you sure you want to delete this item?",
-  "maxEntries": "Cannot have more than {max} entries"
+  "enterMoreCharacters": "Please enter 2 or more characters",
+  "fix": "Fix",
+  "from": "From",
+  "futureDateRestriction": "Dates in the future are not allowed",
+  "hoursAgo": " hours ago",
+  "invalidDate": "Invalid date. Please select a valid date",
+  "loadingComponent": "Loading Component...",
+  "max": "Please enter a value less than or equal to {max}",
+  "maxDate": "Please select a date that is on or before {maxDate}",
+  "maxEntries": "Cannot have more than {max} entries",
+  "maxLength": "Please enter a value with no more than {maxLength} characters",
+  "min": "Please enter a value greater than or equal to {min}",
+  "minDate": "Please select a date that is on or after {minDate}",
+  "minLength": "Please enter a value with at least {minLength} characters",
+  "minusHour": "Minus a hour",
+  "minusMinute": "Minus a minute",
+  "minusSecond": "Minus a second",
+  "minutesAgo": " minutes ago",
+  "monthsAgo": " months ago",
+  "next21Years": "Next 21 years",
+  "nextMonth": "Next month",
+  "nextYear": "Next year",
+  "previous21Years": "Previous 21 years",
+  "previousMonth": "Previous month",
+  "previousValue": "Previous Value",
+  "previousYear": "Previous year",
+  "remove": "Remove",
+  "requiredField": "This field is required",
+  "selectWeeks": "Select Weeks",
+  "set": "Set",
+  "to": "To",
+  "useValue": "Use Value",
+  "weeks": "Weeks",
+  "yearsAgo": " years ago"
 }
diff --git a/src/translations/fr.json b/src/translations/fr.json
index ac64ee26..b4ce1b32 100644
--- a/src/translations/fr.json
+++ b/src/translations/fr.json
@@ -1,53 +1,53 @@
 {
-  "requiredField": "Ce champs est requis!",
-  "invalidDate": "La date fournie n'est pas valide!",
-  "futureDateRestriction": "Une date future n'est pas autorisée!",
-  "minLength": "La longueur minimale doit être de {minLength}",
-  "maxLength": "La longueur maximale doit être {maxLength}",
-  "maxDate": "La date maximale doit être {maxDate}",
-  "minDate": "La date minimale doit être {minDate}",
-  "max": "La valeur maximale doit être {max}",
-  "min": "La valeur minimale doit être {min}",
-  "previousValue": "Valeur précédente",
+  "aDayAgo": "il y a un jour",
   "add": "Ajouter",
-  "remove": "Enlever",
-  "useValue": "Utiliser la valeur",
-  "componentLoadingFailed": "Le chargement du composant a échoué...",
-  "loadingComponent": "Chargement du composant...",
-  "weeks": "Semaines",
-  "selectWeeks": "Sélectionnez des semaines",
-  "enterMoreCharacters": "Veuillez entrer au moins 2 caractères",
-  "addSecond": "Ajouter une seconde",
-  "minusSecond": "Enlever une seconde",
-  "addMinute": " Ajouter une minute",
-  "minusMinute": "Enlever une minute",
   "addHour": "Ajouter une heure",
-  "minusHour": "Enlever une heure",
-  "previousMonth": "Mois précédent",
-  "nextMonth": "Mois suivant",
-  "previousYear": "Année précédente",
-  "nextYear": "Année suivante",
-  "previous21Years": "21 dernières années",
-  "next21Years": "Prochaines 21 années",
-  "changeToMonthView": "Changer pour une vue mensuelle",
-  "chooseMonthAndYear": "Choisissez le mois et l'année",
+  "addMinute": " Ajouter une minute",
+  "addSecond": "Ajouter une seconde",
   "aFewSecondsAgo": "il y a quelques secondes",
   "aMinuteAgo": "il y a une minute",
-  "minutesAgo": " minutes",
-  "anHourAgo": "il y a une heure",
-  "hoursAgo": " heures",
-  "aDayAgo": "il y a un jour",
-  "daysAgo": " jours",
   "aMonthAgo": "il y a un mois",
-  "monthsAgo": " mois",
+  "anHourAgo": "il y a une heure",
   "aYearAgo": "il y a un an",
-  "yearsAgo": " ans",
   "cancel": "Annuler",
-  "set": "Paramétrer",
-  "from": "A partir de",
-  "to": "Jusqu'à",
-  "fix": "Corriger",
+  "changeToMonthView": "Changer pour une vue mensuelle",
+  "chooseMonthAndYear": "Choisissez le mois et l'année",
   "clearEntry": "Êtes-vous sûr(e) de vouloir effacer cette entrée ?",
+  "componentLoadingFailed": "Le chargement du composant a échoué...",
+  "daysAgo": " jours",
   "deleteEntry": "Êtes-vous sûr(e) de vouloir supprimer cet élément ?",
-  "maxEntries":"Vous ne pouvez pas avoir plus de {max} entrées"
+  "enterMoreCharacters": "Veuillez entrer au moins 2 caractères",
+  "fix": "Corriger",
+  "from": "A partir de",
+  "futureDateRestriction": "Les dates futures ne sont pas autorisées",
+  "hoursAgo": " heures",
+  "invalidDate": "Date invalide. Veuillez sélectionner une date valide",
+  "loadingComponent": "Chargement du composant...",
+  "max": "Veuillez entrer une valeur inférieure ou égale à {max}",
+  "maxDate": "Veuillez sélectionner une date qui est au plus tard le {maxDate}",
+  "maxEntries": "Vous ne pouvez pas avoir plus de {max} entrées",
+  "maxLength": "Veuillez saisir une valeur de {maxLength} caractères maximum",
+  "min": "Veuillez entrer une valeur supérieure ou égale à {min}",
+  "minDate": "Veuillez sélectionner une date qui est au plus tôt le {minDate}",
+  "minLength": "Veuillez saisir une valeur d'au moins {minLength} caractères",
+  "minusHour": "Enlever une heure",
+  "minusMinute": "Enlever une minute",
+  "minusSecond": "Enlever une seconde",
+  "minutesAgo": " minutes",
+  "monthsAgo": " mois",
+  "next21Years": "Prochaines 21 années",
+  "nextMonth": "Mois suivant",
+  "nextYear": "Année suivante",
+  "previous21Years": "21 dernières années",
+  "previousMonth": "Mois précédent",
+  "previousValue": "Valeur précédente",
+  "previousYear": "Année précédente",
+  "remove": "Enlever",
+  "requiredField": "Ce champs est requis",
+  "selectWeeks": "Sélectionnez des semaines",
+  "set": "Paramétrer",
+  "to": "Jusqu'à",
+  "useValue": "Utiliser la valeur",
+  "weeks": "Semaines",
+  "yearsAgo": " ans"
 }
diff --git a/src/translations/km.json b/src/translations/km.json
index 5083bdc8..7bdf0199 100644
--- a/src/translations/km.json
+++ b/src/translations/km.json
@@ -1,67 +1,66 @@
 {
-    "aDayAgo": "មួយថ្ងៃមុន",
-    "aFewSecondsAgo": "ប៉ុន្មានវិនាទីមុន",
-    "aMinuteAgo": "មួយនាទីមុន",
-    "aMonthAgo": "មួយ​ខែមុន",
-    "aYearAgo": "មួយ​ឆ្នាំមុន",
-    "add": "បន្ថែម",
-    "addHour": "បន្ថែមមួយម៉ោង",
-    "addMinute": "បន្ថែមមួយនាទី",
-    "addSecond": "បន្ថែមមួយវិនាទី",
-    "anHourAgo": "មួយ​ម៉ោង​មុន",
-    "cancel": "បោះបង់",
-    "changeToMonthView": "ប្តូរទម្រង់ទៅជាខែ",
-    "chooseMonthAndYear": "ជ្រើសរើសខែ និងឆ្នាំ",
-    "clearEntry": "តើអ្នកពិតជាចង់សម្អាតធាតុនេះ?",
-    "closeThisPanel": "បិទប្រអប់នេះ",
-    "componentLoadingFailed": "ការចម្លងទិន្នន័យ​បរាជ័យ...",
-    "daysAgo": " ថ្ងៃ​មុន",
-    "deleteEntry": "តើអ្នកពិតជាចង់លុបធាតុនេះទេ?",
-    "discardButton": "បោះបង់",
-    "enterMoreCharacters": "សូមបញ្ចូលតួអក្សរ ២ ឬច្រើន។",
-    "errorFetchingFormData": "ការទាញយកទិន្នន័យពីទម្រង់មិនដំណើរការ។ ព័ត៌មានលម្អិត៖ {detail}",
-    "errorLoadingForm": "ទម្រង់ចម្លងទិន្នន័យមិនដំណើរការ",
-    "errorWithForm": "ទម្រង់នេះមិនដំណើរការ",
-    "fix": "ជួសជុល",
-    "formSubmissionFailed": "ការបញ្ជូនទម្រង់ទិន្នន័យមិនដំណើរការ។ បញ្ហាមិនដំណើរការ៖ {error}",
-    "formSubmittedSuccessfully": "Tទម្រង់ទិន្នន័យបានបញ្ជូនដោយជោគជ័យ",
-    "from": "ពី",
-    "futureDateRestriction": "មិនអនុញ្ញាតិឱ្យបញ្ចូលកាលបរិច្ឆេទអនាគត!",
-    "hoursAgo": " ច្រើន​ម៉ោង​កន្លងទៅ",
-    "invalidDate": "កាលបរិច្ឆេទ​ដែល​បំពេញ​មិន​ត្រឹមត្រូវ!",
-    "loading": "កំពុងចម្លង...",
-    "loadingComponent": "កំពុង​ចម្លងទិន្នន័យ...",
-    "max": "តម្លៃអតិបរមាគួរតែមាន {max}",
-    "maxDate": "កាលបរិច្ឆេទអតិបរមាគួរតែមាន {maxDate}",
-    "maxEntries": "មិនអាចមានធាតុច្រើនជាង {max} ទេ",
-    "maxLength": "ចំនួនអក្សរអតិបរមាគួរតែមាន {maxLength}",
-    "min": "តម្លៃអប្បបរមាគួរតែមាន {min}",
-    "minDate": "កាលបរិច្ឆេទអប្បបរមាគួរតែមាន {minDate}",
-    "minLength": "ចំនួនអក្សរអប្បបរមាគួរតែមាន {minLength}",
-    "minusHour": "ដកមួយម៉ោង",
-    "minusMinute": "ដកមួយនាទី",
-    "minusSecond": "ដកមួយវិនាទី",
-    "minutesAgo": " ប៉ុន្មាននាទីមុន",
-    "monthsAgo": " ច្រើន​ខែ​កន្លងមក",
-    "next21Years": "២១ ឆ្នាំក្រោយ",
-    "nextMonth": "ខែក្រោយ",
-    "nextYear": "ឆ្នាំក្រោយ",
-    "patientIdentifierDuplication": "ស្ទួនលេខកូដអត្តសញ្ញាណអ្នកជំងឺ",
-    "patientIdentifierDuplicationDescription": "លេខកូដអត្តសញ្ញាណដែលបានបញ្ចូល សម្រាប់អ្នកជំងឺមានរួចហើយ។ សូមពិនិត្យមើលលេខកូដអត្តសញ្ញាណ ហើយព្យាយាមម្តងទៀត",
-    "previous21Years": "២១ ឆ្នាំមុន",
-    "previousMonth": "ខែមុន",
-    "previousValue": "តម្លៃពីមុន",
-    "previousYear": "ឆ្នាំមុន",
-    "remove": "ដកចេញ",
-    "requiredField": "ប្រអប់​នេះ​ត្រូវតែ​បំពេញ!",
-    "saveAndCloseButton": "រក្សាទុក និងបិទ",
-    "selectWeeks": "ជ្រើសរើសសប្តាហ៍",
-    "set": "កំណត់",
-    "submitting": "បញ្ជូន",
-    "to": "ទៅ",
-    "tryOpeningAnotherForm": "ព្យាយាមបើកទម្រង់ផ្សេងទៀត",
-    "useValue": "ប្រើតម្លៃ",
-    "weeks": "សប្តាហ៍",
-    "yearsAgo": " ឆ្នាំមុន"
-  }
-  
\ No newline at end of file
+  "aDayAgo": "មួយថ្ងៃមុន",
+  "add": "បន្ថែម",
+  "addHour": "បន្ថែមមួយម៉ោង",
+  "addMinute": "បន្ថែមមួយនាទី",
+  "addSecond": "បន្ថែមមួយវិនាទី",
+  "aFewSecondsAgo": "ប៉ុន្មានវិនាទីមុន",
+  "aMinuteAgo": "មួយនាទីមុន",
+  "aMonthAgo": "មួយ​ខែមុន",
+  "anHourAgo": "មួយ​ម៉ោង​មុន",
+  "aYearAgo": "មួយ​ឆ្នាំមុន",
+  "cancel": "បោះបង់",
+  "changeToMonthView": "ប្តូរទម្រង់ទៅជាខែ",
+  "chooseMonthAndYear": "ជ្រើសរើសខែ និងឆ្នាំ",
+  "clearEntry": "តើអ្នកពិតជាចង់សម្អាតធាតុនេះ?",
+  "closeThisPanel": "បិទប្រអប់នេះ",
+  "componentLoadingFailed": "ការចម្លងទិន្នន័យ​បរាជ័យ...",
+  "daysAgo": " ថ្ងៃ​មុន",
+  "deleteEntry": "តើអ្នកពិតជាចង់លុបធាតុនេះទេ?",
+  "discardButton": "បោះបង់",
+  "enterMoreCharacters": "សូមបញ្ចូលតួអក្សរ ២ ឬច្រើន។",
+  "errorFetchingFormData": "ការទាញយកទិន្នន័យពីទម្រង់មិនដំណើរការ។ ព័ត៌មានលម្អិត៖ {detail}",
+  "errorLoadingForm": "ទម្រង់ចម្លងទិន្នន័យមិនដំណើរការ",
+  "errorWithForm": "ទម្រង់នេះមិនដំណើរការ",
+  "fix": "ជួសជុល",
+  "formSubmissionFailed": "ការបញ្ជូនទម្រង់ទិន្នន័យមិនដំណើរការ។ បញ្ហាមិនដំណើរការ៖ {error}",
+  "formSubmittedSuccessfully": "Tទម្រង់ទិន្នន័យបានបញ្ជូនដោយជោគជ័យ",
+  "from": "ពី",
+  "futureDateRestriction": "មិនអនុញ្ញាតឱ្យមានកាលបរិច្ឆេទនៅថ្ងៃអនាគតទេ",
+  "hoursAgo": " ច្រើន​ម៉ោង​កន្លងទៅ",
+  "invalidDate": "កាលបរិច្ឆេទមិនត្រឹមត្រូវ។ សូមជ្រើសរើសកាលបរិច្ឆេទត្រឹមត្រូវ",
+  "loading": "កំពុងចម្លង...",
+  "loadingComponent": "កំពុង​ចម្លងទិន្នន័យ...",
+  "max": "សូមបញ្ចូលតម្លៃដែលតិចជាងឬស្មើនឹង {max}",
+  "maxDate": "សូមជ្រើសរើសកាលបរិច្ឆេទដែលនៅឬមុន {maxDate}",
+  "maxEntries": "មិនអាចមានច្រើនជាង {max} ធាតុ",
+  "maxLength": "សូមបញ្ចូលតម្លៃដែលមិនលើសពី {maxLength} តួអក្សរ",
+  "min": "សូមបញ្ចូលតម្លៃដែលធំជាងឬស្មើនឹង {min}",
+  "minDate": "សូមជ្រើសរើសកាលបរិច្ឆេទដែលនៅឬក្រោយ {minDate}",
+  "minLength": "សូមបញ្ចូលតម្លៃដែលយ៉ាងហោចណាស់ {minLength} តួអក្សរ",
+  "minusHour": "ដកមួយម៉ោង",
+  "minusMinute": "ដកមួយនាទី",
+  "minusSecond": "ដកមួយវិនាទី",
+  "minutesAgo": " ប៉ុន្មាននាទីមុន",
+  "monthsAgo": " ច្រើន​ខែ​កន្លងមក",
+  "next21Years": "២១ ឆ្នាំក្រោយ",
+  "nextMonth": "ខែក្រោយ",
+  "nextYear": "ឆ្នាំក្រោយ",
+  "patientIdentifierDuplication": "ស្ទួនលេខកូដអត្តសញ្ញាណអ្នកជំងឺ",
+  "patientIdentifierDuplicationDescription": "លេខកូដអត្តសញ្ញាណដែលបានបញ្ចូល សម្រាប់អ្នកជំងឺមានរួចហើយ។ សូមពិនិត្យមើលលេខកូដអត្តសញ្ញាណ ហើយព្យាយាមម្តងទៀត",
+  "previous21Years": "២១ ឆ្នាំមុន",
+  "previousMonth": "ខែមុន",
+  "previousValue": "តម្លៃពីមុន",
+  "previousYear": "ឆ្នាំមុន",
+  "remove": "ដកចេញ",
+  "requiredField": "ប្រអប់​នេះ​ត្រូវតែ​បំពេញ",
+  "saveAndCloseButton": "រក្សាទុក និងបិទ",
+  "selectWeeks": "ជ្រើសរើសសប្តាហ៍",
+  "set": "កំណត់",
+  "submitting": "បញ្ជូន",
+  "to": "ទៅ",
+  "tryOpeningAnotherForm": "ព្យាយាមបើកទម្រង់ផ្សេងទៀត",
+  "useValue": "ប្រើតម្លៃ",
+  "weeks": "សប្តាហ៍",
+  "yearsAgo": " ឆ្នាំមុន"
+}