fleetcor-lwc 3.0.0 → 3.3.0

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

@@ -0,0 +1,252 @@
+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 './inputPhone.scss'
+
+export default class InputPhone extends InputText {
+    flagActive
+    mask
+    input
+    closeButton = closeButton
+
+    required = true
+    @api selectedCode
+    @api picklistInsideModalView
+
+    @api isValid() {
+        let result = true
+
+        if (!this.val) {
+            result = false
+        }
+
+        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
+        }
+
+        return result
+    }
+
+    get valid(){
+        let result = true
+
+        if (!this.val) {
+            result = false
+        }
+
+        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
+        }
+
+        return result
+    }
+
+    @api getData(silent) {
+        return {
+            ...super.getData(silent),
+            value: `${this.selectedCode} ${this.val}`,
+            separateValue: {
+                code: this.selectedCode,
+                phone: this.val
+            }
+        }
+    }
+
+    @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
+    }
+
+    set value(value) {
+        this.val = value || ''
+
+        if (this.val) {
+            this.touched = true
+            try {
+                let phoneNumberUtil = new LIB_PHONE_NUMBER.PhoneNumberUtil()
+                let number = phoneNumberUtil.parseAndKeepRawInput(this.val)
+                this.selectedCode = `+${number.getCountryCode()}`
+                this.val = number.getNationalNumber()
+            } catch (error) {
+                this.val = this.val.replace(`${this.selectedCode} `, '')
+            }
+        }
+    }
+
+    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
+            }
+        })
+    }
+
+    get selectedFlagOption() {
+        return this.flagOptions.find((item) => item.value == this.selectedCode)
+    }
+
+    get selectedFlag() {
+        if (this.selectedFlagOption) {
+            return this.selectedFlagOption.icon
+        }
+    }
+
+    get selectedDialCode() {
+        if (this.selectedFlagOption) {
+            return this.selectedFlagOption.value
+        }
+    }
+
+    get dialCodes() {
+        return this.flagOptions.map((n) => n.value)
+    }
+
+    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
+        })
+    }
+
+    get computedModalClass() {
+        return this.generateClassNameList({
+            'flt-input-phone__modal': true,
+            'flt-input-phone__modal-active': this.flagActive
+        })
+    }
+
+    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)
+        }
+    }
+
+    disconnectedCallback() {
+        this.connected = false
+    }
+
+    handleFlagActivate() {
+        this.flagActive = !this.flagActive
+    }
+
+    handleLabelClick() {
+        this.flagActive = false
+    }
+
+    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
+                }
+            }
+        }
+
+        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
+            })
+        )
+    }
+}

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

@@ -0,0 +1,288 @@
+.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);
+        }
+    }
+
+    &_error {
+        .flt-input-phone__block {
+            border-color: #ef4444;
+        }
+
+        .flt-input-phone__error {
+            height: 16px;
+            opacity: 1;
+        }
+    }
+
+    &_success {
+        .flt-input-phone__block {
+            border-color: #59eb9c;
+        }
+    }
+
+    &_flag {
+        &_active {
+            .flt-input-phone__flag-block {
+                &:after {
+                    content: '';
+                    transform: scale(-1);
+                }
+            }
+
+            .flt-input-phone__flag-list {
+                height: initial;
+                opacity: 1;
+            }
+        }
+    }
+
+    &__wrapp {
+        background-color: #fff;
+        height: 100%;
+        max-width: 75%;
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        transition: all 0.3s;
+    }
+
+    &__number {
+        height: 0;
+        opacity: 0;
+        line-height: 20px;
+        font-size: 16px;
+        transition: all 0.3s;
+    }
+
+    &__placeholder {
+        font-size: 16px;
+        line-height: 20px;
+    }
+
+    &__error {
+        height: 0;
+        opacity: 0;
+        font-size: 12px;
+        line-height: 16px;
+        color: #ef4444;
+        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;
+    }
+
+    &__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;
+        }
+    }
+
+    &__flag-wrapper {
+        position: relative;
+        flex-shrink: 0;
+    }
+
+    &__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;
+    }
+
+    &__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);
+        }
+    }
+
+    &__flag-icon-label {
+        margin-left: 1rem;
+    }
+
+    &__flag-icon,
+    &__flag-selected-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 {
+            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;
+                }
+            }
+        }
+    }
+}