fleetcor-lwc 3.8.6 → 3.9.0

package/README.md

@@ -347,7 +347,6 @@ Add / update `lwc.config.json` file in your project
   show-dropdown-as-modal
   placeholder="City"
   error-message="Error! Empty field"
-  required
   value="London"
   options="[{label:'London', value:'London'}, {label:'Leon', value:'Leon'}]"
 >
@@ -516,6 +515,59 @@ This component fully extends from `Input Text`
 | blur   | event        | object | Return common Event object            |
 | change | event.detail | object | Return full data of component's state |
 
+### Input With Picklist
+
+```html
+<flt-input-with-picklist
+  name="{picklist:'picklistName', input:'inputName'}"
+  required
+  label="{picklist:'picklistLabel', input:'inputLabel'}"
+  value="{picklist:'picklistValue', input:'inputValue'}"
+  show-dropdown-as-modal
+  placeholder="{picklist:'picklistPlaceholder', input:'inputPlaceholder'}"
+  onchange="{handleInputWithPicklist}"
+  min-value="100"
+  max-value="1000"
+  max-length="4000"
+  reg-exp="^([0-9]{1,1}||([1-9]{1,1}[0-9]{1,9}))$"
+  error-message="Error message Mounthly Sequrity"
+  options="[{label:'Label 1', value:'val_1'}, {label:'Label 2', value:'val_2'}]"
+></flt-input-with-picklist>
+...
+```
+
+#### Input With Picklist variables
+
+| @api variables | type   | values | required | description                                                        |
+| -------------- | ------ | ------ | -------- | ------------------------------------------------------------------ |
+| name           | object |        | +        | in format `{picklist:'value', input:'value'}`                      |
+| label          | object |        | -        | in format `{picklist:'value', input:'value'}`                      |
+| value          | object |        | -        | in format `{picklist:'value', input:'value'}`                      |
+| placeholder    | object |        | -        | in format `{picklist:'value', input:'value'}`                      |
+| error-message  | string |        | -        |                                                                    |
+| required       | bool   |        | -        |                                                                    |
+| disabled       | bool   |        | -        |                                                                    |
+| prefix         | string |        | -        |                                                                    |
+| reg-exp        | string |        | -        |                                                                    |
+| max-length     | int    |        | -        |                                                                    |
+| min-value      | int    |        | -        |                                                                    |
+| options        | array  |        | +        | Array of available items with `label` and `value` as unique string |
+| max-value      | int    |        | -        |                                                                    |
+
+#### Input With Picklist methods
+
+| @api     | params      | return type | description                                                                                                             |
+| -------- | ----------- | ----------- | ----------------------------------------------------------------------------------------------------------------------- |
+| validate |             | void        | Check component validation and show error message to user                                                               |
+| isValid  |             | bool        | Return `true` or `false`                                                                                                |
+| getData  | silent:bool | object      | Return full data of component's state. If `silent` true - return value will be without any errors displaying for client |
+
+#### Input With Picklist events
+
+| name   | handle       | return | description                           |
+| ------ | ------------ | ------ | ------------------------------------- |
+| change | event.detail | object | Return full data of component's state |
+
 ## Interfaces
 
 #### ModalViewer
@@ -661,11 +713,17 @@ You can override them as you wish by global css variables as priority.
   --flt-picklist-dropdown-modal-header-bgc: #f3f4f6;
   --flt-input-phone-border-color-success: #59eb9c;
   --flt-input-phone-border-color-error: #ed123d;
