fleetcor-lwc 3.20.0 → 3.20.2

package/README.md

@@ -851,6 +851,39 @@ This component fully extends from `Input Text`
 
 </details>
 
+#### Collapsible Section Css
+
+```css
+/* this is aquamarine variables */
+
+:root {
+  /* Collapsible Section */
+  --flt-collapsible-section-background: initial;
+  --flt-collapsible-section-padding: initial;
+  --flt-collapsible-section-border: initial;
+  --flt-collapsible-section-border-radius: initial;
+  --flt-collapsible-section-box-shadow: initial;
+  --flt-collapsible-section-opened-header-base-icon-transform: rotate(180deg) scale(
+      -1
+    );
+  --flt-collapsible-section-body-animation-duration: 0.5s;
+  --flt-collapsible-section-body-animation-type: ease;
+  --flt-collapsible-section-header-base-padding: initial;
+  --flt-collapsible-section-header-base-border: initial;
+  --flt-collapsible-section-header-base-border-radius: initial;
+  --flt-collapsible-section-header-base-background: initial;
+  --flt-collapsible-section-header-base-cursor: pointer;
+  --flt-collapsible-section-header-base-title-color: #1a1a1a;
+  --flt-collapsible-section-header-base-font-size: 16px;
+  --flt-collapsible-section-header-base-line-height: 24px;
+  --flt-collapsible-section-header-base-font-weight: 700;
+  --flt-collapsible-section-body-animation-duration: 0.5s;
+  --flt-collapsible-section-body-animation-type: ease;
+  --flt-collapsible-section-header-base-icon-transform: rotate(180deg);
+  --flt-collapsible-section-header-base-icon-fill: #1a1a1a;
+}
+```
+
 ---
 
 ## Interfaces
@@ -1006,29 +1039,6 @@ You can override them as you wish by global css variables as priority.
   --flt-input-phone-border-color-error: #ed123d;
   --flt-input-with-picklist-border-color-success: #59eb9c;
   --flt-input-with-picklist-border-color-error: #ed123d;
