fleetcor-lwc 3.6.3 → 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/__test__/picklist.test.js

@@ -0,0 +1,135 @@
+import { createElement } from 'lwc'
+import Picklist from 'flt/picklist'
+
+Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: jest.fn().mockImplementation((query) => ({
+        matches: false
+        // media: query,
+        // onchange: null,
+        // addListener: jest.fn(), // Deprecated
+        // removeListener: jest.fn(), // Deprecated
+        // addEventListener: jest.fn(),
+        // removeEventListener: jest.fn(),
+        // dispatchEvent: jest.fn()
+    }))
+})
+
+describe('flt-picklist', () => {
+    afterEach(() => {
+        while (document.body.firstChild) {
+            document.body.removeChild(document.body.firstChild)
+        }
+    })
+
+    it('base test', async () => {
+        const picklistEl = createElement('flt-picklist', { is: Picklist })
+        picklistEl.errorMessage = 'Error message'
+        picklistEl.required = true
+        picklistEl.options = [
+            {
+                label: 'Man',
+                value: 'man'
+            },
+            {
+                label: 'Woman',
+                value: 'woman'
+            }
+        ]
+        picklistEl.name = 'sex'
+        document.body.appendChild(picklistEl)
+        await expect(picklistEl.firstChild.classList).toContain('flt-picklist')
+        picklistEl.firstChild.focus()
+
+        return Promise.resolve().then(async () => {
+            const dropDownEl = picklistEl.querySelector('.flt-picklist__dropdown')
+            await expect(dropDownEl).toBeTruthy()
+            dropDownEl.querySelector('.flt-picklist__option').click()
+
+            return Promise.resolve().then(async () => {
+                const data = picklistEl.getData()
+                await expect(data.value).toBe('man')
+            })
+        })
+    })
+
+    it('disabled test', async () => {
+        const picklistEl = createElement('flt-picklist', { is: Picklist })
+        picklistEl.errorMessage = 'Error message'
+        picklistEl.required = true
+        picklistEl.disabled = true
+        picklistEl.options = [
+            {
+                label: 'Man',
+                value: 'man'
+            },
+            {
+                label: 'Woman',
+                value: 'woman'
+            }
+        ]
+        picklistEl.name = 'sex'
+        document.body.appendChild(picklistEl)
+        await expect(picklistEl.firstChild.classList).toContain('flt-picklist')
+        picklistEl.firstChild.focus()
+
+        return Promise.resolve().then(async () => {
+            const dropDownEl = picklistEl.querySelector('.flt-picklist__dropdown')
+            await expect(dropDownEl).toBeFalsy()
+        })
+    })
+
+    it('modal test', async () => {
+        const picklistEl = createElement('flt-picklist', { is: Picklist })
+        picklistEl.errorMessage = 'Error message'
+        picklistEl.placeholder = 'Sex'
+        picklistEl.required = true
+        picklistEl.showDropdownAsModal = true
+        picklistEl.options = [
+            {
+                label: 'Man',
+                value: 'man'
+            },
+            {
+                label: 'Woman',
+                value: 'woman'
+            }
+        ]
+        picklistEl.name = 'sex'
+        document.body.appendChild(picklistEl)
+        await expect(picklistEl.firstChild.classList).toContain('flt-picklist')
+        picklistEl.firstChild.focus()
+
+        return Promise.resolve().then(async () => {
+            const dropDownEl = picklistEl.querySelector('.flt-picklist__dropdown')
+            await expect(dropDownEl).toBeTruthy()
+            dropDownEl.querySelector('.flt-picklist__option').click()
+            picklistEl.firstChild.blur()
+
+            return Promise.resolve().then(async () => {
+                const data = picklistEl.getData()
+                await expect(data.value).toBe('man')
+                picklistEl.firstChild.focus()
+                return Promise.resolve().then(async () => {
+                    await expect(picklistEl.firstChild.classList).toContain('flt-picklist_modal')
+                    const modalEl = document.body.querySelector('flt-modal')
+                    await expect(modalEl).toBeTruthy()
+                    const closeButtonEl = modalEl.querySelector(
+                        '.flt-picklist__modal-header-close-button'
+                    )
+                    const clickEvent = new MouseEvent('click', {
+                        bubbles: true,
+                        cancelable: true,
+                        view: window
+                    })
+
+                    closeButtonEl.dispatchEvent(clickEvent)
+                    return Promise.resolve().then(async () => {
+                        const modalEl = picklistEl.querySelector('flt-modal')
+                        await expect(modalEl).toBeFalsy()
+                    })
+                })
+            })
+        })
+    })
+})

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

