fleetcor-lwc 3.6.3 → 3.8.0

package/README.md

@@ -338,6 +338,52 @@ Add / update `lwc.config.json` file in your project
 | ------ | ------------ | ------ | ------------------------------------- |
 | change | event.detail | object | Return full data of component's state |
 
+### Picklist Chips
+
+```html
+<flt-picklist
+  name="city"
+  required
+  show-dropdown-as-modal
+  placeholder="City"
+  error-message="Error! Empty field"
+  required
+  value="London"
+  options="[{label:'London', value:'London'}, {label:'Leon', value:'Leon'}]"
+>
+</flt-picklist>
+...
+```
+
+#### Picklist variables
+
+| @api variables         | type   | values   | required | description                                                                                   |
+| ---------------------- | ------ | -------- | -------- | --------------------------------------------------------------------------------------------- |
+| name                   | string |          | +        |                                                                                               |
+| options                | array  |          | +        | Array of available items with `label` and `value` as unique string                            |
+| size                   | string | `medium` | -        | Size of buttons (button sizes)                                                                |
+| show-dropdown-as-modal | bool   |          | -        | Show modal with selected options                                                              |
+| modal-dimention-start  | int    | 1280     | -        | If showDropdownAsModal is true, by default modal become visible window width less then 1280px |
+| value                  | string |          | -        | Current value from options items value                                                        |
+| disabled               | bool   |          | -        |                                                                                               |
+| required               | bool   |          | -        |                                                                                               |
+| group                  | string |          | -        |                                                                                               |
+| error-message          | string |          | -        |                                                                                               |
+
+#### 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 |
+
+#### Picklist events
+
+| name   | handle       | return | description                           |
+| ------ | ------------ | ------ | ------------------------------------- |
+| change | event.detail | object | Return full data of component's state |
+
 ### Input Text
 
 ```html
@@ -401,11 +447,11 @@ Add / update `lwc.config.json` file in your project
 
 #### Input Text events
 
-| name          | handle       | return | description                           |
-| ------------- | ------------ | ------ | ------------------------------------- |
-| focus_happend | event        | object | Return common Event object            |
-| blur_happend  | event        | object | Return common Event object            |
-| change        | event.detail | object | Return full data of component's state |
+| name   | handle       | return | description                           |
+| ------ | ------------ | ------ | ------------------------------------- |
+| focus  | event        | object | Return common Event object            |
+| blur   | event        | object | Return common Event object            |
+| change | event.detail | object | Return full data of component's state |
 
 ### Input Email
 
@@ -425,6 +471,50 @@ This component fully extends from `Input Text`
 ...
 ```
 
+### Input Phone
+
+```html
+<flt-input-phone
+  name="phone"
+  value="+44 3435234523"
+  error-message="Error! Required field"
+  required
+  placeholder="Phone Number"
+  error-message="Please enter a valid phone"
+></flt-input-phone>
+...
+```
+
+#### Input Phone variables
+
+| @api variables         | type   | values | required | description                                                                                   |
+| ---------------------- | ------ | ------ | -------- | --------------------------------------------------------------------------------------------- |
+| name                   | string |        | +        |                                                                                               |
+| error-message          | string |        | -        |                                                                                               |
+| value                  | string |        | -        |                                                                                               |
+| required               | bool   |        | -        |                                                                                               |
+| disabled               | bool   |        | -        |                                                                                               |
+| placeholder            | string |        | -        |                                                                                               |
+| code-by-default        | string | `GB`   | -        | Country code. by default UK country code `GB`                                                 |
+| show-dropdown-as-modal | bool   |        | -        |                                                                                               |
+| modal-dimention-start  | int    | 1280   | -        | If showDropdownAsModal is true, by default modal become visible window width less then 1280px |
+
+#### Input Phone 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 Phone events
+
+| name   | handle       | return | description                           |
+| ------ | ------------ | ------ | ------------------------------------- |
+| focus  | event        | object | Return common Event object            |
+| blur   | event        | object | Return common Event object            |
+| change | event.detail | object | Return full data of component's state |
+
 ## Interfaces
 
 #### ModalViewer
