fleetcor-lwc 3.16.0 → 3.18.0

package/README.md

@@ -952,16 +952,30 @@ You can override them as you wish by global css variables as priority.
 <details>
 <summary>Click to expand/collapse</summary>
 
+v.3.18.0
+
+- Bug fix `flt-picklist` component
+
+---
+
+v.3.17.0
+
+- Bug fix `flt-picklist` component
+
+---
+
 v.3.16.0
 
 - Update `flt-input-text` -  it's become more powerfull with type number 
 
 ---
+
 v.3.15.0
 
 - Added to `flt-input-with-picklist` api attribute `inputmode` and `input-type`
 
 ---
+
 v.3.14.0
 
 - Added to `flt-input-text`, `flt-input-email`, `flt-input-phone` api attribute `inputmode`

package/frontend/components/flt/loader/loader.html

@@ -3,6 +3,11 @@
         <div class="flt-loader__circle">
             <div class="flt-loader__inner-circle"></div>
         </div>
-        <slot></slot>
+        <template lwc:if={tempMessage}>
+            <p>{tempMessage}</p>
+        </template>
+        <template lwc:else>
+            <slot></slot>
+        </template>
     </div>
 </template>

package/frontend/components/flt/loader/loader.js

@@ -1,4 +1,7 @@
 import { LightningDomElement } from 'fleetcor-lwc'
+import { api } from 'lwc'
 import './loader.scss'
 
-export default class Loader extends LightningDomElement {}
+export default class Loader extends LightningDomElement {
+    @api tempMessage;
+}

package/frontend/components/flt/picklist/picklist.html

@@ -1,5 +1,11 @@
 <template lwc:render-mode="light">
-    <div class={computedStyles} tabindex="0" onfocus={handleShowView} onblur={handleHideView}>
+    <div 
+        tabindex="0"    
+        class={computedStyles}  
+        onmousedown={handleMousedownView} 
+        onfocus={handleShowView} 
+        onblur={handleHideView}
+    >
         <div class="flt-picklist__wrapp">
             <div class="flt-picklist__wrapp-text">
                 <div lwc:if={placeholderVisible} class="flt-picklist__placeholder">{placeholder}</div>
@@ -10,13 +16,15 @@
                 height="24"
                 viewBox="0 0 24 24"
                 fill="none"
-                class="flt-picklist__view-arrow">
+                class="flt-picklist__view-arrow"
+            >
                 <path
                     d="M19 9L12 16L5 9"
                     stroke-width="2"
                     stroke-linecap="round"
                     stroke-linejoin="round"
-                    class="flt-picklist__view-arrow-path"></path>
+                    class="flt-picklist__view-arrow-path"
+                ></path>
             </svg>
         </div>
         <div class="flt-picklist__dropdown-container">
@@ -28,14 +36,16 @@
                         onclick={handleChange}
                         data-value={option.value}
                         class="flt-picklist__option flt-picklist__option_selected"
-                        lwc:inner-html={option.label}></div>
+                        lwc:inner-html={option.label}
+                    ></div>
                     <div
                         lwc:else
                         onclick={handleChange}
                         key={option.value}
                         data-value={option.value}
                         class="flt-picklist__option"
-                        lwc:inner-html={option.label}></div>
+                        lwc:inner-html={option.label}
+                    ></div>
                 </template>
             </div>
         </div>

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

@@ -75,6 +75,19 @@ export default class Picklist extends SelectElement {
         this.querySelector('.flt-picklist').blur()
     }
 
+    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();
+        }
+    }
+
     handleShowView(event) {
         event.stopPropagation()
         if (!this.disabled) {

package/package.json

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