-  --flt-collapsible-section-background: initial;
-  --flt-collapsible-section-padding: initial;
-  --flt-collapsible-section-border: initial;
-  --flt-collapsible-section-border-radius: initial;
-  --flt-collapsible-section-box-shadow: initial;
-  --flt-collapsible-section-opened-header-base-icon-transform: rotate(180deg) scale(
-      -1
-    );
-  --flt-collapsible-section-body-animation-duration: 0.5s;
-  --flt-collapsible-section-body-animation-type: ease;
-  --flt-collapsible-section-header-base-padding: initial;
-  --flt-collapsible-section-header-base-border: initial;
-  --flt-collapsible-section-header-base-border-radius: initial;
-  --flt-collapsible-section-header-base-background: initial;
-  --flt-collapsible-section-header-base-cursor: pointer;
-  --flt-collapsible-section-header-base-title-color: #1a1a1a;
-  --flt-collapsible-section-header-base-font-size: 16px;
-  --flt-collapsible-section-header-base-line-height: 24px;
-  --flt-collapsible-section-header-base-font-weight: 700;
-  --flt-collapsible-section-body-animation-duration: 0.5s;
-  --flt-collapsible-section-body-animation-type: ease;
-  --flt-collapsible-section-header-base-icon-transform: rotate(180deg);
-  --flt-collapsible-section-header-base-icon-fill: #1a1a1a;
 }
 ```
 
@@ -1041,6 +1051,19 @@ You can override them as you wish by global css variables as priority.
 <details>
 <summary>Click to expand/collapse</summary>
 
+v.3.20.2
+
+- Bug fix `flt-picklist`
+
+---
+
+v.3.20.1
+
+- Bug fix `flt-input-phone`
+- Collapsible section component documentation updated
+
+---
+
 v.3.20.0
 
 - Added Btn component

package/frontend/components/flt/inputPhone/inputPhone.js

@@ -9,6 +9,12 @@ const CODE_BY_DEFAULT = 'GB'
 const CODE_VALUE_SB = '+44'
 
 export default class InputPhone extends UserDataValidator {
+    codeValue = ''
+    phoneNumber = ''
+    touched
+    focused
+    mask
+
     @api errorMessage
     @api inputLabel
     @api placeholder
@@ -42,26 +48,6 @@ export default class InputPhone extends UserDataValidator {
         }
     }
 
-    get maskOptions() {
-        let settings = {
-            mask: /[1-9]/,
-            overwrite: false,
-            lazy: false
-        }
-
-        if (this.codeValue == CODE_VALUE_SB) {
-            settings = {
-                mask: '#000000000',
-                definitions: {
-                    '#': /[1-9]/
-                },
-                overwrite: false,
-                lazy: false
-            }
-        }
-        return settings
-    }
-
     @api getData(silent) {
         return {
             ...super.getData(silent),
@@ -99,8 +85,6 @@ export default class InputPhone extends UserDataValidator {
         return result
     }
 
-    phoneNumber = ''
-
     @api setCode(countryCode) {
         const restore = !this.touched
         this.codeValue = COUNTRIES.find((c) => c.code === countryCode)?.dialCode || this.codeValue
@@ -119,22 +103,28 @@ export default class InputPhone extends UserDataValidator {
         }
     }
 
-    codeValue = ''
-    touched
-    focused
-    mask
-
-    get prefix() {
-        return this.codeValue === CODE_VALUE_SB ? CODE_VALUE_SB + '(0)' : this.codeValue
-    }
+    get maskOptions() {
+        let settings = {
+            mask: /^[1-9]\d*$/,
+            overwrite: false,
+            lazy: false
+        }
 
-    handleFocus() {
-        this.focused = true
-        this.touched = true
+        if (this.codeValue == CODE_VALUE_SB) {
+            settings = {
+                mask: '#000000000',
+                definitions: {
+                    '#': /[1-9]/
+                },
+                overwrite: false,
+                lazy: false
+            }
+        }
+        return settings
     }
 
-    handleBlur() {
-        this.focused = false
+    get prefix() {
+        return this.codeValue === CODE_VALUE_SB ? CODE_VALUE_SB + '(0)' : this.codeValue
     }
 
     get inputStyle() {
@@ -171,6 +161,22 @@ export default class InputPhone extends UserDataValidator {
         this.codeValue = this.codeValue || this.codePrefixByCountryCode
     }
 
+    renderedCallback() {
+        super.renderedCallback()
+        if (!this.mask) {
+            this.reInitIMask()
+            this.querySelector('input').onpaste = (event) => {
+                let value = event.clipboardData.getData('text/plain').replace(/[^\w\\s]/gi, '')
+                if (value?.at(0) == '0') {
+                    value = CODE_VALUE_SB + value.slice(1)
+                } else {
+                    value = '+' + value
+                }
+                this.querySelector('input').value = ''
+            }
+        }
+    }
+
     reInitIMask() {
         this.mask?.destroy()
         this.mask = null
@@ -208,22 +214,6 @@ export default class InputPhone extends UserDataValidator {
         })
     }
 
-    renderedCallback() {
-        super.renderedCallback()
-        if (!this.mask) {
-            this.reInitIMask()
-            this.querySelector('input').onpaste = (event) => {
-                let value = event.clipboardData.getData('text/plain').replace(/[^\w\\s]/gi, '')
-                if (value?.at(0) == '0') {
-                    value = CODE_VALUE_SB + value.slice(1)
-                } else {
-                    value = '+' + value
-                }
-                this.querySelector('input').value = ''
-            }
-        }
-    }
-
     handleFlagChanged(event) {
         this.codeValue = event.detail.value
         this.reInitIMask()
@@ -237,4 +227,13 @@ export default class InputPhone extends UserDataValidator {
             })
         )
     }
+
+    handleFocus() {
+        this.focused = true
+        this.touched = true
+    }
+
+    handleBlur() {
+        this.focused = false
+    }
 }

package/frontend/components/flt/picklist/picklist.js

@@ -76,15 +76,10 @@ export default class Picklist extends SelectElement {
     }
 
     handleMousedownView(event) {
-        let classList = event.target.parentElement.classList;
-        
-        if (
-            event.currentTarget === document.activeElement &&
-            !classList.contains('flt-picklist__dropdown') &&
-            !classList.contains('flt-picklist__dropdown-container')
-        ) {
-            event.currentTarget.blur();
-            event.preventDefault();
+        const dropdown = event.target.closest('.flt-picklist__dropdown')
+        if (event.currentTarget === document.activeElement && !dropdown) {
+            event.currentTarget.blur()
+            event.preventDefault()
         }
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "fleetcor-lwc",
-    "version": "3.20.0",
+    "version": "3.20.2",
     "description": "LWC framework by Fleetcor",
     "repository": {
         "type": "git",