@@ -0,0 +1,45 @@
+<template lwc:render-mode="light">
+    <div class={computedStyles} tabindex="0" onfocus={handleShowView} onblur={handleHideView}>
+        <div class="flt-picklist__wrapp">
+            <div class="flt-picklist__wrapp-text">
+                <div class="flt-picklist__placeholder">{placeholder}</div>
+                <div class="flt-picklist__value" lwc:inner-html={displayLabel}></div>
+            </div>
+            <svg
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                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>
+            </svg>
+        </div>
+        <div class="flt-picklist__dropdown-container">
+            <div lwc:if={showOptions} class="flt-picklist__dropdown">
+                <template for:each={optionsToDisplay} for:item="option">
+                    <div
+                        lwc:if={option.selected}
+                        key={option.value}
+                        onclick={handleChange}
+                        data-value={option.value}
+                        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"
+                        lwc:inner-html={option.label}></div>
+                </template>
+            </div>
+        </div>
+
+        <div class={computedErrorMessage}>{errorMessage}</div>
+    </div>
+</template>

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

@@ -0,0 +1,127 @@
+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
+    isDesktop
+
+    @api errorMessage
+    @api placeholder
+    @api prefix
+    @api showDropdownAsModal
+    @api modalDimentionStart = 1280
+
+    render() {
+        let result = picklist
+        if (this.showDropdownAsModal && !this.isDesktop) {
+            result = picklistModal
+        }
+        return result
+    }
+
+    @api validate() {
+        this.error = !this.isValid()
+    }
+
+    get displayLabel() {
+        return this.optionsToDisplay.find((item) => item.selected)?.label || ''
+    }
+
+    connectedCallback() {
+        if (this.showDropdownAsModal) {
+            this.handleResize()
+            window.addEventListener('resize', this.handleResize.bind(this))
+        }
+    }
+
+    disconnectedCallback() {
+        if (this.showDropdownAsModal) {
+            window.removeEventListener('resize', this.handleResize.bind(this))
+        }
+    }
+
+    handleResize() {
+        this.isDesktop = window.matchMedia(`(min-width: ${this.modalDimentionStart}px)`).matches
+    }
+
+    handleHideView(event) {
+        event.stopPropagation()
+        if (!this.disabled) {
+            this.showOptions = false
+        }
+        this.dispatchEvent(
+            new CustomEvent('blur', {
+                detail: null,
+                cancelable: true,
+                bubbles: true
+            })
+        )
+    }
+
+    handleCloseModal() {
+        this.querySelector('.flt-picklist').blur()
+    }
+
+    handleShowView(event) {
+        event.stopPropagation()
+        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.currentTarget.dataset.value
+            this.dispatchEvent(
+                new CustomEvent('change', {
+                    detail: this.getData()
+                })
+            )
+
+            this.querySelector('.flt-picklist').blur()
+        }
+    }
+
+    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
+        })
+    }
+
+    get computedErrorMessage() {
+        return this.generateClassNameList({
+            'flt-picklist__error-message': true,
+            '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

@@ -0,0 +1,186 @@
+.flt-picklist {
+    outline: none;
+
+    &_active {
+        position: relative;
+        z-index: 10000;
+        .flt-picklist__view-arrow {
+            transform: scale(-1);
+        }
+    }
+
+    &_selected {
+        .flt-picklist__wrapp {
+            border-color: var(--flt-picklist-view-border-color-selected, #59eb9c);
+        }
+
+        .flt-picklist__placeholder {
+            font-size: var(--flt-picklist-placeholder-activate-fz, 12px);
+            line-height: var(--flt-picklist-placeholder-activate-lh, 16px);
+        }
+    }
+
+    &_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;
+
+        .flt-picklist__wrapp {
+            position: initial;
+            z-index: initial;
+        }
+    }
+
+    &__wrapp {
+        background-color: var(--flt-picklist-bgc, #ffffff);
+        border: var(--flt-picklist-border, 1px solid #6b7280);
+        border-radius: var(--flt-picklist-border-radius, 12px);
+        overflow: hidden;
+        height: var(--flt-picklist-wrapper-height, 44px);
+        display: flex;
+        justify-content: space-between;
+        gap: 12px;
+        align-items: center;
+        padding: var(--flt-picklist-wrapper-padding, 0 16px);
+        transition: all 0.3s;
+        cursor: pointer;
+        position: relative;
+        z-index: 1;
+    }
+
+    &__error-message {
+        color: var(--flt-picklist-error-color, #ed123d);
+        opacity: 0;
+        line-height: 0;
+        transition: all 0.3s;
+        font-size: var(--flt-picklist-error-fz, 12px);
+
+        &_active {
+            opacity: 1;
+            line-height: 1.5;
+        }
+    }
+
+    &__placeholder {
+        transition: all 0.3s;
+        color: var(--flt-picklist-placeholder-color, #111827);
+        font-size: var(--flt-picklist-placeholder-fz, 16px);
+        line-height: var(--flt-picklist-placeholder-lh, 20px);
+    }
+
+    &__view-arrow-path {
+        stroke: var(--flt-picklist-view-arrow-path-stroke, #4c4c4c);
+    }
+
+    &__view-arrow {
+        transition: all 0.3s;
+        flex-shrink: 0;
+    }
+
+    &__dropdown-container {
+        position: relative;
+    }
+
+    &__dropdown {
+        position: absolute;
+        width: 100%;
+        top: -20px;
+        left: 0;
+        max-height: 240px;
+        border: var(--flt-picklist-dropdown-border, none);
+        overflow: auto;
+        background: var(--flt-picklist-dropdown-bgc, #ffffff);
+        box-shadow: 0px 30px 40px rgba(33, 46, 53, 0.3);
+        cursor: pointer;
+        border-bottom-left-radius: var(--flt-picklist-border-radius, 12px);
+        border-bottom-right-radius: var(--flt-picklist-border-radius, 12px);
+        animation: fadeIn 0.3s ease-in-out;
+    }
+
+    &__option {
+        display: block;
+        padding: var(--flt-picklist-option-padding, 12px 16px);
+        color: var(--flt-picklist-option-color, #4c4c4c);
+        user-select: none;
+        box-sizing: border-box;
+        border-bottom: 1px solid var(--flt-picklist-dropdown-option-border-bottom-color, #eeeeee);
+        position: relative;
+        line-height: 18px;
+
+        &:hover,
+        &_selected {
+            color: var(--flt-picklist-option-selected-color, #4c4c4c);
+            background: var(--flt-picklist-dropdown-option-bgc, #f2d400);
+        }
+
+        &:first-child {
+            padding: var(--flt-picklist-option-first-child-padding, 32px 16px 12px);
+        }
+
+        &:last-child {
+            border-bottom: none;
+            border-bottom-left-radius: var(--flt-picklist-border-radius, 12px);
+            border-bottom-right-radius: var(--flt-picklist-border-radius, 12px);
+        }
+    }
+
+    &__modal {
+        background-color: #fff;
+        overflow: hidden;
+        border-radius: var(--flt-picklist-border-radius, 12px);
+        width: 80vw;
+
+        .flt-picklist__dropdown {
+            position: relative;
+            top: initial;
+            left: initial;
+            animation: initial;
+            max-height: 80vh;
+        }
+
+        .flt-picklist__option {
+            &:first-child {
+                padding: var(--flt-picklist-option-padding, 12px 16px);
+            }
+        }
+    }
+
+    &__modal-header-close-button {
+        padding: 4px;
+        width: 16px;
+        height: 16px;
+    }
+
+    &__modal-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-weight: 700;
+        padding: 12px 16px;
+        background-color: var(--flt-picklist-dropdown-modal-header-bgc, #f3f4f6);
+        border-top-left-radius: var(--flt-picklist-border-radius, 12px);
+        border-top-right-radius: var(--flt-picklist-border-radius, 12px);
+    }
+}
+
+@keyframes fadeIn {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 100%;
+    }
+}

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

@@ -0,0 +1,68 @@
+<template lwc:render-mode="light">
+    <div class={computedStyles} tabindex="0" onfocus={handleShowView} onblur={handleHideView}>
+        <div class="flt-picklist__wrapp">
+            <div class="flt-picklist__wrapp-text">
+                <div class="flt-picklist__placeholder">{placeholder}</div>
+                <div class="flt-picklist__value" lwc:inner-html={displayLabel}></div>
+            </div>
+            <svg
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                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>
+            </svg>
+        </div>
+        <div class="flt-picklist__dropdown-container">
+            <flt-modal lwc:if={showOptions} deactive-glass>
+                <div class="flt-picklist__modal">
+                    <div class="flt-picklist__modal-header">
+                        <div class="flt-picklist__modal-header-placeholder">{placeholder}:</div>
+                        <svg
+                            onclick={handleCloseModal}
+                            class="flt-picklist__modal-header-close-button"
+                            x="0px"
+                            y="0px"
+                            width="32px"
+                            height="32px"
+                            viewBox="0 0 612 612"
+                            style="enable-background: new 0 0 612 612"
+                            xml:space="preserve">
+                            <polygon
+                                points="612,36.004 576.521,0.603 306,270.608 35.478,0.603 0,36.004 270.522,306.011 0,575.997 35.478,611.397      306,341.411 576.521,611.397 612,575.997 341.459,306.011    "
+                                data-original="#000000"
+                                class="active-path"
+                                data-old_color="#000000"
+                                fill="#111827"></polygon>
+                        </svg>
+                    </div>
+                    <div class="flt-picklist__dropdown">
+                        <template for:each={optionsToDisplay} for:item="option">
+                            <div
+                                lwc:if={option.selected}
+                                key={option.value}
+                                onclick={handleChange}
+                                data-value={option.value}
+                                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"
+                                lwc:inner-html={option.label}></div>
+                        </template>
+                    </div>
+                </div>
+            </flt-modal>
+        </div>
+        <div class={computedErrorMessage}>{errorMessage}</div>
+    </div>
+</template>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "fleetcor-lwc",
-    "version": "3.6.3",
+    "version": "3.8.0",
     "description": "LWC framework by Fleetcor",
     "repository": {
         "type": "git",
@@ -32,6 +32,8 @@
             "flt/icon",
             "flt/inputText",
             "flt/inputEmail",
+            "flt/inputPhone",
+            "flt/picklist",
             "flt/modal",
             "flt/radioGroup",
             "flt/radioGroupIcon",
@@ -76,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"
     }
 }