fleetcor-lwc 3.0.1 → 3.3.0

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

@@ -0,0 +1,325 @@
+import AL from './flags/AL@2x.png'
+import AD from './flags/AD@2x.png'
+import AT from './flags/AT@2x.png'
+import BY from './flags/BY@2x.png'
+import BE from './flags/BE@2x.png'
+import BA from './flags/BA@2x.png'
+import BG from './flags/BG@2x.png'
+import HR from './flags/HR@2x.png'
+import CZ from './flags/CZ@2x.png'
+import DK from './flags/DK@2x.png'
+import EE from './flags/EE@2x.png'
+import FO from './flags/FO@2x.png'
+import FI from './flags/FI@2x.png'
+import FR from './flags/FR@2x.png'
+import DE from './flags/DE@2x.png'
+import GI from './flags/GI@2x.png'
+import GR from './flags/GR@2x.png'
+import VA from './flags/VA@2x.png'
+import HU from './flags/HU@2x.png'
+import IS from './flags/IS@2x.png'
+import IE from './flags/IE@2x.png'
+import IT from './flags/IT@2x.png'
+import LV from './flags/LV@2x.png'
+import LI from './flags/LI@2x.png'
+import LT from './flags/LT@2x.png'
+import LU from './flags/LU@2x.png'
+import MK from './flags/MK@2x.png'
+import MT from './flags/MT@2x.png'
+import MD from './flags/MD@2x.png'
+import MC from './flags/MC@2x.png'
+import ME from './flags/ME@2x.png'
+import NL from './flags/NL@2x.png'
+import NO from './flags/NO@2x.png'
+import PL from './flags/PL@2x.png'
+import PT from './flags/PT@2x.png'
+import RO from './flags/RO@2x.png'
+import RU from './flags/RU@2x.png'
+import SM from './flags/SM@2x.png'
+import RS from './flags/RS@2x.png'
+import SK from './flags/SK@2x.png'
+import SI from './flags/SI@2x.png'
+import ES from './flags/ES@2x.png'
+import SE from './flags/SE@2x.png'
+import CH from './flags/CH@2x.png'
+import UA from './flags/UA@2x.png'
+import GB from './flags/GB@2x.png'
+
+export const COUNTRIES = [
+    {
+        name: 'Albania',
+        dialCode: '+355',
+        code: 'AL',
+        flag: AL
+    },
+    {
+        name: 'Andorra',
+        dialCode: '+376',
+        code: 'AD',
+        flag: AD
+    },
+    {
+        name: 'Austria',
+        dialCode: '+43',
+        code: 'AT',
+        flag: AT
+    },
+    {
+        name: 'Belarus',
+        dialCode: '+375',
+        code: 'BY',
+        flag: BY
+    },
+    {
+        name: 'Belgium',
+        dialCode: '+32',
+        code: 'BE',
+        flag: BE
+    },
+    {
+        name: 'Bosnia and Herzegovina',
+        dialCode: '+387',
+        code: 'BA',
+        flag: BA
+    },
+    {
+        name: 'Bulgaria',
+        dialCode: '+359',
+        code: 'BG',
+        flag: BG
+    },
+    {
+        name: 'Croatia',
+        dialCode: '+385',
+        code: 'HR',
+        flag: HR
+    },
+    {
+        name: 'Czech Republic',
+        dialCode: '+420',
+        code: 'CZ',
+        flag: CZ
+    },
+    {
+        name: 'Denmark',
+        dialCode: '+45',
+        code: 'DK',
+        flag: DK
+    },
+    {
+        name: 'Estonia',
+        dialCode: '+372',
+        code: 'EE',
+        flag: EE
+    },
+    {
+        name: 'Faroe Islands',
+        dialCode: '+298',
+        code: 'FO',
+        flag: FO
+    },
+    {
+        name: 'Finland',
+        dialCode: '+358',
+        code: 'FI',
+        flag: FI
+    },
+    {
+        name: 'France',
+        dialCode: '+33',
+        code: 'FR',
+        flag: FR
+    },
+    {
+        name: 'Germany',
+        dialCode: '+49',
+        code: 'DE',
+        flag: DE
+    },
+    {
+        name: 'Gibraltar',
+        dialCode: '+350',
+        code: 'GI',
+        flag: GI
+    },
+    {
+        name: 'Greece',
+        dialCode: '+30',
+        code: 'GR',
+        flag: GR
+    },
+    {
+        name: 'Holy See (Vatican City State)',
+        dialCode: '+39',
+        code: 'VA',
+        flag: VA
+    },
+    {
+        name: 'Hungary',
+        dialCode: '+36',
+        code: 'HU',
+        flag: HU
+    },
+    {
+        name: 'Iceland',
+        dialCode: '+354',
+        code: 'IS',
+        flag: IS
+    },
+    {
+        name: 'Ireland',
+        dialCode: '+353',
+        code: 'IE',
+        flag: IE
+    },
+    {
+        name: 'Italy',
+        dialCode: '+39',
+        code: 'IT',
+        flag: IT
+    },
+    {
+        name: 'Latvia',
+        dialCode: '+371',
+        code: 'LV',
+        flag: LV
+    },
+    {
+        name: 'Liechtenstein',
+        dialCode: '+423',
+        code: 'LI',
+        flag: LI
+    },
+    {
+        name: 'Lithuania',
+        dialCode: '+370',
+        code: 'LT',
+        flag: LT
+    },
+    {
+        name: 'Luxembourg',
+        dialCode: '+352',
+        code: 'LU',
+        flag: LU
+    },
+    {
+        name: 'Macedonia',
+        dialCode: '+389',
+        code: 'MK',
+        flag: MK
+    },
+    {
+        name: 'Malta',
+        dialCode: '+356',
+        code: 'MT',
+        flag: MT
+    },
+    {
+        name: 'Moldova',
+        dialCode: '+373',
+        code: 'MD',
+        flag: MD
+    },
+    {
+        name: 'Monaco',
+        dialCode: '+377',
+        code: 'MC',
+        flag: MC
+    },
+    {
+        name: 'Montenegro',
+        dialCode: '+382',
+        code: 'ME',
+        flag: ME
+    },
+    {
+        name: 'Netherlands',
+        dialCode: '+31',
+        code: 'NL',
+        flag: NL
+    },
+    {
+        name: 'Norway',
+        dialCode: '+47',
+        code: 'NO',
+        flag: NO
+    },
+    {
+        name: 'Poland',
+        dialCode: '+48',
+        code: 'PL',
+        flag: PL
+    },
+    {
+        name: 'Portugal',
+        dialCode: '+351',
+        code: 'PT',
+        flag: PT
+    },
+    {
+        name: 'Romania',
+        dialCode: '+40',
+        code: 'RO',
+        flag: RO
+    },
+    {
+        name: 'Russia',
+        dialCode: '+7',
+        code: 'RU',
+        flag: RU
+    },
+    {
+        name: 'San Marino',
+        dialCode: '+378',
+        code: 'SM',
+        flag: SM
+    },
+    {
+        name: 'Serbia',
+        dialCode: '+381',
+        code: 'RS',
+        flag: RS
+    },
+    {
+        name: 'Slovakia',
+        dialCode: '+421',
+        code: 'SK',
+        flag: SK
+    },
+    {
+        name: 'Slovenia',
+        dialCode: '+386',
+        code: 'SI',
+        flag: SI
+    },
+    {
+        name: 'Spain',
+        dialCode: '+34',
+        code: 'ES',
+        flag: ES
+    },
+    {
+        name: 'Sweden',
+        dialCode: '+46',
+        code: 'SE',
+        flag: SE
+    },
+    {
+        name: 'Switzerland',
+        dialCode: '+41',
+        code: 'CH',
+        flag: CH
+    },
+    {
+        name: 'Ukraine',
+        dialCode: '+380',
+        code: 'UA',
+        flag: UA
+    },
+    {
+        name: 'United Kingdom',
+        dialCode: '+44',
+        code: 'GB',
+        flag: GB
+    }
+]

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