+  --flt-input-with-picklist-border-color-success: #59eb9c;
+  --flt-input-with-picklist-border-color-error: #ed123d;
 }
 ```
 
 ## Release Notes:
 
+- v.3.9.0
+
+  - Added new component `flt-input-with-picklist`
+
 - v.3.8.6
 
   - Bug fix visiability of `flt-input-phone`

package/frontend/components/flt/inputPhone/inputPhone.scss

@@ -37,7 +37,6 @@
         flex-shrink: 0;
         position: relative;
         z-index: 1;
-        width: 76px;
     }
 
     &__error {
@@ -46,6 +45,9 @@
         line-height: 0;
         color: var(--flt-input-phone-border-color-error, #ed123d);
         transition: all 0.3s;
+        &:empty {
+            display: none;
+        }
     }
 
     .flt-input-text__wrapp {

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

@@ -103,6 +103,9 @@
         font-size: 12px;
         color: var(--flt-input-border-color-error, #ed123d);
         transition: all 0.3s;
+        &:empty {
+            display: none;
+        }
     }
 
     input {

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

@@ -0,0 +1,227 @@
+import { createElement, setHooks } from 'lwc'
+import InputWithPicklist from 'flt/inputWithPicklist'
+
+setHooks({
+    sanitizeHtmlContent(content) {
+        return content
+    }
+})
+
+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-input-with-picklist', () => {
+    afterEach(() => {
+        while (document.body.firstChild) {
+            document.body.removeChild(document.body.firstChild)
+        }
+    })
+
+    it('flt-input-with-picklist base', async () => {
+        const inputWithPicklistEl = createElement('flt-input-phone', { is: InputWithPicklist })
+
+        inputWithPicklistEl.name = {
+            picklist: 'currency',
+            input: 'price'
+        }
+        inputWithPicklistEl.required = true
+        inputWithPicklistEl.label = {
+            picklist: 'Currency',
+            input: 'Price'
+        }
+        inputWithPicklistEl.value = {
+            picklist: 'eur',
+            input: '100'
+        }
+        inputWithPicklistEl.showDropdownAsModal
+        inputWithPicklistEl.placeholder = {
+            picklist: 'Currency',
+            input: 'Price'
+        }
+        inputWithPicklistEl.minValue = '100'
+        inputWithPicklistEl.maxValue = '1000'
+        inputWithPicklistEl.maxLength = '4000'
+        inputWithPicklistEl.regExp = '^([0-9]{1,1}||([1-9]{1,1}[0-9]{1,9}))$'
+        inputWithPicklistEl.errorMessage = 'Error message Mounthly Sequrity'
+        inputWithPicklistEl.options = [
+            { label: 'Euro', value: 'eur' },
+            { label: 'Dollar', value: 'usd' }
+        ]
+
+        document.body.appendChild(inputWithPicklistEl)
+        await expect(inputWithPicklistEl.firstChild.classList).toContain(
+            'flt-input-with-picklist_success'
+        )
+
+        const picklistEl = inputWithPicklistEl.querySelector('flt-picklist')
+        picklistEl.firstChild.focus()
+        return Promise.resolve().then(async () => {
+            const dropDownEl = picklistEl.querySelector('.flt-picklist__dropdown')
+            await expect(dropDownEl).toBeTruthy()
+            const options = dropDownEl.querySelectorAll('.flt-picklist__option')
+            options[options.length - 1].click()
+            inputWithPicklistEl.dispatchEvent(new CustomEvent('change'))
+            return Promise.resolve().then(async () => {
+                const data = inputWithPicklistEl.getData()
+                await expect(data.value.picklist).toBe('usd')
+                const inputEl = inputWithPicklistEl.querySelector('input')
+                inputEl.focus()
+                inputEl.value = '120'
+                inputEl.dispatchEvent(new CustomEvent('input'))
+                return Promise.resolve().then(async () => {
+                    await expect(inputWithPicklistEl.getData().isValid).toBeTruthy()
+                    await expect(inputWithPicklistEl.getData().value.input).toBe('120')
+                })
+            })
+        })
+    })
+
+    it('flt-input-with-picklist disabled', async () => {
+        const inputWithPicklistEl = createElement('flt-input-phone', { is: InputWithPicklist })
+
+        inputWithPicklistEl.name = {
+            picklist: 'currency',
+            input: 'price'
+        }
+        inputWithPicklistEl.required = true
+        inputWithPicklistEl.disabled = true
+        inputWithPicklistEl.label = {
+            picklist: 'Currency',
+            input: 'Price'
+        }
+        inputWithPicklistEl.value = {
+            picklist: 'eur',
+            input: '100'
+        }
+        inputWithPicklistEl.showDropdownAsModal
+        inputWithPicklistEl.placeholder = {
+            picklist: 'Currency',
+            input: 'Price'
+        }
+        inputWithPicklistEl.minValue = '100'
+        inputWithPicklistEl.maxValue = '1000'
+        inputWithPicklistEl.maxLength = '40'
+        inputWithPicklistEl.regExp = '^([0-9]{1,1}||([1-9]{1,1}[0-9]{1,9}))$'
+        inputWithPicklistEl.errorMessage = 'Error message Mounthly Sequrity'
+        inputWithPicklistEl.options = [
+            { label: 'Euro', value: 'eur' },
+            { label: 'Dollar', value: 'usd' }
+        ]
+
+        document.body.appendChild(inputWithPicklistEl)
+        await expect(inputWithPicklistEl.firstChild.classList).toContain(
+            'flt-input-with-picklist_disabled'
+        )
+
+        const picklistEl = inputWithPicklistEl.querySelector('flt-picklist')
+        return Promise.resolve().then(async () => {
+            inputWithPicklistEl.dispatchEvent(new CustomEvent('change'))
+            return Promise.resolve().then(async () => {
+                const data = inputWithPicklistEl.getData()
+                await expect(data.value.picklist).toBe('eur')
+            })
+        })
+    })
+
+    it('flt-input-with-picklist with empty value', async () => {
+        const inputWithPicklistEl = createElement('flt-input-phone', { is: InputWithPicklist })
+
+        inputWithPicklistEl.name = {
+            picklist: 'currency',
+            input: 'price'
+        }
+        inputWithPicklistEl.required = true
+        inputWithPicklistEl.label = {
+            picklist: 'Currency',
+            input: 'Price'
+        }
+
+        inputWithPicklistEl.showDropdownAsModal
+        inputWithPicklistEl.placeholder = {
+            picklist: 'Currency',
+            input: 'Price'
+        }
+        inputWithPicklistEl.minValue = '100'
+        inputWithPicklistEl.maxValue = '1000'
+        inputWithPicklistEl.maxLength = '4000'
+        inputWithPicklistEl.regExp = '^([0-9]{1,1}||([1-9]{1,1}[0-9]{1,9}))$'
+        inputWithPicklistEl.errorMessage = 'Error message Mounthly Sequrity'
+        inputWithPicklistEl.options = [
+            { label: 'Euro', value: 'eur' },
+            { label: 'Dollar', value: 'usd' }
+        ]
+
+        document.body.appendChild(inputWithPicklistEl)
+        await expect(inputWithPicklistEl.firstChild.classList).not.toContain(
+            'flt-input-with-picklist_success'
+        )
+
+        inputWithPicklistEl.validate()
+    })
+
+    it('flt-input-with-picklist with incorrect value', async () => {
+        const inputWithPicklistEl = createElement('flt-input-phone', { is: InputWithPicklist })
+
+        inputWithPicklistEl.name = {
+            picklist: 'currency',
+            input: 'price'
+        }
+        inputWithPicklistEl.required = true
+        inputWithPicklistEl.label = {
+            picklist: 'Currency',
+            input: 'Price'
+        }
+
+        inputWithPicklistEl.value = {
+            picklist: 'eurInccorect',
+            input: ''
+        }
+
+        inputWithPicklistEl.showDropdownAsModal
+        inputWithPicklistEl.placeholder = {
+            picklist: 'Currency',
+            input: 'Price'
+        }
+        inputWithPicklistEl.minValue = '100'
+        inputWithPicklistEl.maxValue = '1000'
+        inputWithPicklistEl.maxLength = '5'
+        inputWithPicklistEl.regExp = '^([0-9]{1,1}||([1-9]{1,1}[0-9]{1,9}))$'
+        inputWithPicklistEl.errorMessage = 'Error message Mounthly Sequrity'
+        inputWithPicklistEl.options = [
+            { label: 'Euro', value: 'eur' },
+            { label: 'Dollar', value: 'usd' }
+        ]
+
+        document.body.appendChild(inputWithPicklistEl)
+        await expect(inputWithPicklistEl.firstChild.classList).not.toContain(
+            'flt-input-with-picklist_success'
+        )
+
+        inputWithPicklistEl.validate()
+        inputWithPicklistEl.value = {
+            picklist: 'usd',
+            input: 'incorrectRegexp'
+        }
+
+        return Promise.resolve().then(async () => {
+            inputWithPicklistEl.validate()
+
+            inputWithPicklistEl.value = {
+                picklist: 'usd',
+                input: '32512512'
+            }
+            inputWithPicklistEl.validate()
+        })
+    })
+})

package/frontend/components/flt/inputWithPicklist/inputWithPicklist.html

@@ -0,0 +1,37 @@
+<template lwc:render-mode="light">
+    <div class={inputStyle}>
+        <div class="flt-input-with-picklist__block">
+            <flt-picklist
+                class="flt-input-with-picklist__code"
+                placeholder={placeholder.picklist}
+                value={value.picklist}
+                label={label.picklist}
+                options={options}
+                disabled={disabled}
+                required={required}
+                onfocus={handleFocus}
+                onblur={handleBlur}
+                show-dropdown-as-modal={showDropdownAsModal}
+                modal-dimention-start={modalDimentionStart}
+                onchange={handleChanged}
+                name="picklist"></flt-picklist>
+            <flt-input-text
+                class="flt-input-with-picklist__input"
+                prefix={inputPrefix}
+                label={label.input}
+                value={value.input}
+                required={required}
+                disabled={disabled}
+                min-value={minValue}
+                max-value={maxValue}
+                max-length={maxLength}
+                reg-exp={regExp}
+                onfocus={handleFocus}
+                onchange={handleChanged}
+                onblur={handleBlur}
+                placeholder={placeholder.input}
+                name="input"></flt-input-text>
+        </div>
+        <div class="flt-input-with-picklist__error">{errorMessage}</div>
+    </div>
+</template>

package/frontend/components/flt/inputWithPicklist/inputWithPicklist.js

@@ -0,0 +1,148 @@
+import { api } from 'lwc'
+import { UserDataValidator } from 'fleetcor-lwc'
+import './inputWithPicklist.scss'
+
+export default class InputWithPicklist extends UserDataValidator {
+    @api picklistRight
+    @api errorMessage
+    @api placeholder
+    @api disabled
+    @api required
+    @api minValue
+    @api maxValue
+    @api maxLength
+    @api regExp
+    @api options
+    @api inputPrefix
+    @api showDropdownAsModal
+    @api modalDimentionStart = 1280
+    @api name = {
+        picklist: null,
+        input: null
+    }
+    @api value = {
+        picklist: null,
+        input: ''
+    }
+    @api label = {
+        picklist: '',
+        input: ''
+    }
+
+    touched
+    focused
+
+    @api validate() {
+        if (this.disabled) return
+        this.touched = true
+        this.error = !this.isValid()
+    }
+
+    @api isValid() {
+        let result = true
+        if (this.required) {
+            if (
+                this.regExp &&
+                this.value.input &&
+                !new RegExp(this.regExp).test(this.value.input)
+            ) {
+                result = false
+            } else if (!this.value.input) {
+                result = false
+            }
+
+            if (!this.value.picklist) {
+                result = false
+            }
+        }
+
+        if (
+            result &&
+            this.maxLength &&
+            this.value.input &&
+            this.value.input.length > parseInt(this.maxLength)
+        ) {
+            result = false
+        }
+
+        if (result && this.minValue) {
+            const numberValue = parseInt(this.value.input)
+            result = false
+            if (!isNaN(numberValue) && numberValue >= parseInt(this.minValue)) {
+                result = true
+            }
+        }
+
+        if (result && this.maxValue) {
+            const numberValue = parseInt(this.value.input)
+            result = false
+            if (!isNaN(numberValue) && numberValue <= parseInt(this.maxValue)) {
+                result = true
+            }
+        }
+
+        return result
+    }
+
+    @api getData(silent) {
+        return {
+            ...super.getData(silent),
+            modalDimentionStart: this.modalDimentionStart,
+            errorMessage: this.errorMessage,
+            placeholder: this.placeholder,
+            picklistRight: this.picklistRight,
+            maxValue: this.maxValue,
+            minValue: this.minValue,
+            regExp: this.regExp,
+            inputPrefix: this.inputPrefix,
+            showDropdownAsModal: this.showDropdownAsModal
+        }
+    }
+
+    handleFocus() {
+        this.focused = true
+        this.touched = true
+    }
+
+    handleBlur() {
+        this.focused = false
+    }
+
+    connectedCallback() {
+        if (this.value.picklist) {
+            const foundedOption = this.options.find((opt) => opt.value == this.value.picklist)
+            if (!foundedOption) {
+                console.log(
+                    'Warning:',
+                    `Option value "${this.value.picklist}" no available in picklist options`
+                )
+                this.value = {
+                    input: this.value.input,
+                    picklist: ''
+                }
+            }
+        }
+    }
+
+    get inputStyle() {
+        return this.generateClassNameList({
+            'flt-input-with-picklist': true,
+            'flt-input-with-picklist_right': this.picklistRight,
+            'flt-input-with-picklist_disabled': this.disabled,
+            'flt-input-with-picklist_active': this.focused,
+            'flt-input-with-picklist_error': !this.focused && this.touched && !this.isValid(),
+            'flt-input-with-picklist_success': this.isValid()
+        })
+    }
+
+    handleChanged(event) {
+        if (!this.disabled) {
+            this.value = { ...this.value, [event.detail.name]: event.detail.value }
+            this.dispatchEvent(
+                new CustomEvent('change', {
+                    detail: this.getData()
+                })
+            )
+        }
+    }
+}

package/frontend/components/flt/inputWithPicklist/inputWithPicklist.scss

@@ -0,0 +1,109 @@
+.flt-input-with-picklist {
+    --flt-picklist-view-border-color-selected: #6b7280;
+    --flt-input-border-color-success: #6b7280;
+    --flt-input-border-color-error: #6b7280;
+
+    &_error {
+        .flt-input-with-picklist__error {
+            line-height: 1.5;
+            opacity: 1;
+        }
+        .flt-picklist__wrapp,
+        .flt-input-text__wrapp {
+            border-color: var(--flt-input-with-picklist-border-color-error, #ed123d);
+        }
+    }
+
+    &_success {
+        .flt-picklist__wrapp,
+        .flt-input-text__wrapp {
+            border-color: var(--flt-input-with-picklist-border-color-success, #59eb9c);
+        }
+    }
+
+    &_right {
+        .flt-input-with-picklist__block {
+            flex-direction: row-reverse;
+        }
+
+        .flt-input-text__wrapp {
+            border-bottom-right-radius: 0;
+            border-top-right-radius: 0;
+            border-right: 0;
+        }
+
+        .flt-picklist__wrapp {
+            border-bottom-left-radius: 0;
+            border-top-left-radius: 0;
+            border-left: 0;
+            padding-left: 0;
+        }
+    }
+
+    &__block {
+        display: flex;
+        align-items: start;
+        background-color: #ffffff;
+        position: relative;
+    }
+
+    &__input {
+        flex-grow: 1;
+        position: relative;
+        z-index: 2;
+    }
+
+    &__code {
+        flex-shrink: 0;
+        position: relative;
+        z-index: 1;
+    }
+
+    &__error {
+        opacity: 0;
+        font-size: 12px;
+        line-height: 0;
+        color: var(--flt-input-with-picklist-border-color-error, #ed123d);
+        transition: all 0.3s;
+
+        &:empty {
+            display: none;
+        }
+    }
+
+    &:not(.flt-input-with-picklist_right) {
+        .flt-input-text__wrapp {
+            border-bottom-left-radius: 0;
+            border-top-left-radius: 0;
+            border-left: 0;
+        }
+
+        .flt-picklist__wrapp {
+            border-bottom-right-radius: 0;
+            border-top-right-radius: 0;
+            border-right: 0;
+            padding-right: 0;
+        }
+    }
+
+    .flt-picklist__dropdown-container,
+    .flt-input-with-picklist__code,
+    .flt-picklist_active {
+        position: initial;
+    }
+
+    .flt-picklist__dropdown {
+        top: 32px;
+    }
+
+    .flt-modal {
+        .flt-picklist__dropdown {
+            top: initial;
+        }
+    }
+
+    [user-data-modal='true'] + .flt-input-with-picklist__input {
+        position: initial;
+        z-index: initial;
+    }
+}

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

@@ -7,6 +7,9 @@
         .flt-picklist__view-arrow {
             transform: scale(-1);
         }
+        .flt-picklist__wrapp {
+            position: relative;
+        }
     }
 
     &_selected {
@@ -57,7 +60,6 @@
         padding: var(--flt-picklist-wrapper-padding, 0 16px);
         transition: all 0.3s;
         cursor: pointer;
-        position: relative;
         z-index: 1;
     }
 
@@ -72,6 +74,10 @@
             opacity: 1;
             line-height: 1.5;
         }
+
+        &:empty {
+            display: none;
+        }
     }
 
     &__placeholder {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "fleetcor-lwc",
-    "version": "3.8.6",
+    "version": "3.9.0",
     "description": "LWC framework by Fleetcor",
     "repository": {
         "type": "git",
@@ -33,6 +33,7 @@
             "flt/inputText",
             "flt/inputEmail",
             "flt/inputPhone",
+            "flt/inputWithPicklist",
             "flt/picklist",
             "flt/modal",
             "flt/radioGroup",