feat(): add format offer option for bal-input

baloise · Mar 24, 2022 · bec0c3e · bec0c3e
1 parent e4ebdb6
commit bec0c3e
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 5 deletions.
diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
@@ -802,7 +802,7 @@ export namespace Components {
          */
         "inverted": boolean;
         /**
-          * Mask of the input field. It defines what the user can enter and how the format looks like. Currently, only for Switzerland formatted. Formatting for 'contract-number': ' 00/0.000.000' Formatting for 'claim-number': ('73/001217/16.9') //
+          * Mask of the input field. It defines what the user can enter and how the format looks like. Currently, only for Switzerland formatted. Formatting for 'contract-number': '00/0.000.000' Formatting for 'claim-number': ('73/001217/16.9') Formatting for 'offer-number': ('98/7.654.321') //
          */
         "mask"?: 'contract-number' | 'claim-number' | 'offer-number';
         /**
@@ -3199,7 +3199,7 @@ declare namespace LocalJSX {
          */
         "inverted"?: boolean;
         /**
-          * Mask of the input field. It defines what the user can enter and how the format looks like. Currently, only for Switzerland formatted. Formatting for 'contract-number': ' 00/0.000.000' Formatting for 'claim-number': ('73/001217/16.9') //
+          * Mask of the input field. It defines what the user can enter and how the format looks like. Currently, only for Switzerland formatted. Formatting for 'contract-number': '00/0.000.000' Formatting for 'claim-number': ('73/001217/16.9') Formatting for 'offer-number': ('98/7.654.321') //
          */
         "mask"?: 'contract-number' | 'claim-number' | 'offer-number';
         /**

diff --git a/packages/components/src/components/form/bal-input/bal-input.tsx b/packages/components/src/components/form/bal-input/bal-input.tsx
@@ -208,8 +208,9 @@ export class Input implements ComponentInterface, FormInput<string | undefined>
 
   /**
    * Mask of the input field. It defines what the user can enter and how the format looks like. Currently, only for Switzerland formatted.
-   * Formatting for 'contract-number': ' 00/0.000.000'
+   * Formatting for 'contract-number': '00/0.000.000'
    * Formatting for 'claim-number': ('73/001217/16.9')
+   * Formatting for 'offer-number': ('98/7.654.321')
    // */
   @Prop() mask?: 'contract-number' | 'claim-number' | 'offer-number' = undefined
 
@@ -311,6 +312,14 @@ export class Input implements ComponentInterface, FormInput<string | undefined>
           input.value = this.formatPolicy(this.inputValue)
           break
         }
+        case 'offer-number': {
+          this.inputValue = input.value.replace(/\D/g, '')
+          if (this.inputValue.length > MAX_LENGTH_OFFER_NUMBER) {
+            this.inputValue = this.inputValue.substring(0, MAX_LENGTH_OFFER_NUMBER)
+          }
+          input.value = this.formatOffer(this.inputValue)
+          break
+        }
         case 'claim-number': {
           this.inputValue = input.value.replace(/\D/g, '')
           if (this.inputValue.length > MAX_LENGTH_CLAIM_NUMBER) {
@@ -333,7 +342,7 @@ export class Input implements ComponentInterface, FormInput<string | undefined>
    * @output 73/001217/16.9
    * @private
    */
-  private formatClaim(value: string) {
+  private formatClaim(value: string): string {
     if (!value) {
       return ''
     }
@@ -362,14 +371,28 @@ export class Input implements ComponentInterface, FormInput<string | undefined>
    * @output 00/0.000.000
    * @private
    */
-  private formatPolicy(value: string) {
+  private formatPolicy(value: string): string {
     if (!value) {
       return ''
     }
     let newValue = `${value}`.trim()
     if (newValue[0] !== '0') {
       newValue = `0${value}`
     }
+    return this.formatOffer(newValue)
+  }
+
+  /**
+   *
+   * @param value: input number
+   * @output 98/7.654.321
+   * @private
+   */
+  private formatOffer(value: string): string {
+    if (!value) {
+      return ''
+    }
+    const newValue = `${value}`.trim()
     const parts = [
       newValue.substring(0, 2),
       newValue.substring(2, 3),
@@ -516,4 +539,5 @@ export class Input implements ComponentInterface, FormInput<string | undefined>
 
 let InputIds = 0
 const MAX_LENGTH_CONTRACT_NUMBER = 9
+const MAX_LENGTH_OFFER_NUMBER = 9
 const MAX_LENGTH_CLAIM_NUMBER = 11
diff --git a/packages/components/src/components/form/bal-input/stories/bal-input.stories.ts b/packages/components/src/components/form/bal-input/stories/bal-input.stories.ts
@@ -95,10 +95,35 @@ InvalidInput.parameters = {
 export const ContractNumberInput = Template.bind({})
 ContractNumberInput.args = {
   mask: 'contract-number',
+  placeholder: 'Enter only numbers which will be formatted',
 }
 ContractNumberInput.parameters = {
   ...component.sourceCode(ContractNumberInput),
   controls: {
     exclude: excludedControls,
   },
 }
+
+export const ClaimNumberInput = Template.bind({})
+ClaimNumberInput.args = {
+  mask: 'claim-number',
+  placeholder: 'Enter only numbers which will be formatted',
+}
+ClaimNumberInput.parameters = {
+  ...component.sourceCode(ClaimNumberInput),
+  controls: {
+    exclude: excludedControls,
+  },
+}
+
+export const OfferNumberInput = Template.bind({})
+OfferNumberInput.args = {
+  mask: 'offer-number',
+  placeholder: 'Enter only numbers which will be formatted',
+}
+OfferNumberInput.parameters = {
+  ...component.sourceCode(OfferNumberInput),
+  controls: {
+    exclude: excludedControls,
+  },
+}