fleetcor-lwc 3.7.0 → 3.8.0

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

@@ -1,251 +1,155 @@
-import InputText from 'flt/inputText'
 import { api } from 'lwc'
 import { COUNTRIES } from './utils'
 import LIB_PHONE_NUMBER from 'google-libphonenumber'
-import IMask from 'imask'
-import closeButton from './close-button.svg'
-
+import { UserDataValidator } from 'fleetcor-lwc'
 import './inputPhone.scss'
 
-export default class InputPhone extends InputText {
-    flagActive
-    mask
-    input
-    closeButton = closeButton
-
-    required = true
-    @api selectedCode
-    @api picklistInsideModalView
-
-    @api isValid() {
-        let result = true
+const CODE_BY_DEFAULT = 'GB'
+const CODE_VALUE_SB = '+44'
 
-        if (!this.val) {
-            result = false
-        }
+export default class InputPhone extends UserDataValidator {
+    @api errorMessage
+    @api placeholder
+    @api disabled
+    @api required
+    @api codeByDefault = CODE_BY_DEFAULT
+    @api showDropdownAsModal
+    @api modalDimentionStart = 1280
 
-        try {
-            let phoneNumberUtil = new LIB_PHONE_NUMBER.PhoneNumberUtil()
-            let number = phoneNumberUtil.parseAndKeepRawInput(this.formattedNumber)
-            let regionCode = phoneNumberUtil.getRegionCodeForNumber(number)
-            result = phoneNumberUtil.isValidNumberForRegion(number, regionCode)
-        } catch (error) {
-            result = false
+    @api
+    get value() {
+        let result = `${this.codeValue} ${this.phoneNumber}`
+        if (result) {
+            try {
+                let phoneNumberUtil = new LIB_PHONE_NUMBER.PhoneNumberUtil()
+                let number = phoneNumberUtil.parseAndKeepRawInput(result)
+                result = `+${number.getCountryCode()} ${number.getNationalNumber()}`
+            } catch (error) {}
         }
-
         return result
     }
 
-    get valid(){
-        let result = true
-
-        if (!this.val) {
-            result = false
-        }
-
+    set value(value = '') {
         try {
             let phoneNumberUtil = new LIB_PHONE_NUMBER.PhoneNumberUtil()
-            let number = phoneNumberUtil.parseAndKeepRawInput(this.formattedNumber)
-            let regionCode = phoneNumberUtil.getRegionCodeForNumber(number)
-            result = phoneNumberUtil.isValidNumberForRegion(number, regionCode)
+            let number = phoneNumberUtil.parseAndKeepRawInput(value)
+            this.codeValue = `+${number.getCountryCode()}`
+            this.phoneNumber = number.getNationalNumber()
         } catch (error) {
-            result = false
+            this.phoneNumber = ''
         }
-
-        return result
     }
 
     @api getData(silent) {
         return {
             ...super.getData(silent),
-            value: `${this.selectedCode} ${this.val}`,
-            separateValue: {
-                code: this.selectedCode,
-                phone: this.val
-            }
+            codeValue: this.codeValue,
+            phoneNumber: this.phoneNumber,
+            codeByDefault: this.codeByDefault
         }
     }
 
-    @api
-    get value() {
-        let result = this.formattedNumber
-        if (result) {
-            try {
-                let phoneNumberUtil = new LIB_PHONE_NUMBER.PhoneNumberUtil()
-                let number = phoneNumberUtil.parseAndKeepRawInput(result)
-                result = `+${number.getCountryCode()} ${number.getNationalNumber()}`
-            } catch (error) {}
-        }
-        return result
+    @api validate() {
+        if (this.disabled) return
+        this.touched = true
+        this.error = !this.isValid()
     }
 
-    set value(value) {
-        this.val = value || ''
+    @api isValid() {
+        let result = true
 
-        if (this.val) {
-            this.touched = true
+        if (this.required) {
+            if (!this.phoneNumber || !this.codeValue) {
+                result = false
+            }
             try {
                 let phoneNumberUtil = new LIB_PHONE_NUMBER.PhoneNumberUtil()
-                let number = phoneNumberUtil.parseAndKeepRawInput(this.val)
-                this.selectedCode = `+${number.getCountryCode()}`
-                this.val = number.getNationalNumber()
+                let number = phoneNumberUtil.parseAndKeepRawInput(
+                    `${this.codeValue} ${this.phoneNumber}`
+                )
+                let regionCode = phoneNumberUtil.getRegionCodeForNumber(number)
+                result = phoneNumberUtil.isValidNumberForRegion(number, regionCode)
             } catch (error) {
-                this.val = this.val.replace(`${this.selectedCode} `, '')
+                result = false
             }
         }
-    }
 
-    get formattedNumber() {
-        if (this.selectedCode && this.val) {
-            return `${this.selectedCode} ${this.val}`
-        }
-    }
-
-    get flagOptions() {
-        return COUNTRIES.map((item) => {
-            return {
-                icon: item.flag,
-                key: item.code,
-                value: item.dialCode,
-                label: item.dialCode,
-                selected: this.selectedCode == item.dialCode
-            }
-        })
+        return result
     }
 
-    get selectedFlagOption() {
-        return this.flagOptions.find((item) => item.value == this.selectedCode)
-    }
+    phoneNumber = ''
+    codeValue = ''
+    touched
+    focused
 
-    get selectedFlag() {
-        if (this.selectedFlagOption) {
-            return this.selectedFlagOption.icon
-        }
+    get prefix() {
+        return this.codeValue === CODE_VALUE_SB ? CODE_VALUE_SB + '(0)' : this.codeValue
     }
 
-    get selectedDialCode() {
-        if (this.selectedFlagOption) {
-            return this.selectedFlagOption.value
-        }
+    handleFocus() {
+        this.focused = true
+        this.touched = true
     }
 
-    get dialCodes() {
-        return this.flagOptions.map((n) => n.value)
+    handleBlur() {
+        this.focused = false
     }
 
     get inputStyle() {
         return this.generateClassNameList({
             'flt-input-phone': true,
-            'flt-input-phone_active': this.val || this.focused,
-            'flt-input-phone_error': this.touched && !this.valid,
-            'flt-input-phone_success': this.val && this.valid,
-            'flt-input-phone_flag_active': this.flagActive,
-            'flt-input-phone_flag_selected': this.selectedCode,
-            'flt-input-phone_picklist-inside-modal-view': this.picklistInsideModalView
+            'flt-input-phone_disabled': this.disabled,
+            'flt-input-phone_active': this.focused,
+            'flt-input-phone_error':
+                !this.focused && (this.touched || this.phoneNumber) && !this.isValid(),
+            'flt-input-phone_success': this.phoneNumber && this.isValid()
         })
     }
 
-    get computedModalClass() {
-        return this.generateClassNameList({
-            'flt-input-phone__modal': true,
-            'flt-input-phone__modal-active': this.flagActive
+    get flagOptions() {
+        return COUNTRIES.map((item) => {
+            return {
+                icon: item.flag,
+                key: item.code,
+                value: item.dialCode,
+                label: `<div class="flt-input-phone__item-flag">
+                            <img src="${item.flag}" alt="${item.dialCode}" class="flt-input-phone__flag-icon">
+                            <span class="flt-input-phone__flag-icon-label">${item.dialCode}</span>
+                        </div>`,
+                selected: this.selectedCode == item.dialCode
+            }
         })
     }
 
-    renderedCallback() {
-        if (!this.connected) {
-            this.input = this.querySelector('input')
-            this.mask = IMask(this.input, {
-                mask: Number,
-                overwrite: true,
-                lazy: false
-            })
-            this.mask.unmaskedValue = this.val + ''
-            this.mask.on('accept', this.handleChange.bind(this))
-            this.connected = true
-        }
-    }
-
-    handleFocused(event) {
-        super.handleFocused(event)
-        if (!this.mask.unmaskedValue) {
-            this.input.setSelectionRange(
-                this.mask.unmaskedValue.length,
-                this.mask.unmaskedValue.length
-            )
-            setTimeout(() => {
-                this.input.setSelectionRange(
-                    this.mask.unmaskedValue.length,
-                    this.mask.unmaskedValue.length
-                )
-            }, 60)
-        }
+    get codePrefixByCountryCode() {
+        return COUNTRIES.find((c) => c.code === this.codeByDefault)?.dialCode
     }
 
-    disconnectedCallback() {
-        this.connected = false
+    connectedCallback() {
+        this.codeValue = this.codeValue || this.codePrefixByCountryCode
     }
 
-    handleFlagActivate() {
-        this.flagActive = !this.flagActive
+    handleFlagChanged(event) {
+        this.codeValue = event.detail.value
+        this.handleChange()
     }
 
-    handleLabelClick() {
-        this.flagActive = false
+    handlePhoneNumberChanged(event) {
+        this.phoneNumber = event.detail.value
+        this.handleChange()
     }
 
-    handleSelectFlag(event) {
-        this.flagActive = false
-        this.selectedCode = event.currentTarget.dataset.value
-        this.mask?.updateOptions({
-            mask: Number,
-            overwrite: 'shift',
-            lazy: false
-        })
-    }
-
-    handleChange() {
-        this.val = this.mask?.unmaskedValue
-
-        if (this.val && this.val.trimStart().startsWith('+')) {
-            if (this.val.includes(this.selectedDialCode)) {
-                this.val = this.val.replace(this.selectedDialCode, '').trim()
-            } else if (this.val.trimStart().includes(' ')) {
-                let code = this.val.trimStart().split(' ')[0]
-                if (this.dialCodes.includes(code)) {
-                    this.val = this.val.replace(code, '').trim()
-                    this.selectedCode = code
-                }
-            }
+    handleChange(event) {
+        if (
+            this.codeValue === CODE_VALUE_SB &&
+            this.phoneNumber[0] === '0' &&
+            this.phoneNumber.length > 1
+        ) {
+            this.phoneNumber = this.phoneNumber.slice(1)
         }
-
         this.dispatchEvent(
             new CustomEvent('change', {
-                detail: {
-                    ...this.getData()
-                }
-            })
-        )
-    }
-
-    handleInput(event) {
-        event.stopPropagation()
-        this.handleChange({
-            data: event?.target?.value
-        })
-    }
-
-    handleBlur(event) {
-        if (this.disabled) return
-        this.focused = false
-        this.touched = true
-        this.val = (event.target.value || '').trimEnd()
-        event.target.value = this.val
-        this.dispatchEvent(
-            new CustomEvent('blur_happend', {
-                detail: null,
-                cancelable: true,
-                bubbles: true
+                detail: this.getData()
             })
         )
     }

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

@@ -1,288 +1,106 @@
 .flt-input-phone {
-    color: #111827;
-    position: relative;
-    font-weight: 400;
-
-    &_active {
-        .flt-input-phone__number {
-            height: 20px;
-            opacity: 1;
-        }
-
-        .flt-input-phone__input,
-        .flt-input-phone__code {
-            line-height: 20px;
-            font-size: 16px;
-        }
-
-        .flt-input-phone__placeholder {
-            font-size: 12px;
-            line-height: 16px;
-        }
-
-        .flt-input-phone__block {
-            border-color: var(--input-border-color-active, #6b7280);
-        }
-    }
+    --flt-picklist-view-border-color-selected: #6b7280;
+    --flt-input-border-color-success: #6b7280;
 
     &_error {
-        .flt-input-phone__block {
-            border-color: #ef4444;
-        }
-
         .flt-input-phone__error {
-            height: 16px;
+            line-height: 1.5;
             opacity: 1;
         }
-    }
-
-    &_success {
-        .flt-input-phone__block {
-            border-color: #59eb9c;
+        .flt-picklist__wrapp,
+        .flt-input-text__wrapp {
+            border-color: var(--flt-input-phone-border-color-error, #ed123d);
         }
     }
 
-    &_flag {
-        &_active {
-            .flt-input-phone__flag-block {
-                &:after {
-                    content: '';
-                    transform: scale(-1);
-                }
-            }
-
-            .flt-input-phone__flag-list {
-                height: initial;
-                opacity: 1;
-            }
+    &_success {
+        .flt-picklist__wrapp,
+        .flt-input-text__wrapp {
+            border-color: var(--flt-input-phone-border-color-success, #59eb9c);
         }
     }
 
-    &__wrapp {
-        background-color: #fff;
-        height: 100%;
-        max-width: 75%;
-        flex-grow: 1;
+    &__block {
         display: flex;
-        flex-direction: column;
-        justify-content: center;
-        transition: all 0.3s;
+        align-items: start;
+        background-color: #ffffff;
+        position: relative;
     }
 
     &__number {
-        height: 0;
-        opacity: 0;
-        line-height: 20px;
-        font-size: 16px;
-        transition: all 0.3s;
+        flex-grow: 1;
+        position: relative;
+        z-index: 2;
     }
 
-    &__placeholder {
-        font-size: 16px;
-        line-height: 20px;
+    &__code {
+        flex-shrink: 0;
+        position: relative;
+        z-index: 1;
+        width: 72px;
     }
 
     &__error {
-        height: 0;
         opacity: 0;
         font-size: 12px;
-        line-height: 16px;
-        color: #ef4444;
+        line-height: 0;
+        color: var(--flt-input-phone-border-color-error, #ed123d);
         transition: all 0.3s;
-        margin-top: 4px;
     }
 
-    &__block {
-        padding-left: 16px;
-        padding-right: 16px;
-        border: 1px solid #6b7280;
-        border-radius: var(--input-border-radius, 12px);
-        background-color: #fff;
-        display: flex;
-        align-items: center;
-        height: 44px;
-        position: relative;
-        z-index: 101;
+    .flt-input-text__wrapp {
+        border-bottom-left-radius: 0;
+        border-top-left-radius: 0;
+        border-left: 0;
     }
 
-    &__flag-block {
-        margin-right: 8px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        font-size: 16px;
-        width: 56px;
-        line-height: 20px;
-
-        &:after {
-            content: '';
-            display: inline-block;
-            transition: all 0.3s;
-            width: 24px;
-            height: 24px;
-            background: url('./arrow.svg') no-repeat;
-            background-size: contain;
-        }
+    .flt-picklist__wrapp {
+        border-bottom-right-radius: 0;
+        border-top-right-radius: 0;
+        border-right: 0;
+        padding-right: 0;
     }
 
-    &__flag-wrapper {
-        position: relative;
-        flex-shrink: 0;
+    .flt-picklist__dropdown-container,
+    .flt-input-phone__code,
+    .flt-picklist_active {
+        position: initial;
     }
 
-    &__flag-list {
-        height: 0;
-        opacity: 0;
-        padding: 0;
-        margin: 0;
-        list-style-type: none;
-        position: absolute;
-        z-index: 100;
-        background-color: #fff;
-        border-bottom-right-radius: 12px;
-        border-bottom-left-radius: 12px;
-        box-shadow: 0px 10px 15px -3px rgba(16, 24, 40, 0.1);
-        left: 0;
-        top: 22px;
-        width: 100%;
-        overflow: hidden;
-        transition: all 0.3s;
-        max-height: 212px;
-        overflow-y: scroll;
+    .flt-picklist__dropdown {
+        top: 32px;
     }
 
-    &__flag-list-item {
-        padding: 12px 17px;
-        display: flex;
-        align-items: center;
-        border-bottom: 1px solid #eeeeee;
-        background-color: #fff;
-
-        &:first-child {
-            padding-top: 30px;
-        }
-
-        &:last-child {
-            border-bottom: none;
-            border-bottom-right-radius: 12px;
-            border-bottom-left-radius: 12px;
-        }
-
-        &_selected {
-            background-color: var(--flag-list-item-selected-bg-color, #f2d400);
+    .flt-modal {
+        .flt-picklist__dropdown {
+            top: initial;
         }
     }
+    .flt-picklist__placeholder {
+        display: none;
+    }
 
-    &__flag-icon-label {
-        margin-left: 1rem;
+    &__item-flag {
+        display: flex;
+        align-items: center;
+        gap: 16px;
     }
 
-    &__flag-icon,
-    &__flag-selected-icon {
+    &__flag-icon {
         width: 24px;
         height: 24px;
         border-radius: 100%;
         object-fit: cover;
     }
 
-    &__flag-selected-value {
-        display: flex;
-    }
-
-    &__number {
-        display: flex;
-    }
-
-    &__input {
-        width: 100%;
-        line-height: 0;
-        font-size: 0;
-        transition: all 0.3s;
-        outline: none;
-        border: none;
-        padding: 0;
-        letter-spacing: 1px;
-    }
-
-    &__code {
-        line-height: 0;
-        font-size: 0;
-        transition: all 0.3s;
-        margin-right: 8px;
-    }
-
-    &_picklist-inside-modal-view {
-        .flt-input-phone__modal-active {
-            position: initial;
-            display: initial;
-        }
-
-        .flt-input-phone__modal-glass,
-        .flt-input-phone__modal-header {
+    .flt-picklist__value {
+        .flt-input-phone__flag-icon-label {
             display: none;
         }
+    }
 
-        @media (max-width: 1279px) {
-            .flt-input-phone__modal {
-                display: none;
-            }
-
-            .flt-input-phone__modal-active {
-                position: fixed;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100%;
-                z-index: 200000;
-            }
-
-            .flt-input-phone__modal-glass {
-                display: block;
-                position: absolute;
-                width: 100%;
-                height: 100%;
-                left: 0;
-                top: 0;
-                background: rgba(0, 0, 0, 0.4);
-            }
-
-            .flt-input-phone__modal-container {
-                position: relative;
-                background-color: #ffffff;
-                border-radius: var(--input-border-radius, 12px);
-                overflow: hidden;
-
-                .flt-input-phone__flag-list {
-                    position: initial;
-                    max-width: 300px;
-                    width: 300px;
-                    top: initial;
-                    left: initial;
-                }
-            }
-
-            .flt-input-phone__modal-header {
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                font-weight: 600;
-                padding: 12px;
-                background-color: var(--gray-5, #f8f8f8);
-            }
-
-            .flt-input-phone__flag-list {
-                max-height: 80vh !important;
-                overflow: auto !important;
-            }
-
-            .flt-input-phone__flag-list-item {
-                &:first-child {
-                    padding-top: 12px;
-                }
-            }
-        }
+    [user-data-modal='true'] + .flt-input-phone__number {
+        position: initial;
+        z-index: initial;
     }
 }