fleetcor-lwc 3.7.0 → 3.8.0

package/frontend/components/flt/inputText/inputText.js

@@ -40,7 +40,7 @@ export default class InputText extends InputElement {
             'flt-input-text': true,
             'flt-input-text_disabled': this.disabled,
             'flt-input-text_active': this.value || this.focused || this.placeholderVisible,
-            'flt-input-text_error': this.touched && !this.isValid(),
+            'flt-input-text_error': !this.focused && this.touched && !this.isValid(),
             'flt-input-text_success': this.value && this.isValid()
         })
     }
@@ -50,7 +50,7 @@ export default class InputText extends InputElement {
         if (this.disabled) return
         this.focused = true
         this.dispatchEvent(
-            new CustomEvent('focus_happend', {
+            new CustomEvent('focus', {
                 detail: null,
                 cancelable: true,
                 bubbles: true
@@ -66,7 +66,7 @@ export default class InputText extends InputElement {
         this.value = (event.target.value || '').trimEnd()
         event.target.value = this.value
         this.dispatchEvent(
-            new CustomEvent('blur_happend', {
+            new CustomEvent('blur', {
                 detail: null,
                 cancelable: true,
                 bubbles: true

package/frontend/components/flt/inputText/inputText.scss

@@ -5,7 +5,7 @@
     cursor: pointer;
 
     &__prefix {
-        padding-right: 2px;
+        flex-shrink: 0;
     }
 
     &_disabled {
@@ -32,6 +32,8 @@
     &_activate {
         .flt-input-text__input-block {
             display: flex;
+            align-items: center;
+            gap: var(--flt-input-prefix-gap, 8px);
             height: 20px;
             opacity: 1;
         }
@@ -48,11 +50,11 @@
 
     &_error {
         .flt-input-text__wrapp {
-            border-color: #ef4444;
+            border-color: var(--flt-input-border-color-error, #ed123d);
         }
 
         .flt-input-text__error {
-            height: 16px;
+            line-height: 1.5;
             opacity: 1;
         }
     }
@@ -96,12 +98,10 @@
     }
 
     &__error {
-        height: 0;
+        line-height: 0;
         opacity: 0;
-        margin-top: 4px;
         font-size: 12px;
-        line-height: 16px;
-        color: #ef4444;
+        color: var(--flt-input-border-color-error, #ed123d);
         transition: all 0.3s;
     }
 

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

@@ -3,7 +3,7 @@
         <div class="flt-picklist__wrapp">
             <div class="flt-picklist__wrapp-text">
                 <div class="flt-picklist__placeholder">{placeholder}</div>
-                <div class="flt-picklist__value">{displayLabel}</div>
+                <div class="flt-picklist__value" lwc:inner-html={displayLabel}></div>
             </div>
             <svg
                 width="24"
@@ -27,17 +27,15 @@
                         key={option.value}
                         onclick={handleChange}
                         data-value={option.value}
-                        class="flt-picklist__option flt-picklist__option_selected">
-                        {option.label}
-                    </div>
+                        class="flt-picklist__option flt-picklist__option_selected"
+                        lwc:inner-html={option.label}></div>
                     <div
                         lwc:else
                         onclick={handleChange}
                         key={option.value}
                         data-value={option.value}
-                        class="flt-picklist__option">
-                        {option.label}
-                    </div>
+                        class="flt-picklist__option"
+                        lwc:inner-html={option.label}></div>
                 </template>
             </div>
         </div>

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

@@ -1,9 +1,15 @@
-import { api } from 'lwc'
+import { api, setHooks } from 'lwc'
 import { SelectElement } from 'fleetcor-lwc'
 import './picklist.scss'
 import picklistModal from './picklistModal.html'
 import picklist from './picklist.html'
 
+setHooks({
+    sanitizeHtmlContent(content) {
+        return content
+    }
+})
+
 export default class Picklist extends SelectElement {
     error
     showOptions
@@ -28,7 +34,7 @@ export default class Picklist extends SelectElement {
     }
 
     get displayLabel() {
-        return this.optionsToDisplay.find((item) => item.selected)?.label
+        return this.optionsToDisplay.find((item) => item.selected)?.label || ''
     }
 
     connectedCallback() {
@@ -53,6 +59,13 @@ export default class Picklist extends SelectElement {
         if (!this.disabled) {
             this.showOptions = false
         }
+        this.dispatchEvent(
+            new CustomEvent('blur', {
+                detail: null,
+                cancelable: true,
+                bubbles: true
+            })
+        )
     }
 
     handleCloseModal() {
@@ -64,12 +77,19 @@ export default class Picklist extends SelectElement {
         if (!this.disabled) {
             this.showOptions = true
         }
+        this.dispatchEvent(
+            new CustomEvent('focus', {
+                detail: null,
+                cancelable: true,
+                bubbles: true
+            })
+        )
     }
 
     handleChange(event) {
         event.stopPropagation()
         if (!this.disabled) {
-            this.value = event.target.dataset.value
+            this.value = event.currentTarget.dataset.value
             this.dispatchEvent(
                 new CustomEvent('change', {
                     detail: this.getData()
@@ -83,6 +103,7 @@ export default class Picklist extends SelectElement {
     get computedStyles() {
         return this.generateClassNameList({
             'flt-picklist': true,
+            'flt-picklist_disabled': this.disabled,
             'flt-picklist_active': this.showOptions,
             'flt-picklist_selected': this.value,
             'flt-picklist_modal': this.showDropdownAsModal && this.showOptions && !this.isDesktop
@@ -95,4 +116,12 @@ export default class Picklist extends SelectElement {
             'flt-picklist__error-message_active': this.error
         })
     }
+
+    renderedCallback() {
+        super.renderedCallback()
+        this.setAttribute(
+            'user-data-modal',
+            !!(this.showDropdownAsModal && this.showOptions && !this.isDesktop)
+        )
+    }
 }

package/frontend/components/flt/picklist/picklist.scss

@@ -20,6 +20,20 @@
         }
     }
 
+    &_disabled {
+        color: #d1d5db;
+
+        .flt-picklist__wrapp {
+            border-color: #d1d5db !important;
+            background: #f9fafb !important;
+            cursor: not-allowed;
+        }
+
+        .flt-picklist__view-arrow {
+            opacity: 0.25;
+        }
+    }
+
     &_modal {
         position: initial;
         z-index: initial;
@@ -127,14 +141,14 @@
         background-color: #fff;
         overflow: hidden;
         border-radius: var(--flt-picklist-border-radius, 12px);
-        width: 90vw;
+        width: 80vw;
 
         .flt-picklist__dropdown {
             position: relative;
             top: initial;
             left: initial;
             animation: initial;
-            max-height: calc(100vh - 100px);
+            max-height: 80vh;
         }
 
         .flt-picklist__option {

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

@@ -3,7 +3,7 @@
         <div class="flt-picklist__wrapp">
             <div class="flt-picklist__wrapp-text">
                 <div class="flt-picklist__placeholder">{placeholder}</div>
-                <div class="flt-picklist__value">{displayLabel}</div>
+                <div class="flt-picklist__value" lwc:inner-html={displayLabel}></div>
             </div>
             <svg
                 width="24"
@@ -49,17 +49,15 @@
                                 key={option.value}
                                 onclick={handleChange}
                                 data-value={option.value}
-                                class="flt-picklist__option flt-picklist__option_selected">
-                                {option.label}
-                            </div>
+                                class="flt-picklist__option flt-picklist__option_selected"
+                                lwc:inner-html={option.label}></div>
                             <div
                                 lwc:else
                                 onclick={handleChange}
                                 key={option.value}
                                 data-value={option.value}
-                                class="flt-picklist__option">
-                                {option.label}
-                            </div>
+                                class="flt-picklist__option"
+                                lwc:inner-html={option.label}></div>
                         </template>
                     </div>
                 </div>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "fleetcor-lwc",
-    "version": "3.7.0",
+    "version": "3.8.0",
     "description": "LWC framework by Fleetcor",
     "repository": {
         "type": "git",
@@ -32,6 +32,7 @@
             "flt/icon",
             "flt/inputText",
             "flt/inputEmail",
+            "flt/inputPhone",
             "flt/picklist",
             "flt/modal",
             "flt/radioGroup",
@@ -77,7 +78,6 @@
         "terser-webpack-plugin": "^5.3.16",
         "webpack": "^5.105.2",
         "webpack-cli": "^6.0.1",
-        "webpack-dev-server": "^5.2.3",
-        "imask": "^7.6.1"
+        "webpack-dev-server": "^5.2.3"
     }
 }

package/frontend/components/flt/inputPhone/__test__/radioItem.test.js

@@ -1,56 +0,0 @@
-import { createElement } from 'lwc'
-
-import RadioItem from 'flt/radioItem'
-
-describe('flt-radio-item', () => {
-    afterEach(() => {
-        while (document.body.firstChild) {
-            document.body.removeChild(document.body.firstChild)
-        }
-    })
-
-    it('Generate active radio item', async () => {
-        const radioItemDefault = createElement('flt-radio-item', { is: RadioItem })
-        radioItemDefault.option = {
-            label: 'Label 1',
-            value: 'value 1',
-            selected: true,
-            disabled: false
-        }
-        document.body.appendChild(radioItemDefault)
-
-        await expect(radioItemDefault.firstChild.classList).toContain('flt-radio-item_selected')
-    })
-
-    it('Generate default radio item', async () => {
-        const radioItemDefault = createElement('flt-radio-item', { is: RadioItem })
-        radioItemDefault.option = {
-            label: 'Label 1',
-            value: 'value 1',
-            selected: false,
-            disabled: false
-        }
-        document.body.appendChild(radioItemDefault)
-
-        await expect(radioItemDefault.firstChild.classList).toContain('flt-radio-item')
-        await expect(radioItemDefault.firstChild.classList).toContain('flt-radio-item_size_s')
-        await expect(radioItemDefault.firstChild.classList).not.toContain('flt-radio-item_disabled')
-        await expect(radioItemDefault.firstChild.classList).not.toContain('flt-radio-item_selected')
-
-        await radioItemDefault.firstChild.click()
-    })
-
-    it('Generate disabled radio item', async () => {
-        const radioItemDefault = createElement('flt-radio-item', { is: RadioItem })
-        radioItemDefault.option = {
-            label: 'Label 1',
-            value: 'value 1',
-            selected: false,
-            disabled: true
-        }
-
-        document.body.appendChild(radioItemDefault)
-
-        await expect(radioItemDefault.firstChild.classList).toContain('flt-radio-item_disabled')
-    })
-})

package/frontend/components/flt/inputPhone/arrow.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6.2762 8.65164C6.6345 8.30713 7.20424 8.3183 7.54875 8.67659L12 13.4019L16.4513 8.67659C16.7958 8.3183 17.3655 8.30713 17.7238 8.65164C18.0821 8.99616 18.0933 9.5659 17.7487 9.92419L12.6488 15.3242C12.4791 15.5007 12.2448 15.6004 12 15.6004C11.7552 15.6004 11.5209 15.5007 11.3513 15.3242L6.25125 9.92419C5.90674 9.5659 5.91791 8.99616 6.2762 8.65164Z" fill="#111827"/>
-</svg>

package/frontend/components/flt/inputPhone/close-button.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M5.46967 5.46967C5.76256 5.17678 6.23744 5.17678 6.53033 5.46967L12 10.9393L17.4697 5.46967C17.7626 5.17678 18.2374 5.17678 18.5303 5.46967C18.8232 5.76256 18.8232 6.23744 18.5303 6.53033L13.0607 12L18.5303 17.4697C18.8232 17.7626 18.8232 18.2374 18.5303 18.5303C18.2374 18.8232 17.7626 18.8232 17.4697 18.5303L12 13.0607L6.53033 18.5303C6.23744 18.8232 5.76256 18.8232 5.46967 18.5303C5.17678 18.2374 5.17678 17.7626 5.46967 17.4697L10.9393 12L5.46967 6.53033C5.17678 6.23744 5.17678 5.76256 5.46967 5.46967Z" fill="black"/>
-</svg>