@@ -0,0 +1,211 @@
+import { createElement } from 'lwc'
+import InputText from 'flt/inputText'
+
+describe('flt-input-text', () => {
+    afterEach(() => {
+        while (document.body.firstChild) {
+            document.body.removeChild(document.body.firstChild)
+        }
+    })
+
+    it('flt-input-text base', async () => {
+        const inputTextElement = createElement('flt-input-text', { is: InputText })
+        inputTextElement.name = 'description'
+        inputTextElement.label = 'Description'
+        inputTextElement.placeholder = 'Description'
+        document.body.appendChild(inputTextElement)
+
+        await expect(inputTextElement.firstChild.classList).toContain('flt-input-text')
+        inputTextElement.validate()
+        return Promise.resolve().then(async () => {
+            await expect(inputTextElement.firstChild.classList).not.toContain(
+                'flt-input-text_success'
+            )
+            await expect(inputTextElement.isValid()).toBeTruthy()
+            let data = inputTextElement.getData()
+            await expect(data.placeholder).toBe('Description')
+
+            inputTextElement.value = 'Hello'
+            inputTextElement.dispatchEvent(new CustomEvent('change'))
+            inputTextElement.validate()
+
+            return Promise.resolve().then(async () => {
+                await expect(inputTextElement.firstChild.classList).toContain(
+                    'flt-input-text_success'
+                )
+                await expect(inputTextElement.isValid()).toBeTruthy()
+            })
+        })
+    })
+
+    it('flt-input-text required', async () => {
+        const inputTextElement = createElement('flt-input-text', { is: InputText })
+        inputTextElement.name = 'FirstName'
+        inputTextElement.label = 'First Name'
+        inputTextElement.placeholder = 'First Name'
+        inputTextElement.required = true
+        document.body.appendChild(inputTextElement)
+
+        await expect(inputTextElement.firstChild.classList).toContain('flt-input-text')
+        inputTextElement.validate()
+        return Promise.resolve().then(async () => {
+            await expect(inputTextElement.firstChild.classList).toContain('flt-input-text_error')
+            await expect(inputTextElement.isValid()).toBeFalsy()
+            let data = inputTextElement.getData()
+            await expect(data.label).toBe('First Name')
+
+            inputTextElement.value = 'TestName'
+            inputTextElement.dispatchEvent(new CustomEvent('change'))
+            inputTextElement.validate()
+
+            return Promise.resolve().then(async () => {
+                await expect(inputTextElement.firstChild.classList).toContain(
+                    'flt-input-text_success'
+                )
+                await expect(inputTextElement.isValid()).toBeTruthy()
+            })
+        })
+    })
+
+    it('flt-input-text maxLength', async () => {
+        const inputTextElement = createElement('flt-input-text', { is: InputText })
+        inputTextElement.name = 'FirstName'
+        inputTextElement.label = 'First Name'
+        inputTextElement.placeholder = 'First Name'
+        inputTextElement.required = true
+        inputTextElement.maxLength = 10
+        document.body.appendChild(inputTextElement)
+
+        await expect(inputTextElement.firstChild.classList).toContain('flt-input-text')
+        inputTextElement.validate()
+        return Promise.resolve().then(async () => {
+            await expect(inputTextElement.firstChild.classList).toContain('flt-input-text_error')
+            await expect(inputTextElement.isValid()).toBeFalsy()
+            let data = inputTextElement.getData()
+            await expect(data.label).toBe('First Name')
+
+            inputTextElement.value = 'TestNameToBig'
+            inputTextElement.dispatchEvent(new CustomEvent('change'))
+            inputTextElement.validate()
+
+            return Promise.resolve().then(async () => {
+                await expect(inputTextElement.firstChild.classList).toContain(
+                    'flt-input-text_error'
+                )
+                await expect(inputTextElement.isValid()).toBeFalsy()
+            })
+        })
+    })
+
+    it('flt-input-text minValue & maxValue', async () => {
+        const inputTextElement = createElement('flt-input-text', { is: InputText })
+        inputTextElement.name = 'FirstName'
+        inputTextElement.label = 'First Name'
+        inputTextElement.placeholder = 'First Name'
+        inputTextElement.required = true
+        inputTextElement.minValue = 10
+        inputTextElement.maxValue = 100
+        document.body.appendChild(inputTextElement)
+
+        await expect(inputTextElement.firstChild.classList).toContain('flt-input-text')
+        inputTextElement.validate()
+        return Promise.resolve().then(async () => {
+            await expect(inputTextElement.firstChild.classList).toContain('flt-input-text_error')
+            await expect(inputTextElement.isValid()).toBeFalsy()
+            let data = inputTextElement.getData()
+            await expect(data.name).toBe('FirstName')
+
+            inputTextElement.value = 9
+            inputTextElement.dispatchEvent(new CustomEvent('change'))
+            inputTextElement.validate()
+            return Promise.resolve().then(async () => {
+                await expect(inputTextElement.firstChild.classList).toContain(
+                    'flt-input-text_error'
+                )
+                await expect(inputTextElement.isValid()).toBeFalsy()
+
+                inputTextElement.value = 1000
+                inputTextElement.dispatchEvent(new CustomEvent('change'))
+                inputTextElement.validate()
+                return Promise.resolve().then(async () => {
+                    await expect(inputTextElement.firstChild.classList).toContain(
+                        'flt-input-text_error'
+                    )
+                    await expect(inputTextElement.isValid()).toBeFalsy()
+                    inputTextElement.value = 50
+                    inputTextElement.dispatchEvent(new CustomEvent('change'))
+                    inputTextElement.validate()
+                    return Promise.resolve().then(async () => {
+                        await expect(inputTextElement.firstChild.classList).toContain(
+                            'flt-input-text_success'
+                        )
+                        await expect(inputTextElement.isValid()).toBeTruthy()
+                    })
+                })
+            })
+        })
+    })
+
+    it('flt-input-text base disabled', async () => {
+        const inputTextElement = createElement('flt-input-text', { is: InputText })
+        inputTextElement.name = 'description'
+        inputTextElement.label = 'Description'
+        inputTextElement.placeholder = 'Description'
+        inputTextElement.disabled = true
+        document.body.appendChild(inputTextElement)
+
+        await expect(inputTextElement.firstChild.classList).toContain('flt-input-text_disabled')
+        inputTextElement.validate()
+        const input = inputTextElement.querySelector('input')
+        input.dispatchEvent(new Event('focus'))
+        input.dispatchEvent(new Event('blur'))
+
+        return Promise.resolve().then(async () => {
+            inputTextElement.value = 'Hello'
+            inputTextElement.dispatchEvent(new CustomEvent('change'))
+            return Promise.resolve().then(async () => {
+                const data = inputTextElement.getData()
+                await expect(data.value).toBeFalsy()
+
+                const labelElement = inputTextElement.querySelector('label')
+                labelElement.click()
+
+                const inputElement = inputTextElement.querySelector('input')
+                inputElement.value = 'Hello'
+                inputElement.dispatchEvent(new Event('input'))
+                inputElement.dispatchEvent(new Event('change'))
+                return Promise.resolve().then(async () => {
+                    await expect(inputTextElement.value).toBeFalsy()
+                    await expect(inputElement.value).toBeFalsy()
+                })
+            })
+        })
+    })
+
+    it('flt-input-text handle events', async () => {
+        const inputTextElement = createElement('flt-input-text', { is: InputText })
+        inputTextElement.name = 'description'
+        inputTextElement.label = 'Description'
+        inputTextElement.placeholder = 'Description'
+        document.body.appendChild(inputTextElement)
+        const input = inputTextElement.querySelector('input')
+        input.focus()
+        input.dispatchEvent(new Event('focus'))
+        return Promise.resolve().then(async () => {
+            await expect(inputTextElement.firstChild.classList).toContain('flt-input-text_active')
+            input.value = 'Hello'
+            input.dispatchEvent(new Event('input'))
+            input.dispatchEvent(new Event('change'))
+            input.dispatchEvent(new Event('blur'))
+
+            return Promise.resolve().then(async () => {
+                await expect(inputTextElement.value).toBe('Hello')
+                await expect(inputTextElement.firstChild.classList).toContain(
+                    'flt-input-text_success'
+                )
+                input.value = ''
+                input.dispatchEvent(new Event('blur'))
+            })
+        })
+    })
+})

