fleetcor-lwc 1.7.0 → 2.0.0

package/README.md

@@ -71,7 +71,7 @@ Icon:
 arrow-left | ev | carwash | car | van | unleaded | fuel | driver | vehicle |
 both | shared-card | ev-and-fuel | oil | key | blocked | multiple-users |
 arrow-right | diesel | hydrogen | signature | plus | plus-small | document |
-close |
+close | hgv
 ```
 
 ```html
@@ -134,11 +134,25 @@ $FLT_BUTTON_MEDIUM_FONT_SIZE: var(--flt-button-medium-font-size, 15px);
 
 $FLT_BUTTON_LARGE_HEIGHT: var(--flt-button-large-height, 56px);
 $FLT_BUTTON_LARGE_FONT_SIZE: var(--flt-button-large-font-size, 15px);
+
+$FLT_BUTTON_LABEL_PADDING: var(--flt-button-label-padding, 0);
+
 /* BUTTON END */
 ```
 
 ## Release Notes:
 
+- v.2.0.0
+  - Update core extendable components, changed import strategy
+  - Added UserDataManager class
+  - Added UserDataValidator class
+  - Added errors module
+  - Added CheckboxElement class
+  - Added hgv icon
+  - Added $FLT_BUTTON_LABEL_PADDING constant
+
+---
+
 - v.1.7.0
   - Updated Button component: Added `@api size` parameter
   - Small refactoring in all components

package/frontend/common/mixins_amber.scss

@@ -32,4 +32,7 @@ $FLT_BUTTON_MEDIUM_FONT_SIZE: var(--flt-button-medium-font-size, 15px);
 
 $FLT_BUTTON_LARGE_HEIGHT: var(--flt-button-large-height, 56px);
 $FLT_BUTTON_LARGE_FONT_SIZE: var(--flt-button-large-font-size, 15px);
+
+$FLT_BUTTON_LABEL_PADDING: var(--flt-button-label-padding, 0);
+
 // <- BUTTON

package/frontend/common/mixins_aquamarine.scss

@@ -32,4 +32,7 @@ $FLT_BUTTON_MEDIUM_FONT_SIZE: var(--flt-button-medium-font-size, 15px);
 
 $FLT_BUTTON_LARGE_HEIGHT: var(--flt-button-large-height, 56px);
 $FLT_BUTTON_LARGE_FONT_SIZE: var(--flt-button-large-font-size, 15px);
+
+$FLT_BUTTON_LABEL_PADDING: var(--flt-button-label-padding, 0);
+
 // <- BUTTON

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

@@ -1,11 +1,14 @@
 import { createElement } from 'lwc'
+
 import Button from 'flt/button'
+
 describe('flt-button', () => {
     afterEach(() => {
         while (document.body.firstChild) {
             document.body.removeChild(document.body.firstChild)
         }
     })
+
     it('Correct cssClass generated', () => {
         const buttonDefault = createElement('flt-button', { is: Button })
         buttonDefault.label = 'Default'

package/frontend/components/flt/button/button.html

@@ -1,7 +1,7 @@
 <template lwc:render-mode="light">
     <button class={cssClass} disabled={disabled}>
         <flt-icon class="flt-button__icon-left" if:true={iconLeft} icon={iconLeft}></flt-icon>
-        {label}
+        <span class="flt-button__label">{label}</span>
         <flt-icon class="flt-button__icon-right" if:true={iconRight} icon={iconRight}></flt-icon>
     </button>
 </template>

package/frontend/components/flt/button/button.js

@@ -1,19 +1,14 @@
 import './button.scss'
-import { api } from 'lwc'
-import BaseElement from 'ext/baseElement'
 
-const TYPES = {
-    primary: 'primary',
-    base: 'base',
-    link: 'link'
-}
+import { api } from 'lwc'
 
-const SIZES = {
-    small: 'small',
-    medium: 'medium',
-    large: 'large'
-}
+import { BaseElement } from 'fleetcor-lwc'
 
+/**
+ * @class Button
+ * @extends BaseElement
+ * @description Flt button component
+ */
 export default class Button extends BaseElement {
     @api type
     @api size
@@ -33,3 +28,15 @@ export default class Button extends BaseElement {
         })
     }
 }
+
+const SIZES = {
+    small: 'small',
+    medium: 'medium',
+    large: 'large'
+}
+
+const TYPES = {
+    primary: 'primary',
+    base: 'base',
+    link: 'link'
+}

package/frontend/components/flt/button/button.scss

@@ -137,4 +137,8 @@ button {
         margin-left: 1rem;
         margin-right: initial;
     }
+
+    &__label {
+        padding: $FLT_BUTTON_LABEL_PADDING;
+    }
 }

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

@@ -1,4 +1,5 @@
 import { createElement } from 'lwc'
+
 import Icon from 'flt/icon'
 
 describe('flt-icon', () => {
@@ -9,21 +10,18 @@ describe('flt-icon', () => {
         }
     })
 
-    it('displays greeting', () => {
-        // Create element
-        const element_1 = createElement('flt-icon', {
-            is: Icon
-        })
-        element_1.icon = 'arrow-right'
-        document.body.appendChild(element_1)
+    it('Icons correctly displayed', () => {
+        jest.spyOn(console, 'error').mockImplementation()
+
+        const iconArrowRight = createElement('flt-icon', { is: Icon })
+        iconArrowRight.icon = 'arrow-right'
+        document.body.appendChild(iconArrowRight)
 
-        expect(element_1.firstChild.classList.contains('flt-icon__arrow-right')).toBeTruthy()
+        expect(iconArrowRight.firstChild.classList.contains('flt-icon__arrow-right')).toBeTruthy()
 
-        const element_2 = createElement('flt-icon', {
-            is: Icon
-        })
-        document.body.appendChild(element_2)
+        const iconEmpty = createElement('flt-icon', { is: Icon })
+        document.body.appendChild(iconEmpty)
 
-        expect(element_2.firstChild).toBe(null)
+        expect(iconEmpty.firstChild).toBe(null)
     })
 })

package/frontend/components/flt/icon/icon.js

@@ -1,33 +1,54 @@
 import './icon.scss'
 
 import { api } from 'lwc'
-import LightningDomElement from 'ext/lightningDomElement'
 
-import TMPL_EMPTY from './tmpl-empty.html'
-import TMPL_ARROW_RIGHT from './tmpl-arrow-right.html'
-import TMPL_ARROW_LEFT from './tmpl-arrow-left.html'
-import TMPL_EV from './tmpl-ev.html'
-import TMPL_CAR from './tmpl-car.html'
-import TMPL_CARWASH from './tmpl-carwash.html'
-import TMPL_VAN from './tmpl-van.html'
-import TMPL_UNLIDEAD from './tmpl-unleaded.html'
-import TMPL_FUEL from './tmpl-fuel.html'
-import TMPL_DRIVER from './tmpl-driver.html'
-import TMPL_VEHICLE from './tmpl-vehicle.html'
-import TMPL_BOTH from './tmpl-both.html'
-import TMPL_SHARED_CARD from './tmpl-shared-card.html'
-import TMPL_EV_AND_FUEL from './tmpl-ev-and-fuel.html'
-import TMPL_OIL from './tmpl-oil.html'
-import TMPL_KEY from './tmpl-key.html'
-import TMPL_BLOCKED from './tmpl-blocked.html'
-import TMPL_MULTIPLE_USERS from './tmpl-multiple-users.html'
-import TMPL_DIESEL from './tmpl-diesel.html'
-import TMPL_HYDROGEN from './tmpl-hydrogen.html'
-import TMPL_SIGNATURE from './tmpl-signature.html'
-import TMPL_PLUS from './tmpl-plus.html'
-import TMPL_SMALL_PLUS from './tmpl-small-plus.html'
-import TMPL_DOCUMENT from './tmpl-document.html'
-import TMPL_CLOSE from './tmpl-close.html'
+import { LightningDomElement } from 'fleetcor-lwc'
+
+import TMPL_EMPTY from './icons/tmpl-empty.html'
+import TMPL_ARROW_RIGHT from './icons/tmpl-arrow-right.html'
+import TMPL_ARROW_LEFT from './icons/tmpl-arrow-left.html'
+import TMPL_EV from './icons/tmpl-ev.html'
+import TMPL_CAR from './icons/tmpl-car.html'
+import TMPL_CARWASH from './icons/tmpl-carwash.html'
+import TMPL_VAN from './icons/tmpl-van.html'
+import TMPL_UNLIDEAD from './icons/tmpl-unleaded.html'
+import TMPL_FUEL from './icons/tmpl-fuel.html'
+import TMPL_DRIVER from './icons/tmpl-driver.html'
+import TMPL_VEHICLE from './icons/tmpl-vehicle.html'
+import TMPL_BOTH from './icons/tmpl-both.html'
+import TMPL_SHARED_CARD from './icons/tmpl-shared-card.html'
+import TMPL_EV_AND_FUEL from './icons/tmpl-ev-and-fuel.html'
+import TMPL_OIL from './icons/tmpl-oil.html'
+import TMPL_KEY from './icons/tmpl-key.html'
+import TMPL_BLOCKED from './icons/tmpl-blocked.html'
+import TMPL_MULTIPLE_USERS from './icons/tmpl-multiple-users.html'
+import TMPL_DIESEL from './icons/tmpl-diesel.html'
+import TMPL_HYDROGEN from './icons/tmpl-hydrogen.html'
+import TMPL_SIGNATURE from './icons/tmpl-signature.html'
+import TMPL_PLUS from './icons/tmpl-plus.html'
+import TMPL_SMALL_PLUS from './icons/tmpl-small-plus.html'
+import TMPL_DOCUMENT from './icons/tmpl-document.html'
+import TMPL_CLOSE from './icons/tmpl-close.html'
+import TMPL_HGV from './icons/tmpl-hgv.html'
+
+/**
+ * @class Icon
+ * @extends LightningDomElement
+ * @description Flt icon component
+ */
+export default class Icon extends LightningDomElement {
+    @api icon
+
+    connectedCallback() {
+        if (!ICONS[this.icon]) {
+            console.error(`FltError: Icon '${this.icon}' is not available!`)
+        }
+    }
+
+    render() {
+        return ICONS[this.icon] || TMPL_EMPTY
+    }
+}
 
 const ICONS = {
     plus: TMPL_PLUS,
@@ -53,19 +74,6 @@ const ICONS = {
     blocked: TMPL_BLOCKED,
     'arrow-left': TMPL_ARROW_LEFT,
     'multiple-users': TMPL_MULTIPLE_USERS,
-    'arrow-right': TMPL_ARROW_RIGHT
-}
-
-export default class Icon extends LightningDomElement {
-    @api icon
-
-    connectedCallback() {
-        if (!ICONS[this.icon]) {
-            console.error(`Error! Icon = '${this.icon}' is not available!`)
-        }
-    }
-
-    render() {
-        return ICONS[this.icon] || TMPL_EMPTY
-    }
+    'arrow-right': TMPL_ARROW_RIGHT,
+    hgv: TMPL_HGV,
 }

package/frontend/components/flt/icon/icon.scss

@@ -1,4 +1,4 @@
-@import './../../../common/mixins_aquamarine';
+@import '../../../common/mixins_aquamarine';
 /* mixins */
 
 .flt-icon {

package/frontend/components/flt/icon/{tmpl-both.html → icons/tmpl-both.html}

@@ -1,5 +1,11 @@
 <template lwc:render-mode="light">
-    <svg class="flt-icon flt-icon__both" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg
+        class="flt-icon flt-icon__both"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg">
         <path
             d="M13.5 5C13.5 7.20914 11.7091 9 9.5 9C7.29086 9 5.5 7.20914 5.5 5C5.5 2.79086 7.29086 1 9.5 1C11.7091 1 13.5 2.79086 13.5 5Z"
             class="flt-icon__path"

package/frontend/components/flt/icon/icons/tmpl-fuel.html

@@ -0,0 +1,35 @@
+<template lwc:render-mode="light">
+    <svg
+        class="flt-icon flt-icon__fuel"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M15.3479 9.6087V7.69565L12.9566 5.30435L12 6.26087L9.13047 3.3913C8.4609 2.72174 7.40873 2.19565 6.50003 2.05217L2.43481 1V2.91304L5.78264 4.34783C6.45221 4.58696 7.21742 5.30435 7.69568 5.78261L10.087 8.17391L8.17394 10.087L9.13047 11.0435L8.31742 13.6739C8.03047 14.2957 8.17394 14.8696 8.65221 15.3478L14.8696 21.5652L21.087 15.3478L15.3479 9.6087Z"
+            class="flt-icon__path"
+            stroke-miterlimit="10"
+            stroke-linejoin="round"></path>
+        <path
+            d="M16.3042 20.1308L18.2172 22.0438L22.0433 18.2177L20.1303 16.3047"
+            class="flt-icon__path"
+            stroke-miterlimit="10"
+            stroke-linejoin="round"></path>
+        <path
+            d="M21.5652 18.6953L23 20.1301"
+            class="flt-icon__path"
+            stroke-miterlimit="10"
+            stroke-linejoin="round"></path>
+        <path
+            d="M20.1303 22.9992L18.6956 21.5645"
+            class="flt-icon__path"
+            stroke-miterlimit="10"
+            stroke-linejoin="round"></path>
+        <path
+            d="M2.91304 5.30469C2.62609 6.30904 1 7.69599 1 9.13077C1 10.0873 1.86087 11.0438 2.91304 11.0438C3.96522 11.0438 4.82609 10.0873 4.82609 9.13077C4.82609 7.69599 3.2 6.30904 2.91304 5.30469Z"
+            class="flt-icon__path"
+            stroke-miterlimit="10"
+            stroke-linejoin="round"></path>
+    </svg>
+</template>

package/frontend/components/flt/icon/icons/tmpl-hgv.html

@@ -0,0 +1,13 @@
+<template lwc:render-mode="light">
+    <svg
+        class="flt-icon flt-icon__arrow-left"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg">
+        <path
+            class="flt-icon__path-fill"
+            d="M23.5758 11.8139L20.5758 6.56391C20.5429 6.50655 20.4955 6.45888 20.4383 6.42571C20.3811 6.39255 20.3161 6.37505 20.25 6.375H16.125C16.0255 6.375 15.9302 6.41451 15.8598 6.48483C15.7895 6.55516 15.75 6.65054 15.75 6.75V13.875H15.375V9.75C15.375 9.65054 15.3355 9.55516 15.2652 9.48484C15.1948 9.41451 15.0995 9.375 15 9.375H13.125V5.25C13.125 5.15054 13.0855 5.05516 13.0152 4.98484C12.9448 4.91451 12.8495 4.875 12.75 4.875H3.75C3.65054 4.875 3.55516 4.91451 3.48484 4.98484C3.41451 5.05516 3.375 5.15054 3.375 5.25V9.375H1.5C1.40054 9.375 1.30516 9.41451 1.23483 9.48484C1.16451 9.55516 1.125 9.65054 1.125 9.75V13.875H0.75C0.650544 13.875 0.555161 13.9145 0.484835 13.9848C0.414509 14.0552 0.375 14.1505 0.375 14.25V16.3125C0.375385 16.6605 0.513789 16.9941 0.759847 17.2402C1.00591 17.4862 1.33952 17.6246 1.6875 17.625H2.28188C2.37041 18.1492 2.64176 18.6252 3.0478 18.9684C3.45385 19.3116 3.96833 19.5 4.5 19.5C5.03167 19.5 5.54615 19.3116 5.9522 18.9684C6.35824 18.6252 6.62959 18.1492 6.71813 17.625H7.53187C7.62041 18.1492 7.89176 18.6252 8.2978 18.9684C8.70385 19.3116 9.21833 19.5 9.75 19.5C10.2817 19.5 10.7962 19.3116 11.2022 18.9684C11.6082 18.6252 11.8796 18.1492 11.9681 17.625H16.9069C16.9954 18.1492 17.2668 18.6252 17.6728 18.9684C18.0788 19.3116 18.5933 19.5 19.125 19.5C19.6567 19.5 20.1712 19.3116 20.5772 18.9684C20.9832 18.6252 21.2546 18.1492 21.3431 17.625H22.3125C22.6605 17.6246 22.9941 17.4862 23.2402 17.2402C23.4862 16.9941 23.6246 16.6605 23.625 16.3125V12C23.625 11.9347 23.6081 11.8706 23.5758 11.8139ZM13.5 10.125C13.5995 10.125 13.5708 10.125 13.707 10.125C13.8169 10.125 13.7652 10.125 13.875 10.125L14.625 10.125V13.875H10.875V10.125H11.625C11.6992 10.125 11.6597 10.125 11.7695 10.125C11.8598 10.1308 11.9005 10.125 12 10.125H13.5ZM13.125 10.125V9.375L12.375 9.375V10.125H13.125ZM10.125 5.625H10.875V4.875H10.125V5.625ZM8.625 5.625H9.375C9.46484 5.625 9.46048 5.625 9.57031 5.625C9.83548 5.625 9.65054 5.625 9.75 5.625H11.25C11.3495 5.625 11.3325 5.625 11.4258 5.625C11.5356 5.625 11.5152 5.625 11.625 5.625L12.375 5.625V9.375L8.625 9.375V5.625ZM7.5 10.125H9C9.09946 10.125 9.18488 10.125 9.22631 10.125C9.26775 10.125 9.35411 10.125 9.375 10.125L10.125 10.125V13.875H6.375V10.125H7.125C7.20703 10.125 7.12454 10.125 7.23438 10.125C7.34421 10.125 7.40054 10.125 7.5 10.125ZM8.625 10.125V9.375L7.875 9.375V10.125H8.625ZM5.625 5.625H6.375V4.875H5.625V5.625ZM4.125 5.625H4.875C4.92969 5.625 4.93313 5.625 5.04297 5.625C5.13235 5.625 5.15054 5.625 5.25 5.625H6.75C6.84946 5.625 6.86765 5.625 6.95703 5.625C7.06687 5.625 7.01517 5.625 7.125 5.625L7.875 5.625V9.375L4.125 9.375V5.625ZM3.375 10.125H4.125V9.375H3.375V10.125ZM1.875 10.125H2.625C2.69141 10.125 2.6597 10.125 2.76953 10.125C2.87539 10.1318 2.90054 10.125 3 10.125H4.5C4.59946 10.125 4.61048 10.1315 4.71094 10.125C4.82077 10.125 4.76517 10.125 4.875 10.125L5.625 10.125V13.875H1.875V10.125ZM4.5 18.75C4.20333 18.75 3.91332 18.662 3.66665 18.4972C3.41997 18.3324 3.22771 18.0981 3.11418 17.824C3.00065 17.5499 2.97094 17.2483 3.02882 16.9574C3.0867 16.6664 3.22956 16.3991 3.43934 16.1893C3.64912 15.9796 3.91639 15.8367 4.20736 15.7788C4.49834 15.7209 4.79994 15.7507 5.07403 15.8642C5.34811 15.9777 5.58238 16.17 5.7472 16.4166C5.91203 16.6633 6 16.9533 6 17.25C5.99955 17.6477 5.84137 18.029 5.56017 18.3102C5.27896 18.5914 4.89769 18.7496 4.5 18.75ZM9.75 18.75C9.45333 18.75 9.16332 18.662 8.91665 18.4972C8.66997 18.3324 8.47771 18.0981 8.36418 17.824C8.25065 17.5499 8.22094 17.2483 8.27882 16.9574C8.3367 16.6664 8.47956 16.3991 8.68934 16.1893C8.89912 15.9796 9.16639 15.8367 9.45737 15.7788C9.74834 15.7209 10.0499 15.7507 10.324 15.8642C10.5981 15.9777 10.8324 16.17 10.9972 16.4166C11.162 16.6633 11.25 16.9533 11.25 17.25C11.2496 17.6477 11.0914 18.029 10.8102 18.3102C10.529 18.5914 10.1477 18.7496 9.75 18.75ZM15.75 16.875H11.9681C11.8796 16.3508 11.6082 15.8748 11.2022 15.5316C10.7962 15.1884 10.2817 15.0001 9.75 15.0001C9.21833 15.0001 8.70385 15.1884 8.2978 15.5316C7.89176 15.8748 7.62041 16.3508 7.53187 16.875H6.71813C6.62959 16.3508 6.35824 15.8748 5.9522 15.5316C5.54615 15.1884 5.03167 15.0001 4.5 15.0001C3.96833 15.0001 3.45385 15.1884 3.0478 15.5316C2.64176 15.8748 2.37041 16.3508 2.28188 16.875H1.6875C1.53835 16.8749 1.39535 16.8156 1.28989 16.7101C1.18443 16.6046 1.12512 16.4616 1.125 16.3125V14.625H15.75V16.875ZM20.6752 8.25L22.6036 11.625H18V8.25H20.6752ZM19.125 18.75C18.8283 18.75 18.5383 18.662 18.2916 18.4972C18.045 18.3324 17.8527 18.0981 17.7392 17.824C17.6257 17.5499 17.5959 17.2483 17.6538 16.9574C17.7117 16.6664 17.8546 16.3991 18.0643 16.1893C18.2741 15.9796 18.5414 15.8367 18.8324 15.7788C19.1233 15.7209 19.4249 15.7507 19.699 15.8642C19.9731 15.9777 20.2074 16.17 20.3722 16.4166C20.537 16.6633 20.625 16.9533 20.625 17.25C20.6246 17.6477 20.4664 18.029 20.1852 18.3102C19.904 18.5914 19.5227 18.7496 19.125 18.75ZM22.875 14.25L23.6152 14.25C23.5157 14.25 23.4203 14.2105 23.35 14.1402C23.2797 14.0698 23.2402 13.9745 23.2402 13.875C23.2402 13.7755 23.2797 13.6802 23.35 13.6098C23.4203 13.5395 23.5157 13.5 23.6152 13.5L22.875 13.5V14.25ZM22.875 12.75L23.6152 12.75C23.3168 12.75 23.086 12.539 22.875 12.75C22.875 13.3255 22.875 13.5766 22.875 13.875C22.875 14.1734 22.875 14.3925 22.875 15C23.086 15.211 23.3168 15 23.6152 15L22.875 15V16.3125C22.8749 16.4616 22.8156 16.6046 22.7101 16.7101C22.6046 16.8156 22.4616 16.8749 22.3125 16.875H21.3431C21.2546 16.3508 20.9832 15.8748 20.5772 15.5316C20.1712 15.1884 19.6567 15.0001 19.125 15.0001C18.5933 15.0001 18.0788 15.1884 17.6728 15.5316C17.2668 15.8748 16.9954 16.3508 16.9069 16.875H16.5V7.125H20.0325L20.2467 7.5H17.625C17.5255 7.5 17.4302 7.53951 17.3598 7.60983C17.2895 7.68016 17.25 7.77554 17.25 7.875V12C17.25 12.0995 17.2895 12.1948 17.3598 12.2652C17.4302 12.3355 17.5255 12.375 17.625 12.375H22.875V12.75Z"></path>
+    </svg>
+</template>

package/frontend/components/flt/icon/{tmpl-multiple-users.html → icons/tmpl-multiple-users.html}

@@ -1,5 +1,11 @@
 <template lwc:render-mode="light">
-    <svg class="flt-icon flt-icon__multiple-users" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg
+        class="flt-icon flt-icon__multiple-users"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg">
         <path
             d="M17 20V18C17 17.3438 16.8736 16.717 16.6438 16.1429M22 20V18C22 16.3431 20.6569 15 19 15C18.0444 15 17.1931 15.4468 16.6438 16.1429M16.6438 16.1429C15.9065 14.301 14.1052 13 12 13C9.89482 13 8.0935 14.301 7.35625 16.1429M7 20V18C7 17.3438 7.12642 16.717 7.35625 16.1429M2 20V18C2 16.3431 3.34315 15 5 15C5.95561 15 6.80686 15.4468 7.35625 16.1429M15 7C15 8.65685 13.6569 10 12 10C10.3431 10 9 8.65685 9 7C9 5.34315 10.3431 4 12 4C13.6569 4 15 5.34315 15 7ZM21 10C21 11.1046 20.1046 12 19 12C17.8954 12 17 11.1046 17 10C17 8.89543 17.8954 8 19 8C20.1046 8 21 8.89543 21 10ZM7 10C7 11.1046 6.10457 12 5 12C3.89543 12 3 11.1046 3 10C3 8.89543 3.89543 8 5 8C6.10457 8 7 8.89543 7 10Z"
             class="flt-icon__path"

package/frontend/components/flt/icon/{tmpl-van.html → icons/tmpl-van.html}

@@ -12,8 +12,7 @@
         </mask>
         <path
             class="flt-icon__path-fill"
-            d="M15.5676 14.1954H0.973006C0.88699 14.1954 0.804497 14.1623 0.743674 14.1033C0.682851 14.0443 0.648682 13.9643 0.648682 13.8809C0.648682 13.7975 0.682851 13.7175 0.743674 13.6585C0.804497 13.5995 0.88699 13.5664 0.973006 13.5664H15.5676C15.6536 13.5664 15.7361 13.5995 15.7969 13.6585C15.8578 13.7175 15.8919 13.7975 15.8919 13.8809C15.8919 13.9643 15.8578 14.0443 15.7969 14.1033C15.7361 14.1623 15.6536 14.1954 15.5676 14.1954Z"
-           ></path>
+            d="M15.5676 14.1954H0.973006C0.88699 14.1954 0.804497 14.1623 0.743674 14.1033C0.682851 14.0443 0.648682 13.9643 0.648682 13.8809C0.648682 13.7975 0.682851 13.7175 0.743674 13.6585C0.804497 13.5995 0.88699 13.5664 0.973006 13.5664H15.5676C15.6536 13.5664 15.7361 13.5995 15.7969 13.6585C15.8578 13.7175 15.8919 13.7975 15.8919 13.8809C15.8919 13.9643 15.8578 14.0443 15.7969 14.1033C15.7361 14.1623 15.6536 14.1954 15.5676 14.1954Z"></path>
         <path
             d="M0.648682 13.8809H-0.351318H0.648682ZM15.5676 13.1954H0.973006V15.1954H15.5676V13.1954ZM0.973006 13.1954C1.14245 13.1954 1.31091 13.2604 1.43982 13.3854L0.0475276 14.8212C0.298085 15.0642 0.631534 15.1954 0.973006 15.1954V13.1954ZM1.43982 13.3854C1.56978 13.5114 1.64868 13.689 1.64868 13.8809H-0.351318C-0.351318 14.2396 -0.204075 14.5772 0.0475276 14.8212L1.43982 13.3854ZM1.64868 13.8809C1.64868 14.0728 1.56978 14.2504 1.43982 14.3764L0.0475276 12.9406C-0.204075 13.1846 -0.351318 13.5222 -0.351318 13.8809H1.64868ZM1.43982 14.3764C1.31091 14.5014 1.14245 14.5664 0.973006 14.5664V12.5664C0.631534 12.5664 0.298085 12.6977 0.0475276 12.9406L1.43982 14.3764ZM0.973006 14.5664H15.5676V12.5664H0.973006V14.5664ZM15.5676 14.5664C15.3982 14.5664 15.2297 14.5014 15.1008 14.3764L16.4931 12.9406C16.2425 12.6977 15.9091 12.5664 15.5676 12.5664V14.5664ZM15.1008 14.3764C14.9708 14.2504 14.8919 14.0728 14.8919 13.8809H16.8919C16.8919 13.5222 16.7447 13.1846 16.4931 12.9406L15.1008 14.3764ZM14.8919 13.8809C14.8919 13.689 14.9708 13.5114 15.1008 13.3854L16.4931 14.8212C16.7447 14.5772 16.8919 14.2396 16.8919 13.8809H14.8919ZM15.1008 13.3854C15.2297 13.2604 15.3982 13.1954 15.5676 13.1954V15.1954C15.9091 15.1954 16.2425 15.0642 16.4931 14.8212L15.1008 13.3854Z"
             class="flt-icon__path-fill"

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

@@ -1,4 +1,5 @@
 import { createElement } from 'lwc'
+
 import Tooltip from 'flt/tooltip'
 
 describe('flt-tooltip', () => {
@@ -22,4 +23,43 @@ describe('flt-tooltip', () => {
         expect(contentContainerElement.classList).not.toContain('flt-tooltip__content_visible')
         expect(contentTextElement.textContent).toBe('Welcome to tooltip world')
     })
+
+    it('Display when mouse over', function () {
+        const tooltipElement = createElement('flt-tooltip', { is: Tooltip })
+        tooltipElement.content = 'Mouse over me'
+        document.body.appendChild(tooltipElement)
+
+        const tooltipWrapperElement = document.querySelector('.flt-tooltip')
+
+        expect(tooltipWrapperElement).toBeDefined()
+
+        tooltipWrapperElement.dispatchEvent(new MouseEvent('mouseover'))
+        document.body.appendChild(tooltipElement)
+
+        const contentContainerElement = document.querySelector('.flt-tooltip__content')
+
+        expect(contentContainerElement).toBeDefined()
+        expect(contentContainerElement.classList).toContain('flt-tooltip__content')
+        expect(contentContainerElement.classList).toContain('flt-tooltip__content_visible')
+    })
+
+    it('Hide when mouse out', function () {
+        const tooltipElement = createElement('flt-tooltip', { is: Tooltip })
+        tooltipElement.content = 'Mouse out of me'
+        document.body.appendChild(tooltipElement)
+
+        const tooltipWrapperElement = document.querySelector('.flt-tooltip')
+
+        expect(tooltipWrapperElement).toBeDefined()
+
+        tooltipWrapperElement.dispatchEvent(new MouseEvent('mouseover'))
+        tooltipWrapperElement.dispatchEvent(new MouseEvent('mouseout'))
+        document.body.appendChild(tooltipElement)
+
+        const contentContainerElement = document.querySelector('.flt-tooltip__content')
+
+        expect(contentContainerElement).toBeDefined()
+        expect(contentContainerElement.classList).toContain('flt-tooltip__content')
+        expect(contentContainerElement.classList).not.toContain('flt-tooltip__content_visible')
+    })
 })

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

@@ -1,10 +1,15 @@
 import './tooltip.scss'
+
 import { api } from 'lwc'
-import BaseElement from 'ext/baseElement'
 
-export default class Tooltip extends BaseElement {
-    static renderMode = 'light'
+import { BaseElement } from 'fleetcor-lwc'
 
+/**
+ * @class Tooltip
+ * @extends BaseElement
+ * @description Flt tooltip component
+ */
+export default class Tooltip extends BaseElement {
     @api content
     @api corner = 0
 

package/frontend/core/error/errors.js

@@ -0,0 +1,23 @@
+/**
+ * @class FltOverrideError
+ * @extends Error
+ * @description This error is thrown when a method is required to be overridden
+ */
+export class FltOverrideError extends Error {
+    constructor(target) {
+        super(`Override required '${target}'`)
+        this.name = 'FltOverrideError'
+    }
+}
+
+/**
+ * @class FltMissingAttributeError
+ * @extends Error
+ * @description This error is thrown when a required attribute is missing
+ */
+export class FltMissingAttributeError extends Error {
+    constructor(target) {
+        super(`Missing attribute '${target}'`)
+        this.name = 'FltMissingAttributeError'
+    }
+}

package/frontend/core/index.js

@@ -0,0 +1,9 @@
+// CORE
+export { default as LightningDomElement } from './interface/LightningDomElement'
+export { default as BaseElement } from './interface/BaseElement'
+export { default as UserDataManager } from './interface/UserDataManager'
+export { default as UserDataValidator } from './interface/UserDataValidator'
+export { default as CheckboxElement } from './interface/CheckboxElement'
+
+// ERROR
+export * from './error/errors'

package/frontend/{components/ext/baseElement/baseElement.js → core/interface/BaseElement.js}

@@ -1,5 +1,11 @@
-import LightningDomElement from 'ext/lightningDomElement'
+import { LightningDomElement } from 'fleetcor-lwc'
 
+/**
+ * @abstract
+ * @class BaseElement
+ * @extends LightningDomElement
+ * @description This class is used to contain common functionality for all components
+ */
 export default class BaseElement extends LightningDomElement {
     generateClassNameList(config) {
         return Object.keys(config)

package/frontend/core/interface/CheckboxElement.js

@@ -0,0 +1,9 @@
+import { UserDataValidator } from 'fleetcor-lwc'
+
+/**
+ * @abstract
+ * @class CheckboxElement
+ * @extends UserDataValidator
+ * @description This class is used to mark a component as a checkbox element
+ */
+export default class CheckboxElement extends UserDataValidator {}

package/frontend/core/interface/LightningDomElement.js

@@ -0,0 +1,20 @@
+import { LightningElement } from 'lwc'
+
+const RENDER_MODES = {
+    light: 'light'
+}
+
+/**
+ * @abstract
+ * @class LightningDomElement
+ * @extends LightningElement
+ * @description This class is used to extend the LightningElement class and set the renderMode to light
+ *
+ * @example
+ * import { LightningDomElement } from 'fleetcor-lwc'
+ *
+ * export default class MyComponent extends LightningDomElement { }
+ */
+export default class LightningDomElement extends LightningElement {
+    static renderMode = RENDER_MODES.light
+}

package/frontend/core/interface/UserDataManager.js

@@ -0,0 +1,31 @@
+import { api } from 'lwc'
+
+import { BaseElement, FltMissingAttributeError } from 'fleetcor-lwc'
+
+/**
+ * @abstract
+ * @class UserDataManager
+ * @extends BaseElement
+ * @description This class used to manage user data
+ */
+export default class UserDataManager extends BaseElement {
+    @api name
+    @api value
+    @api group
+
+    @api getData() {
+        return {
+            name: this.name,
+            value: this.value,
+            group: this.group
+        }
+    }
+
+    renderedCallback() {
+        if (!this.name) {
+            throw new FltMissingAttributeError('name')
+        }
+        this.setAttribute('user-data-handleable', true)
+        this.group && this.setAttribute('user-data-group', this.group)
+    }
+}

package/frontend/core/interface/UserDataValidator.js

@@ -0,0 +1,27 @@
+import { api } from 'lwc'
+
+import { UserDataManager, FltOverrideError } from 'fleetcor-lwc'
+
+/**
+ * @abstract
+ * @class UserDataValidator
+ * @extends UserDataManager
+ * @description This class is used to validate user data
+ */
+export default class UserDataValidator extends UserDataManager {
+    @api validate() {
+        throw new FltOverrideError('validate()')
+    }
+
+    @api isValid() {
+        throw new FltOverrideError('isValid()')
+    }
+
+    @api getData(silent) {
+        silent || this.validate()
+        return {
+            ...super.getData(),
+            isValid: this.isValid()
+        }
+    }
+}

package/package.json

@@ -1,71 +1,73 @@
 {
-  "name": "fleetcor-lwc",
-  "version": "1.7.0",
-  "description": "LWC framework by Fleetcor",
-  "repository": {
-    "type": "git",
-    "url": "https://git.fleetcor.com/Aleksandr.Zanko/fleetcor-lwc.git"
-  },
-  "author": "Fleetcor team",
-  "license": "ISC",
-  "files": [
-    "frontend/components/flt",
-    "frontend/components/ext",
-    "frontend/common",
-    "loader"
-  ],
-  "lwc": {
-    "modules": [
-      {
-        "dir": "frontend/components"
-      }
+    "name": "fleetcor-lwc",
+    "version": "2.0.0",
+    "description": "LWC framework by Fleetcor",
+    "repository": {
+        "type": "git",
+        "url": "https://git.fleetcor.com/Aleksandr.Zanko/fleetcor-lwc.git"
+    },
+    "author": "Fleetcor team",
+    "license": "ISC",
+    "exports": "./frontend/core/index.js",
+    "files": [
+        "loader",
+        "frontend/core",
+        "frontend/common",
+        "frontend/components/flt"
     ],
-    "expose": [
-      "ext/lightningDomElement",
-      "ext/baseElement",
-      "flt/button",
-      "flt/icon",
-      "flt/tooltip"
-    ]
-  },
-  "keywords": [
-    "lwc"
-  ],
-  "scripts": {
-    "watch": "webpack serve --open --port 8090",
-    "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",
-    "prettier": "prettier --config .prettierrc --write ./"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.15.0",
-    "@babel/plugin-proposal-optional-chaining": "^7.14.5",
-    "@babel/plugin-transform-runtime": "^7.15.0",
-    "@babel/preset-env": "^7.15.0",
-    "@salesforce/sfdx-lwc-jest": "^1.2.1",
-    "babel-loader": "^8.1.0",
-    "prettier": "^2.3.2",
-    "css-loader": "^6.2.0",
-    "html-loader": "^2.1.2",
-    "html-webpack-plugin": "^5.3.2",
-    "lwc": "^2.3.0",
-    "lwc-webpack-plugin": "^2.0.1",
-    "mini-css-extract-plugin": "^2.2.0",
-    "identity-obj-proxy": "^3.0.0",
-    "node-sass": "^7.0.1",
-    "postcss-loader": "^6.1.1",
-    "pug-html-loader": "^1.1.5",
-    "pug-loader": "^2.4.0",
-    "resolve-url-loader": "^4.0.0",
-    "sass": "^1.37.5",
-    "sass-loader": "^12.1.0",
-    "style-loader": "^3.2.1",
-    "webpack": "^5.48.0",
-    "webpack-cli": "^4.7.2",
-    "webpack-dev-server": "^3.11.2",
-    "d": "^1.0.1",
-    "loader-utils": "^2.0.0"
-  }
-}
+    "lwc": {
+        "modules": [
+            {
+                "dir": "frontend/components"
+            },
+            {
+                "dir": "frontend/core"
+            }
+        ],
+        "expose": [
+            "flt/button",
+            "flt/icon",
+            "flt/tooltip"
+        ]
+    },
+    "keywords": [
+        "lwc"
+    ],
+    "scripts": {
+        "watch": "webpack serve --open --port 8090",
+        "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",
+        "prettier": "prettier --config .prettierrc --write ./"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.15.0",
+        "@babel/plugin-proposal-optional-chaining": "^7.14.5",
+        "@babel/plugin-transform-runtime": "^7.15.0",
+        "@babel/preset-env": "^7.15.0",
+        "@salesforce/sfdx-lwc-jest": "^1.2.1",
+        "babel-loader": "^8.1.0",
+        "prettier": "^2.3.2",
+        "css-loader": "^6.2.0",
+        "html-loader": "^2.1.2",
+        "html-webpack-plugin": "^5.3.2",
+        "lwc": "^2.3.0",
+        "lwc-webpack-plugin": "^2.0.1",
+        "mini-css-extract-plugin": "^2.2.0",
+        "identity-obj-proxy": "^3.0.0",
+        "node-sass": "^7.0.1",
+        "postcss-loader": "^6.1.1",
+        "pug-html-loader": "^1.1.5",
+        "pug-loader": "^2.4.0",
+        "resolve-url-loader": "^4.0.0",
+        "sass": "^1.37.5",
+        "sass-loader": "^12.1.0",
+        "style-loader": "^3.2.1",
+        "webpack": "^5.48.0",
+        "webpack-cli": "^4.7.2",
+        "webpack-dev-server": "^3.11.2",
+        "d": "^1.0.1",
+        "loader-utils": "^2.0.0"
+    }
+}

package/frontend/components/ext/lightningDomElement/lightningDomElement.js

@@ -1,9 +0,0 @@
-import { LightningElement } from 'lwc';
-
-const RENDER_MODES = {
-    light: 'light'
-}
-
-export default class LightningDomElement extends LightningElement {
-    static renderMode = RENDER_MODES.light;
-}

package/frontend/components/flt/icon/tmpl-fuel.html

@@ -1,9 +0,0 @@
-<template lwc:render-mode="light">
-    <svg class="flt-icon flt-icon__fuel" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M15.3479 9.6087V7.69565L12.9566 5.30435L12 6.26087L9.13047 3.3913C8.4609 2.72174 7.40873 2.19565 6.50003 2.05217L2.43481 1V2.91304L5.78264 4.34783C6.45221 4.58696 7.21742 5.30435 7.69568 5.78261L10.087 8.17391L8.17394 10.087L9.13047 11.0435L8.31742 13.6739C8.03047 14.2957 8.17394 14.8696 8.65221 15.3478L14.8696 21.5652L21.087 15.3478L15.3479 9.6087Z" class="flt-icon__path" stroke-miterlimit="10" stroke-linejoin="round"></path>
-        <path d="M16.3042 20.1308L18.2172 22.0438L22.0433 18.2177L20.1303 16.3047" class="flt-icon__path" stroke-miterlimit="10" stroke-linejoin="round"></path>
-        <path d="M21.5652 18.6953L23 20.1301" class="flt-icon__path" stroke-miterlimit="10" stroke-linejoin="round"></path>
-        <path d="M20.1303 22.9992L18.6956 21.5645" class="flt-icon__path" stroke-miterlimit="10" stroke-linejoin="round"></path>
-        <path d="M2.91304 5.30469C2.62609 6.30904 1 7.69599 1 9.13077C1 10.0873 1.86087 11.0438 2.91304 11.0438C3.96522 11.0438 4.82609 10.0873 4.82609 9.13077C4.82609 7.69599 3.2 6.30904 2.91304 5.30469Z" class="flt-icon__path" stroke-miterlimit="10" stroke-linejoin="round"></path>
-    </svg>
-</template>