@@ -517,7 +607,9 @@ You can override them as you wish by global css variables as priority.
   --flt-input-text-font-weight: 400;
   --flt-input-border-color-active: #6b7280;
   --flt-input-border-color-success: #59eb9c;
+  --flt-input-border-color-error: #ed123d;
   --flt-input-border-radius: 12px;
+  --flt-input-prefix-gap: 8px;
   --flt-card-bgc: #fff;
   --flt-card-padding: 24px;
   --flt-card-border-radius: 20px;
@@ -542,11 +634,46 @@ You can override them as you wish by global css variables as priority.
   --flt-radio-group-chips-label-mb: 4px;
   --flt-radio-group-chips-error-color: #ed123d;
   --flt-radio-group-chips-error-fz: 12px;
+  --flt-picklist-view-border-color-selected: #59eb9c;
+  --flt-picklist-placeholder-activate-fz: 12px;
+  --flt-picklist-placeholder-activate-lh: 16px;
+  --flt-picklist-bgc: #ffffff;
+  --flt-picklist-border: 1px solid #6b7280;
+  --flt-picklist-border-radius: 12px;
+  --flt-picklist-wrapper-height: 44px;
+  --flt-picklist-wrapper-padding: 0 16px;
+  --flt-picklist-error-color: #ed123d;
+  --flt-picklist-error-fz: 12px;
+  --flt-picklist-placeholder-color: #111827;
+  --flt-picklist-placeholder-fz: 16px;
+  --flt-picklist-placeholder-lh: 20px;
+  --flt-picklist-view-arrow-path-stroke: #4c4c4c;
+  --flt-picklist-dropdown-border: none;
+  --flt-picklist-dropdown-bgc: #ffffff;
+  --flt-picklist-option-padding: 12px 16px;
+  --flt-picklist-option-color: #4c4c4c;
+  --flt-picklist-dropdown-option-border-bottom-color: #eeeeee;
+  --flt-picklist-option-selected-color: #4c4c4c;
+  --flt-picklist-dropdown-option-bgc: #f2d400;
+  --flt-picklist-option-first-child-padding: 32px 16px 12px;
+  --flt-picklist-option-padding: 12px 16px;
+  --flt-picklist-dropdown-modal-header-bgc: #f3f4f6;
+  --flt-input-phone-border-color-success: #59eb9c;
+  --flt-input-phone-border-color-error: #ed123d;
 }
 ```
 
 ## Release Notes:
 
+- v.3.8.0
+
+  - Added new component `flt-input-phone`
+  - Updated: `flt-input-text`, `flt-picklist`
+
+- v.3.7.0
+
+  - Added new component `flt-picklist`
+
 - v.3.6.3
 
   - Updated `flt-button` componentm styles

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

@@ -0,0 +1,113 @@
+import { createElement } from 'lwc'
+import InputPhone from 'flt/inputPhone'
+
+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-phone', () => {
+    afterEach(() => {
+        while (document.body.firstChild) {
+            document.body.removeChild(document.body.firstChild)
+        }
+    })
+
+    it('flt-input-phone base', async () => {
+        const inputPhoneEl = createElement('flt-input-phone', { is: InputPhone })
+        inputPhoneEl.name = 'phone'
+        inputPhoneEl.required = true
+        inputPhoneEl.errorMessage = 'Please enter a valid phone'
+        inputPhoneEl.codeByDefault = 'BY'
+        inputPhoneEl.value = '+375 295558386'
+        inputPhoneEl.placeholder = 'Phone Number'
+        document.body.appendChild(inputPhoneEl)
+        await expect(inputPhoneEl.firstChild.classList).toContain('flt-input-phone')
+
+        const picklistEl = inputPhoneEl.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()
+            inputPhoneEl.dispatchEvent(new CustomEvent('change'))
+            return Promise.resolve().then(async () => {
+                const data = picklistEl.getData()
+                await expect(data.value).toBe('+44')
+                const inputEl = inputPhoneEl.querySelector('flt-input-text')
+                inputEl.firstChild.focus()
+                inputEl.value = '3456'
+                inputEl.dispatchEvent(new CustomEvent('change', { detail: inputEl.getData() }))
+                return Promise.resolve().then(async () => {
+                    inputEl.value = '03435234523'
+                    inputEl.dispatchEvent(new CustomEvent('change', { detail: inputEl.getData() }))
+                    return Promise.resolve().then(async () => {
+                        await expect(inputPhoneEl.getData().isValid).toBeTruthy()
+                    })
+                })
+            })
+        })
+    })
+
+    it('flt-input-phone negotive', async () => {
+        const inputPhoneEl = createElement('flt-input-phone', { is: InputPhone })
+        inputPhoneEl.name = 'phone'
+        inputPhoneEl.required = true
+        inputPhoneEl.errorMessage = 'Please enter a valid phone'
+        inputPhoneEl.codeByDefault = 'gg'
+        inputPhoneEl.value = '2958386'
+        inputPhoneEl.placeholder = 'Phone Number'
+        document.body.appendChild(inputPhoneEl)
+        await expect(inputPhoneEl.firstChild.classList).toContain('flt-input-phone')
+        await expect(inputPhoneEl.isValid()).toBeFalsy()
+        inputPhoneEl.value = ''
+        inputPhoneEl.validate()
+        await expect(inputPhoneEl.isValid()).toBeFalsy()
+    })
+
+    it('flt-input-phone negotive 2', async () => {
+        const inputPhoneEl = createElement('flt-input-phone', { is: InputPhone })
+        inputPhoneEl.name = 'phone'
+        inputPhoneEl.required = true
+        inputPhoneEl.errorMessage = 'Please enter a valid phone'
+        inputPhoneEl.value = '+44 3435234523'
+        inputPhoneEl.placeholder = 'Phone Number'
+        document.body.appendChild(inputPhoneEl)
+
+        return Promise.resolve().then(async () => {
+            await expect(inputPhoneEl.firstChild.classList).toContain('flt-input-phone')
+            await expect(inputPhoneEl.isValid()).toBeTruthy()
+            inputPhoneEl.value = undefined
+            return Promise.resolve().then(async () => {
+                await expect(inputPhoneEl.isValid()).toBeFalsy()
+            })
+        })
+    })
+
+    it('flt-input-phone disabled', async () => {
+        const inputPhoneEl = createElement('flt-input-phone', { is: InputPhone })
+        inputPhoneEl.name = 'phone'
+        inputPhoneEl.required = true
+        inputPhoneEl.disabled = true
+        inputPhoneEl.errorMessage = 'Please enter a valid phone'
+        inputPhoneEl.codeByDefault = 'gg'
+        inputPhoneEl.value = '2958386'
+        inputPhoneEl.placeholder = 'Phone Number'
+        document.body.appendChild(inputPhoneEl)
+        return Promise.resolve().then(async () => {
+            await expect(inputPhoneEl.firstChild.classList).toContain('flt-input-phone_disabled')
+            inputPhoneEl.validate()
+            await expect(inputPhoneEl.isValid()).toBeFalsy()
+        })
+    })
+})

package/frontend/components/flt/inputPhone/inputPhone.html

@@ -1,109 +1,30 @@
 <template lwc:render-mode="light">
-    <div class={inputStyle} tabindex="0">
+    <div class={inputStyle}>
         <div class="flt-input-phone__block">
-            <div class="flt-input-phone__flag-wrapper">
-                <div class="flt-input-phone__flag-block" onclick={handleFlagActivate}>
-                    <div class="flt-input-phone__flag-container">
-                        <div class="flt-input-phone__flag-selected-value">
-                            <img
-                                class="flt-input-phone__flag-selected-icon"
-                                src={selectedFlag}
-                                alt="Flag" />
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <label onclick={handleLabelClick} class="flt-input-phone__wrapp" for={name}>
-                <div class="flt-input-phone__placeholder">{placeholder}</div>
-                <div class="flt-input-phone__number">
-                    <span class="flt-input-phone__code">{selectedFlagOption.label}</span>
-                    <input
-                        id={name}
-                        onfocus={handleFocused}
-                        onblur={handleBlur}
-                        oninput={handleInput}
-                        class="flt-input-phone__input"
-                        maxlength={maxLength}
-                        type="tel"
-                        name={name} />
-                </div>
-            </label>
+            <flt-picklist
+                class="flt-input-phone__code"
+                placeholder="Select country code"
+                value={codeValue}
+                options={flagOptions}
+                disabled={disabled}
+                onfocus={handleFocus}
+                onblur={handleBlur}
+                show-dropdown-as-modal={showDropdownAsModal}
+                modal-dimention-start={modalDimentionStart}
+                onchange={handleFlagChanged}
+                name="phoneCode"></flt-picklist>
+            <flt-input-text
+                class="flt-input-phone__number"
+                prefix={prefix}
+                disabled={disabled}
+                type="number"
+                onfocus={handleFocus}
+                onblur={handleBlur}
+                placeholder={placeholder}
+                value={phoneNumber}
+                onchange={handlePhoneNumberChanged}
+                name="phoneNumber"></flt-input-text>
         </div>
-
-        <template if:true={picklistInsideModalView}>
-            <div class={computedModalClass}>
-                <div class="flt-input-phone__modal-glass" onclick={handleFlagActivate}></div>
-                <div class="flt-input-phone__modal-container">
-                    <div class="flt-input-phone__modal-header">
-                        <span class="flt-input-phone__modal-header-title"
-                            >Select country code:</span
-                        >
-                        <a
-                            href="javascript:void(0);"
-                            onclick={handleFlagActivate}
-                            class="flt-input-phone__modal-close-button">
-                            <img
-                                src={closeButton}
-                                class="flt-input-phone__modal-close-button-icon"
-                                alt="close button" />
-                        </a>
-                    </div>
-                    <ul class="flt-input-phone__flag-list">
-                        <template for:each={flagOptions} for:item="item">
-                            <li
-                                if:true={item.selected}
-                                key={item.key}
-                                onclick={handleSelectFlag}
-                                data-value={item.value}
-                                class="flt-input-phone__flag-list-item flt-input-phone__flag-list-item_selected">
-                                <img
-                                    class="flt-input-phone__flag-icon"
-                                    src={item.icon}
-                                    alt={item.value} />
-                                <span class="flt-input-phone__flag-icon-label">{item.label}</span>
-                            </li>
-                            <li
-                                if:false={item.selected}
-                                key={item.key}
-                                onclick={handleSelectFlag}
-                                data-value={item.value}
-                                class="flt-input-phone__flag-list-item">
-                                <img
-                                    class="flt-input-phone__flag-icon"
-                                    src={item.icon}
-                                    alt={item.value} />
-                                <span class="flt-input-phone__flag-icon-label">{item.label}</span>
-                            </li>
-                        </template>
-                    </ul>
-                </div>
-            </div>
-        </template>
-        <template if:false={picklistInsideModalView}>
-            <ul class="flt-input-phone__flag-list">
-                <template for:each={flagOptions} for:item="item">
-                    <li
-                        if:true={item.selected}
-                        key={item.key}
-                        onclick={handleSelectFlag}
-                        data-value={item.value}
-                        class="flt-input-phone__flag-list-item flt-input-phone__flag-list-item_selected">
-                        <img class="flt-input-phone__flag-icon" src={item.icon} alt={item.value} />
-                        <span class="flt-input-phone__flag-icon-label">{item.label}</span>
-                    </li>
-                    <li
-                        if:false={item.selected}
-                        key={item.key}
-                        onclick={handleSelectFlag}
-                        data-value={item.value}
-                        class="flt-input-phone__flag-list-item">
-                        <img class="flt-input-phone__flag-icon" src={item.icon} alt={item.value} />
-                        <span class="flt-input-phone__flag-icon-label">{item.label}</span>
-                    </li>
-                </template>
-            </ul>
-        </template>
-
         <div class="flt-input-phone__error">{errorMessage}</div>
     </div>
 </template>