package/frontend/components/flt/inputText/inputText.html

@@ -0,0 +1,24 @@
+<template lwc:render-mode="light">
+    <div class={inputStyle}>
+        <label class="flt-input-text__wrapp" onclick={handleClickHandler} for={name}>
+            <div class="flt-input-text__placeholder">{placeholder}</div>
+            <div class="flt-input-text__input-block">
+                <span lwc:if={prefix} class="flt-input-text__prefix">{prefix}</span>
+                <input
+                    id={name}
+                    onfocus={handleFocused}
+                    onblur={handleBlur}
+                    class="flt-input-text__input"
+                    maxlength={maxLength}
+                    type={type}
+                    disabled={disabled}
+                    value={displayValue}
+                    oninput={handleInput}
+                    onchange={handleChange}
+                    name={name}
+                    placeholder={placeholder} />
+            </div>
+        </label>
+        <div class="flt-input-text__error">{errorMessage}</div>
+    </div>
+</template>

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

@@ -0,0 +1,99 @@
+import { api } from 'lwc'
+import { InputElement } from 'fleetcor-lwc'
+import './inputText.scss'
+
+export default class InputText extends InputElement {
+    focused
+    touched
+    @api prefix
+    @api type = 'text'
+    @api placeholderVisible
+    @api errorMessage
+
+    get displayValue() {
+        return this.value || ''
+    }
+
+    @api
+    validate() {
+        if (this.disabled) return
+        this.touched = true
+        this.error = !this.isValid()
+    }
+
+    @api getData(silent) {
+        return {
+            ...super.getData(silent),
+            type: this.type,
+            prefix: this.prefix
+        }
+    }
+
+    handleClickHandler(event) {
+        if (this.disabled) {
+            event.preventDefault()
+        }
+    }
+
+    get inputStyle() {
+        return this.generateClassNameList({
+            '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_success': this.value && this.isValid()
+        })
+    }
+
+    handleFocused(event) {
+        event.stopPropagation()
+        if (this.disabled) return
+        this.focused = true
+        this.dispatchEvent(
+            new CustomEvent('focus_happend', {
+                detail: null,
+                cancelable: true,
+                bubbles: true
+            })
+        )
+    }
+
+    handleBlur(event) {
+        event.stopPropagation()
+        if (this.disabled) return
+        this.focused = false
+        this.touched = true
+        this.value = (event.target.value || '').trimEnd()
+        event.target.value = this.value
+        this.dispatchEvent(
+            new CustomEvent('blur_happend', {
+                detail: null,
+                cancelable: true,
+                bubbles: true
+            })
+        )
+    }
+
+    handleInput(event) {
+        event.stopPropagation()
+        if (this.disabled) {
+            event.target.value = ''
+            event.preventDefault()
+        } else {
+            this.value = event.target.value
+            this.dispatchEvent(
+                new CustomEvent('change', {
+                    detail: this.getData()
+                })
+            )
+        }
+    }
+
+    handleChange(event) {
+        if (this.disabled) {
+            event.target.value = ''
+        }
+        event.stopPropagation()
+        event.preventDefault()
+    }
+}