fleetcor-lwc 3.0.0 → 3.3.0

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

@@ -0,0 +1,124 @@
+.flt-input-text {
+    box-sizing: border-box;
+    color: var(--flt-input-text-color, #111827);
+    font-weight: var(--flt-input-text-font-weight, 400);
+    cursor: pointer;
+
+    &__prefix {
+        padding-right: 2px;
+    }
+
+    &_disabled {
+        color: #d1d5db;
+
+        .flt-input-text__wrapp {
+            border-color: #d1d5db !important;
+            background: #f9fafb !important;
+            cursor: not-allowed;
+        }
+
+        -webkit-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+
+        input {
+            background-color: #f9fafb;
+            color: #bdc1c7;
+            cursor: not-allowed;
+        }
+    }
+
+    &_active,
+    &_activate {
+        .flt-input-text__input-block {
+            display: flex;
+            height: 20px;
+            opacity: 1;
+        }
+
+        .flt-input-text__placeholder {
+            font-size: 12px;
+            line-height: 16px;
+        }
+
+        .flt-input-text__wrapp {
+            border-color: var(--flt-input-border-color-active, #6b7280);
+        }
+    }
+
+    &_error {
+        .flt-input-text__wrapp {
+            border-color: #ef4444;
+        }
+
+        .flt-input-text__error {
+            height: 16px;
+            opacity: 1;
+        }
+    }
+
+    &_success {
+        .flt-input-text__wrapp {
+            border-color: var(--flt-input-border-color-success, #59eb9c);
+        }
+    }
+
+    &__wrapp {
+        background-color: #ffffff;
+        border: 1px solid #6b7280;
+        border-radius: var(--flt-input-border-radius, 12px);
+        overflow: hidden;
+        height: 44px;
+        display: flex;
+        flex-direction: column;
+        padding-left: 16px;
+        padding-right: 16px;
+        justify-content: center;
+        transition: all 0.3s;
+    }
+
+    &__input-block {
+        height: 0;
+        opacity: 0;
+        line-height: 20px;
+        font-size: 16px;
+        transition: all 0.3s;
+    }
+
+    &__input {
+        height: inherit;
+        font-size: 16px;
+    }
+
+    &__placeholder {
+        font-size: 16px;
+        line-height: 20px;
+    }
+
+    &__error {
+        height: 0;
+        opacity: 0;
+        margin-top: 4px;
+        font-size: 12px;
+        line-height: 16px;
+        color: #ef4444;
+        transition: all 0.3s;
+    }
+
+    input {
+        width: 100%;
+        outline: none;
+        border: none;
+        padding: 0;
+    }
+
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+
+    input[type='number'] {
+        -moz-appearance: textfield;
+    }
+}

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

@@ -0,0 +1,30 @@
+import { createElement } from 'lwc'
+import { ModalViewer } from 'fleetcor-lwc'
+import ProgressStep from 'flt/progressStep'
+import { doc } from 'prettier'
+
+describe('flt-modal', () => {
+    afterEach(() => {
+        ModalViewer.hideModals()
+    })
+
+    it('base test', () => {
+        const progressStep = createElement('flt-progress-step', { is: ProgressStep })
+        progressStep.total = 9
+        progressStep.current = 2
+        progressStep.title = 'Good job'
+        ModalViewer.showModalWithComponent(progressStep)
+
+        const modalElement = document.body.querySelector('flt-modal')
+        expect(modalElement.firstChild.classList).toContain('flt-modal')
+        const progressStepElemet = modalElement.querySelector('flt-progress-step')
+        expect(progressStepElemet.total).toBe(9)
+        expect(progressStepElemet.current).toBe(2)
+        expect(progressStepElemet.title).toBe('Good job')
+
+        const glassEl = modalElement.querySelector('.flt-modal__glass')
+        glassEl.click()
+        const removedModalElement = document.body.querySelector('flt-modal')
+        expect(removedModalElement).toBeFalsy()
+    })
+})

package/frontend/components/flt/modal/modal.html

@@ -0,0 +1,6 @@
+<template lwc:render-mode="light">
+    <div class="flt-modal">
+        <div class="flt-modal__glass" onclick={handleCloseButton}></div>
+        <div class="flt-modal__container"><slot></slot></div>
+    </div>
+</template>

package/frontend/components/flt/modal/modal.js

@@ -0,0 +1,8 @@
+import { BaseElement, ModalViewer } from 'fleetcor-lwc'
+import './modal.scss'
+
+export default class Modal extends BaseElement {
+    handleCloseButton() {
+        ModalViewer.hideModals()
+    }
+}

package/frontend/components/flt/modal/modal.scss

@@ -0,0 +1,34 @@
+.flt-modal {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    z-index: 999999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    animation: fadeIn 0.3s ease-in-out;
+
+    &__glass {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        background: var(--flt-modal-glass-bgc, rgba(0, 0, 0, 0.4));
+    }
+
+    &__container {
+        position: relative;
+    }
+}
+
+@keyframes fadeIn {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}

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

@@ -9,7 +9,7 @@ describe('flt-progress-step', () => {
         }
     })
 
-    it('base test', () => {
+    it('base test 2/9', () => {
         const progressStep = createElement('flt-progress-step', { is: ProgressStep })
         progressStep.total = 9
         progressStep.current = 2
@@ -24,4 +24,20 @@ describe('flt-progress-step', () => {
         const title = progressStep.firstChild.querySelector('.progress-step__current-title')
         expect(title.textContent).toBe('Good job')
     })
+
+    it('base test 8/9', () => {
+        const progressStep = createElement('flt-progress-step', { is: ProgressStep })
+        progressStep.total = 9
+        progressStep.current = 8
+        progressStep.title = 'Good job'
+        document.body.appendChild(progressStep)
+
+        expect(progressStep.firstChild.classList).toContain('progress-step')
+
+        const position = progressStep.firstChild.querySelector('.progress-step__number-propotion')
+        expect(position.textContent).toBe('8/9')
+
+        const title = progressStep.firstChild.querySelector('.progress-step__current-title')
+        expect(title.textContent).toBe('Good job')
+    })
 })

package/frontend/components/flt/progressStep/progressStep.scss

@@ -1,12 +1,12 @@
-$FLT_STEP_POSITION_TITLE_FONT_WEIGHT: var(--step-position-title-font-weight, 500);
-$FLT_STEP_POSITION_TITLE_COLOR: var(--step-position-title-color, #0a7db8);
+$FLT_STEP_POSITION_TITLE_FONT_WEIGHT: var(--flt-step-position-title-font-weight, 500);
+$FLT_STEP_POSITION_TITLE_COLOR: var(--flt-step-position-title-color, #0a7db8);
 $FLT_STEP_POSITION_NUMBER_PROPOTION_FONT_WEIGHT: var(
-    --step-position-number-propotion-font-weight,
+    --flt--step-position-number-propotion-font-weight,
     300
 );
-$FLT_STEP_POSITION_NUMBER_COLOR: var(--step-position-number-color, #111827);
-$FLT_STEP_POSITION_CIRCLE_COLOR: var(--step-position-circle-color, #0a7db8);
-$FLT_STEP_POSITION_CIRCLE_BACKGROUND: var(--step-position-circle-background, #bbe6fb);
+$FLT_STEP_POSITION_NUMBER_COLOR: var(--flt-step-position-number-color, #111827);
+$FLT_STEP_POSITION_CIRCLE_COLOR: var(--flt-step-position-circle-color, #0a7db8);
+$FLT_STEP_POSITION_CIRCLE_BACKGROUND: var(--flt-step-position-circle-background, #bbe6fb);
 
 .progress-step {
     position: relative;

package/frontend/components/flt/tooltip/tooltip.js

@@ -291,10 +291,10 @@ export default class Tooltip extends BaseElement {
 
     createTooltip() {
         // 1. find width of tooltip
-        const text = this.firstChild.querySelector('.flt-tooltip__text')
+        const text = this.firstElementChild.querySelector('.flt-tooltip__text')
         text.innerHTML = this.content
         this.lastRenderedContent = this.content
-        const content = this.firstChild.querySelector('.flt-tooltip__content')
+        const content = this.firstElementChild.querySelector('.flt-tooltip__content')
         let contentPosition = content.getBoundingClientRect()
         const bodyPosition = document.body.getBoundingClientRect()
 
@@ -312,7 +312,7 @@ export default class Tooltip extends BaseElement {
         this.svgH = contentPosition.height
 
         // 2. find position by vertical
-        this.childElementRect = this.firstChild.firstChild.getBoundingClientRect()
+        this.childElementRect = this.firstElementChild.firstElementChild.getBoundingClientRect()
         this.bottomSide = this.childElementRect.top - contentPosition.height < 12
 
         // 3. find position by horizontal
@@ -351,7 +351,7 @@ export default class Tooltip extends BaseElement {
     }
 
     renderedCallback() {
-        const text = this.firstChild.querySelector('.flt-tooltip__text')
+        const text = this.firstElementChild.querySelector('.flt-tooltip__text')
         if (this.firstSetup) {
             this.firstSetup = !this.firstSetup
             this.update()

package/frontend/core/index.js

@@ -5,6 +5,8 @@ export { default as UserDataManager } from './interface/UserDataManager'
 export { default as UserDataValidator } from './interface/UserDataValidator'
 export { default as CheckboxElement } from './interface/CheckboxElement'
 export { default as SelectElement } from './interface/SelectElement'
+export { default as InputElement } from './interface/InputElement'
+export { default as ModalViewer } from './interface/ModalViewer'
 
 // ERROR
 export * from './error/errors'

package/frontend/core/interface/InputElement.js

@@ -0,0 +1,87 @@
+import { api } from 'lwc'
+import { UserDataValidator, FltOverrideError } from 'fleetcor-lwc'
+
+/**
+ * @abstract
+ * @class InputElement
+ * @extends UserDataValidator
+ * @description This class is used to input form data
+ */
+export default class InputElement extends UserDataValidator {
+    error
+
+    @api regExp
+    @api placeholder
+    @api maxLength
+    @api minValue
+    @api maxValue
+
+    @api validate() {
+        this.error = !this.isValid()
+    }
+
+    @api isValid() {
+        let result = true
+        if (this.required) {
+            if (this.regExp && this.value && !new RegExp(this.regExp).test(this.value)) {
+                result = false
+            } else if (!this.value) {
+                result = false
+            }
+        }
+
+        if (
+            result &&
+            this.maxLength &&
+            this.value &&
+            this.value.length > parseInt(this.maxLength)
+        ) {
+            result = false
+        }
+
+        if (result && this.minValue) {
+            const numberValue = parseInt(this.value)
+            result = false
+            if (!isNaN(numberValue) && numberValue >= parseInt(this.minValue)) {
+                result = true
+            }
+        }
+
+        if (result && this.maxValue) {
+            const numberValue = parseInt(this.value)
+            result = false
+            if (!isNaN(numberValue) && numberValue <= parseInt(this.maxValue)) {
+                result = true
+            }
+        }
+
+        return result
+    }
+
+    @api getData(silent) {
+        return {
+            ...super.getData(silent),
+            regExp: this.regExp,
+            placeholder: this.placeholder,
+            maxLength: this.maxLength,
+            minValue: this.minValue,
+            maxValue: this.maxValue
+        }
+    }
+
+    handleInput(event) {
+        throw new FltOverrideError('handleInput')
+    }
+
+    handleChange(event) {
+        throw new FltOverrideError('handleChange')
+    }
+
+    handleFocused(event) {
+        throw new FltOverrideError('handleFocused')
+    }
+
+    handleBlur(event) {
+        throw new FltOverrideError('handleBlur')
+    }
+}

package/frontend/core/interface/ModalViewer.js

@@ -0,0 +1,26 @@
+import { createElement } from 'lwc'
+import Modal from 'flt/modal'
+
+/**
+ * @abstract
+ * @class ModalViewer
+ * @description This class is used to show and hide modal view
+ */
+export default class ModalViewer {
+    static showModalWithComponent(cmp) {
+        const appEl = createElement('flt-modal', { is: Modal })
+        document.body.appendChild(appEl)
+        document.body.style.overflow = 'hidden'
+        if (cmp) {
+            appEl.querySelector('.flt-modal__container').appendChild(cmp)
+        }
+    }
+
+    static hideModals() {
+        document.body.style.overflow = null
+        const items = document.body.querySelectorAll('flt-modal')
+        items.forEach((item) => {
+            item.remove()
+        })
+    }
+}

package/frontend/core/interface/UserDataManager.js

@@ -9,8 +9,18 @@ import { BaseElement, FltMissingAttributeError } from 'fleetcor-lwc'
  * @description This class used to manage user data
  */
 export default class UserDataManager extends BaseElement {
+    _value
+
     @api name
-    @api value
+    @api
+    get value() {
+        return this._value
+    }
+    set value(v) {
+        if (!this.disabled) {
+            this._value = v
+        }
+    }
     @api group
     @api disabled
     @api required

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "fleetcor-lwc",
-    "version": "3.0.0",
+    "version": "3.3.0",
     "description": "LWC framework by Fleetcor",
     "repository": {
         "type": "git",
@@ -28,6 +28,9 @@
             "flt/button",
             "flt/checkbox",
             "flt/icon",
+            "flt/inputText",
+            "flt/inputEmail",
+            "flt/modal",
             "flt/radioGroup",
             "flt/radioGroupIcon",
             "flt/tooltip",
@@ -43,7 +46,7 @@
         "test:unit": "sfdx-lwc-jest",
         "test:unit:watch": "sfdx-lwc-jest --watch",
         "test:unit:debug": "sfdx-lwc-jest --debug",
-        "test:unit:coverage": "sfdx-lwc-jest --coverage",
+        "test:unit:coverage": "sfdx-lwc-jest -- --clearCache && sfdx-lwc-jest --coverage",
         "prettier": "prettier --config .prettierrc --write ./"
     },
     "devDependencies": {
@@ -55,21 +58,23 @@
         "babel-loader": "^10.0.0",
         "css-loader": "^7.1.4",
         "d": "^1.0.1",
+        "google-libphonenumber": "^3.2.44",
         "html-loader": "^2.1.2",
         "html-webpack-plugin": "^5.3.2",
         "identity-obj-proxy": "^3.0.0",
         "lwc": "^9.0.2",
         "lwc-webpack-plugin": "^3.1.0",
+        "prettier": "^2.3.2",
+        "pug-html-loader": "^1.1.5",
+        "pug-loader": "^2.4.0",
         "resolve-url-loader": "^5.0.0",
         "sass": "^1.97.3",
-        "terser-webpack-plugin": "^5.3.16",
         "sass-loader": "^16.0.7",
         "style-loader": "^4.0.0",
-        "prettier": "^2.3.2",
-        "pug-html-loader": "^1.1.5",
-        "pug-loader": "^2.4.0",
+        "terser-webpack-plugin": "^5.3.16",
         "webpack": "^5.105.2",
         "webpack-cli": "^6.0.1",
-        "webpack-dev-server": "^5.2.3"
+        "webpack-dev-server": "^5.2.3",
+        "imask": "^7.6.1"
     }
 }