fleetcor-lwc 3.19.0 → 3.20.2

package/README.md

@@ -220,6 +220,82 @@ Add / update `lwc.config.json` file in your project
 
 ---
 
+### Btn
+
+```html
+<flt-btn icon-left="arrow-next" icon-right="arrow-back" disabled label="Next">
+  <!-- Any html element -->
+</flt-btn>
+```
+
+<details>
+<summary>Details</summary>
+
+#### Btn variables
+
+| @api variables | type   | values            | required | description                     |
+| -------------- | ------ | ----------------- | -------- | ------------------------------- |
+| icon-left      | string | `arrow-next, ...` | -        | any value from `Icon` component |
+| icon-right     | string | `arrow-back, ...` | -        | any value from `Icon` component |
+| label          | string |                   | -        |                                 |
+| disabled       | bool   |                   | -        |                                 |
+
+#### Btn slot
+
+| slot      | description                                    |
+| --------- | ---------------------------------------------- |
+| default   | any html element can be there                  |
+| iconLeft  | any html element can override left icon place  |
+| iconRight | any html element can override right icon place |
+
+#### Btn Css
+
+```css
+/* this is aquamarine variables */
+
+:root {
+  /* btn */
+  --flt-btn-fw: 700;
+  --flt-btn-border-radius: 32px;
+  --flt-btn-border: 1px solid #3782c8;
+  --flt-btn-padding: 0 24px;
+  --flt-btn-gap: 16px;
+  --flt-btn-color: #f9fafb;
+  --flt-btn-bg-color: #3782c8;
+  --flt-btn-box-shadow: none;
+  --flt-btn-transition: all 0.3s;
+  --flt-btn-height: 52px;
+  --flt-btn-font-size: 14px;
+  --flt-btn-text-transform: initial;
+  /* btn hover */
+  --flt-btn-hover-color: #f9fafb;
+  --flt-btn-hover-bg-color: #3782c8;
+  --flt-btn-hover-border: 1px solid #3782c8;
+  --flt-btn-hover-box-shadow: 0 4px 6px -1px rgba(16, 24, 40, 0.1), 0 2px
+      4px -2px rgba(16, 24, 40, 0.1);
+  /* btn disabled */
+  --flt-btn-disabled-color: #6b7280;
+  --flt-btn-disabled-bg-color: #f3f4f6;
+  --flt-btn-disabled-border: 1px solid #f3f4f6;
+  --flt-btndisabled-border-box-shadow: none;
+  /* btn disabled hover */
+  --flt-btn-disabled-hover-color: #6b7280;
+  --flt-btn-disabled-hover-bg-color: #f3f4f6;
+  --flt-btn-disabled-hover-border: 1px solid #f3f4f6;
+  --flt-btn-disabled-hover-box-shadow: none;
+  /* btn label */
+  --flt-btn-label-padding: 0;
+  --flt-btn-label-display: flex;
+  --flt-btn-label-align-items: center;
+  --flt-btn-label-justify-content: center;
+  --flt-btn-label-gap: 16px;
+}
+```
+
+</details>
+
+---
+
 ### Icon
 
 ```html
@@ -385,6 +461,34 @@ Add / update `lwc.config.json` file in your project
 | title   | any html element can be there instead of title   |
 | content | any html element can be there instead of content |
 
+#### Alert Info Css
+
+```css
+/* this is aquamarine variables */
+
+:root {
+  /* alert info */
+  --flt-alert-info-padding: 16px;
+  --flt-alert-info-border-radius: 8px;
+  --flt-alert-info-border: initial;
+  --flt-alert-info-gap: 16px;
+  --flt-alert-info-background: #d6e7fc;
+
+  /* alert info title */
+  --flt-alert-info-title-font-size: 16px;
+  --flt-alert-info-title-line-height: 24px;
+  --flt-alert-info-title-margin-bottom: 8px;
+  --flt-alert-info-title-font-weight: 700;
+  --flt-alert-info-title-color: #1a1a1a;
+
+  /* alert info content */
+  --flt-alert-info-content-font-size: 12px;
+  --flt-alert-info-content-line-height: 16px;
+  --flt-alert-info-content-font-weight: 400;
+  --flt-alert-info-content-color: #1a1a1a;
+}
+```
+
 </details>
 
 ---
@@ -747,6 +851,39 @@ This component fully extends from `Input Text`
 
 </details>
 
+#### Collapsible Section Css
+
+```css
+/* this is aquamarine variables */
+
+:root {
+  /* Collapsible Section */
+  --flt-collapsible-section-background: initial;
+  --flt-collapsible-section-padding: initial;
+  --flt-collapsible-section-border: initial;
+  --flt-collapsible-section-border-radius: initial;
+  --flt-collapsible-section-box-shadow: initial;
+  --flt-collapsible-section-opened-header-base-icon-transform: rotate(180deg) scale(
+      -1
+    );
+  --flt-collapsible-section-body-animation-duration: 0.5s;
+  --flt-collapsible-section-body-animation-type: ease;
+  --flt-collapsible-section-header-base-padding: initial;
+  --flt-collapsible-section-header-base-border: initial;
+  --flt-collapsible-section-header-base-border-radius: initial;
+  --flt-collapsible-section-header-base-background: initial;
+  --flt-collapsible-section-header-base-cursor: pointer;
+  --flt-collapsible-section-header-base-title-color: #1a1a1a;
+  --flt-collapsible-section-header-base-font-size: 16px;
+  --flt-collapsible-section-header-base-line-height: 24px;
+  --flt-collapsible-section-header-base-font-weight: 700;
+  --flt-collapsible-section-body-animation-duration: 0.5s;
+  --flt-collapsible-section-body-animation-type: ease;
+  --flt-collapsible-section-header-base-icon-transform: rotate(180deg);
+  --flt-collapsible-section-header-base-icon-fill: #1a1a1a;
+}
+```
+
 ---
 
 ## Interfaces
@@ -786,6 +923,7 @@ You can override them as you wish by global css variables as priority.
   --flt-tooltip-bg-color: #374151;
   --flt-tooltip-color: #f9fafb;
   --flt-icon-color: #111827;
+  --flt-icon-size: 24px;
   --flt-button-primary-bg-color: #3782c8;
   --flt-button-primary-color: #f9fafb;
   --flt-button-primary-disabled-color: #6b7280;
@@ -901,45 +1039,6 @@ You can override them as you wish by global css variables as priority.
   --flt-input-phone-border-color-error: #ed123d;
   --flt-input-with-picklist-border-color-success: #59eb9c;
   --flt-input-with-picklist-border-color-error: #ed123d;
-  --flt-alert-info-padding: 16px;
-  --flt-alert-info-border-radius: 8px;
-  --flt-alert-info-border: initial;
-  --flt-alert-info-background: #d6e7fc;
-  --flt-alert-info-warning-background: #f8d8d8;
-  --flt-alert-info-title-font-size: 16px;
-  --flt-alert-info-title-line-height: 24px;
-  --flt-alert-info-title-margin-bottom: 8px;
-  --flt-alert-info-title-font-weight: 700;
-  --flt-alert-info-title-color: #1a1a1a;
-  --flt-alert-info-content-font-size: 12px;
-  --flt-alert-info-content-line-height: 16px;
-  --flt-alert-info-content-font-weight: 400;
-  --flt-alert-info-content-color: #1a1a1a;
-  --flt-alert-info-icon-max-width: 20px;
-  --flt-alert-info-gap: 16px;
-  --flt-collapsible-section-background: initial;
-  --flt-collapsible-section-padding: initial;
-  --flt-collapsible-section-border: initial;
-  --flt-collapsible-section-border-radius: initial;
-  --flt-collapsible-section-box-shadow: initial;
-  --flt-collapsible-section-opened-header-base-icon-transform: rotate(180deg) scale(
-      -1
-    );
-  --flt-collapsible-section-body-animation-duration: 0.5s;
-  --flt-collapsible-section-body-animation-type: ease;
-  --flt-collapsible-section-header-base-padding: initial;
-  --flt-collapsible-section-header-base-border: initial;
-  --flt-collapsible-section-header-base-border-radius: initial;
-  --flt-collapsible-section-header-base-background: initial;
-  --flt-collapsible-section-header-base-cursor: pointer;
-  --flt-collapsible-section-header-base-title-color: #1a1a1a;
-  --flt-collapsible-section-header-base-font-size: 16px;
-  --flt-collapsible-section-header-base-line-height: 24px;
-  --flt-collapsible-section-header-base-font-weight: 700;
-  --flt-collapsible-section-body-animation-duration: 0.5s;
-  --flt-collapsible-section-body-animation-type: ease;
-  --flt-collapsible-section-header-base-icon-transform: rotate(180deg);
-  --flt-collapsible-section-header-base-icon-fill: #1a1a1a;
 }
 ```
 
@@ -952,6 +1051,27 @@ You can override them as you wish by global css variables as priority.
 <details>
 <summary>Click to expand/collapse</summary>
 
+v.3.20.2
+
+- Bug fix `flt-picklist`
+
+---
+
+v.3.20.1
+
+- Bug fix `flt-input-phone`
+- Collapsible section component documentation updated
+
+---
+
+v.3.20.0
+
+- Added Btn component
+- Updated `flt-icon`
+- Updated `alert-info`
+
+---
+
 v.3.19.0
 
 - Added 2 new icons `arrow-back` and `arrow-next`

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

@@ -16,13 +16,13 @@ describe('flt-alert-info', () => {
 
     it('flt alert info base', () => {
         const alertInfoEl = createElement('flt-alert-info', { is: AlertInfo })
-        document.body.appendChild(alertInfoEl)
-        expect(alertInfoEl.firstChild.classList).toContain('flt-alert-info')
         alertInfoEl.title = 'Test'
         alertInfoEl.content = 'Hello world!'
-        alertInfoEl.icon = 'warning'
-        return Promise.resolve().then(async () => {
-            expect(alertInfoEl.firstChild.classList).toContain('flt-alert-info_warning')
-        })
+        document.body.appendChild(alertInfoEl)
+
+        const alertInfo = alertInfoEl.firstChild
+        expect(alertInfo.classList).toContain('flt-alert-info')
+        expect(alertInfo.textContent).toContain('Test')
+        expect(alertInfo.textContent).toContain('Hello world!')
     })
 })

package/frontend/components/flt/alertInfo/alertInfo.html

@@ -1,5 +1,5 @@
 <template lwc:render-mode="light">
-    <div class={alertClass}>
+    <div class="flt-alert-info">
         <div class="flt-alert-info__icon">
             <slot name="icon">
                 <flt-icon icon={icon}></flt-icon>

package/frontend/components/flt/alertInfo/alertInfo.js

@@ -11,11 +11,4 @@ export default class AlertInfo extends BaseElement {
     @api title
     @api content
     @api icon = 'info'
-
-    get alertClass() {
-        return this.generateClassNameList({
-            'flt-alert-info': true,
-            'flt-alert-info_warning': this.icon === 'warning'
-        })
-    }
 }

package/frontend/components/flt/alertInfo/alertInfo.scss

@@ -6,10 +6,6 @@
     gap: var(--flt-alert-info-gap, 16px);
     background: var(--flt-alert-info-background, #d6e7fc);
 
-    &_warning {
-        background: var(--flt-alert-info-warning-background, #f8d8d8);
-    }
-
     &__title {
         font-size: var(--flt-alert-info-title-font-size, 16px);
         line-height: var(--flt-alert-info-title-line-height, 24px);
@@ -27,12 +23,7 @@
 
     &__icon {
         flex-shrink: 0;
-        
-        .flt-icon {
-            max-width: var(--flt-alert-info-icon-max-width, 20px);
-            max-height: var(--flt-alert-info-icon-max-heigth, 20px);
-        }
-        max-height: var(--flt-alert-info-icon-max-heigth, 20px);
-        max-width: var(--flt-alert-info-icon-max-width, 20px);
+        display: inline-flex;
+        --flt-icon-size: 20px;
     }
 }

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

@@ -0,0 +1,33 @@
+import { createElement } from 'lwc'
+import Btn from 'flt/btn'
+
+describe('flt-btn', () => {
+    afterEach(() => {
+        while (document.body.firstChild) {
+            document.body.removeChild(document.body.firstChild)
+        }
+    })
+
+    it('Btn base', () => {
+        const button = createElement('flt-btn', { is: Btn })
+        button.label = 'Default'
+        document.body.appendChild(button)
+        const buttonEl = button.firstChild
+
+        expect(buttonEl.classList).toContain('flt-btn')
+        expect(buttonEl.hasAttribute('disabled')).toBeFalsy()
+        expect(buttonEl.textContent).toContain('Default')
+    })
+
+    it('Btn disabled', () => {
+        const button = createElement('flt-btn', { is: Btn })
+        button.label = 'Default'
+        button.disabled = true
+        document.body.appendChild(button)
+        const buttonEl = button.firstChild
+
+        expect(buttonEl.classList).toContain('flt-btn')
+        expect(buttonEl.hasAttribute('disabled')).toBeTruthy()
+        expect(buttonEl.textContent).toContain('Default')
+    })
+})

package/frontend/components/flt/btn/btn.html

@@ -0,0 +1,17 @@
+<template lwc:render-mode="light">
+    <button class="flt-btn" disabled={disabled}>
+        <slot name="iconLeft">
+            <flt-icon
+                lwc:if={iconLeft}
+                class="flt-btn__icon flt-btn__icon_left"
+                icon={iconLeft}></flt-icon>
+        </slot>
+        <span class="flt-btn__label">{label}<slot></slot></span>
+        <slot name="iconRight">
+            <flt-icon
+                lwc:if={iconRight}
+                class="flt-btn__icon flt-btn__icon_right"
+                icon={iconRight}></flt-icon>
+        </slot>
+    </button>
+</template>

package/frontend/components/flt/btn/btn.js

@@ -0,0 +1,15 @@
+import './btn.scss'
+import { api } from 'lwc'
+import { BaseElement } from 'fleetcor-lwc'
+
+/**
+ * @class Btn
+ * @extends BaseElement
+ * @description Flt btn component
+ */
+export default class Btn extends BaseElement {
+    @api label
+    @api disabled
+    @api iconLeft
+    @api iconRight
+}

package/frontend/components/flt/btn/btn.scss

@@ -0,0 +1,85 @@
+flt-btn {
+    display: inline-flex;
+}
+
+.flt-btn {
+    cursor: pointer;
+    text-decoration: none;
+    list-style: none outside none;
+    background: none repeat scroll 0 0 transparent;
+    border-spacing: 0;
+    text-indent: 0;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    font-family: inherit;
+    box-sizing: border-box;
+    font-weight: var(--flt-btn-fw, 700);
+    border-radius: var(--flt-btn-border-radius, 32px);
+    border: var(--flt-btn-border, 1px solid #3782c8);
+    padding: var(--flt-btn-padding, 0 24px);
+    gap: var(--flt-btn-gap, 16px);
+    color: var(--flt-btn-color, #f9fafb);
+    background-color: var(--flt-btn-bg-color, #3782c8);
+    box-shadow: var(--flt-btn-box-shadow, none);
+    transition: var(--flt-btn-transition, all 0.3s);
+    height: var(--flt-btn-height, 52px);
+    font-size: var(--flt-btn-font-size, 14px);
+    text-transform: var(--flt-btn-text-transform, initial);
+
+    --flt-icon-color: var(--flt-btn-color, #f9fafb);
+
+    &:hover {
+        color: var(--flt-btn-hover-color, #f9fafb);
+        background-color: var(--flt-btn-hover-bg-color, #3782c8);
+        border: var(--flt-btn-hover-border, 1px solid #3782c8);
+        box-shadow: var(
+            --flt-btn-hover-box-shadow,
+            0 4px 6px -1px rgba(16, 24, 40, 0.1),
+            0 2px 4px -2px rgba(16, 24, 40, 0.1)
+        );
+
+        --flt-icon-color: var(--flt-btn-hover-color, #f9fafb);
+    }
+
+    &[disabled] {
+        cursor: not-allowed;
+        color: var(--flt-btn-disabled-color, #6b7280);
+        background-color: var(--flt-btn-disabled-bg-color, #f3f4f6);
+        border: var(--flt-btn-disabled-border, 1px solid #f3f4f6);
+        box-shadow: var(--flt-btn-disabled-border-box-shadow, none);
+
+        --flt-icon-color: var(--flt-btn-disabled-color, #6b7280);
+    }
+
+    &[disabled]:hover {
+        color: var(--flt-btn-disabled-hover-color, #6b7280);
+        background-color: var(--flt-btn-disabled-hover-bg-color, #f3f4f6);
+        border: var(--flt-btn-disabled-hover-border, 1px solid #f3f4f6);
+        box-shadow: var(--flt-btn-disabled-hover-box-shadow, none);
+
+        --flt-icon-color: var(--flt-btn-disabled-hover-color, #6b7280);
+    }
+
+    &::-moz-focus-inner {
+        border: 0;
+        padding: 0;
+    }
+
+    &__icon {
+        display: flex;
+        flex-shrink: 0;
+    }
+
+    &__label {
+        padding: var(--flt-btn-label-padding, 0);
+        display: var(--flt-btn-label-display, flex);
+        align-items: var(--flt-btn-label-align-items, center);
+        justify-content: var(--flt-btn-label-justify-content, center);
+        gap: var(--flt-btn-label-gap, 16px);
+
+        &:empty {
+            display: none;
+        }
+    }
+}

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

@@ -1,6 +1,6 @@
 .flt-icon {
-    width: 24px;
-    height: 24px;
+    width: var(--flt-icon-size, 24px);
+    height: var(--flt-icon-size, 24px);
     display: inline-flex;
 
     &__prop-stroke {

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

@@ -9,6 +9,12 @@ const CODE_BY_DEFAULT = 'GB'
 const CODE_VALUE_SB = '+44'
 
 export default class InputPhone extends UserDataValidator {
+    codeValue = ''
+    phoneNumber = ''
+    touched
+    focused
+    mask
+
     @api errorMessage
     @api inputLabel
     @api placeholder
@@ -42,26 +48,6 @@ export default class InputPhone extends UserDataValidator {
         }
     }
 
-    get maskOptions() {
-        let settings = {
-            mask: /[1-9]/,
-            overwrite: false,
-            lazy: false
-        }
-
-        if (this.codeValue == CODE_VALUE_SB) {
-            settings = {
-                mask: '#000000000',
-                definitions: {
-                    '#': /[1-9]/
-                },
-                overwrite: false,
-                lazy: false
-            }
-        }
-        return settings
-    }
-
     @api getData(silent) {
         return {
             ...super.getData(silent),
@@ -99,8 +85,6 @@ export default class InputPhone extends UserDataValidator {
         return result
     }
 
-    phoneNumber = ''
-
     @api setCode(countryCode) {
         const restore = !this.touched
         this.codeValue = COUNTRIES.find((c) => c.code === countryCode)?.dialCode || this.codeValue
@@ -119,22 +103,28 @@ export default class InputPhone extends UserDataValidator {
         }
     }
 
-    codeValue = ''
-    touched
-    focused
-    mask
-
-    get prefix() {
-        return this.codeValue === CODE_VALUE_SB ? CODE_VALUE_SB + '(0)' : this.codeValue
-    }
+    get maskOptions() {
+        let settings = {
+            mask: /^[1-9]\d*$/,
+            overwrite: false,
+            lazy: false
+        }
 
-    handleFocus() {
-        this.focused = true
-        this.touched = true
+        if (this.codeValue == CODE_VALUE_SB) {
+            settings = {
+                mask: '#000000000',
+                definitions: {
+                    '#': /[1-9]/
+                },
+                overwrite: false,
+                lazy: false
+            }
+        }
+        return settings
     }
 
-    handleBlur() {
-        this.focused = false
+    get prefix() {
+        return this.codeValue === CODE_VALUE_SB ? CODE_VALUE_SB + '(0)' : this.codeValue
     }
 
     get inputStyle() {
@@ -171,6 +161,22 @@ export default class InputPhone extends UserDataValidator {
         this.codeValue = this.codeValue || this.codePrefixByCountryCode
     }
 
+    renderedCallback() {
+        super.renderedCallback()
+        if (!this.mask) {
+            this.reInitIMask()
+            this.querySelector('input').onpaste = (event) => {
+                let value = event.clipboardData.getData('text/plain').replace(/[^\w\\s]/gi, '')
+                if (value?.at(0) == '0') {
+                    value = CODE_VALUE_SB + value.slice(1)
+                } else {
+                    value = '+' + value
+                }
+                this.querySelector('input').value = ''
+            }
+        }
+    }
+
     reInitIMask() {
         this.mask?.destroy()
         this.mask = null
@@ -208,22 +214,6 @@ export default class InputPhone extends UserDataValidator {
         })
     }
 
-    renderedCallback() {
-        super.renderedCallback()
-        if (!this.mask) {
-            this.reInitIMask()
-            this.querySelector('input').onpaste = (event) => {
-                let value = event.clipboardData.getData('text/plain').replace(/[^\w\\s]/gi, '')
-                if (value?.at(0) == '0') {
-                    value = CODE_VALUE_SB + value.slice(1)
-                } else {
-                    value = '+' + value
-                }
-                this.querySelector('input').value = ''
-            }
-        }
-    }
-
     handleFlagChanged(event) {
         this.codeValue = event.detail.value
         this.reInitIMask()
@@ -237,4 +227,13 @@ export default class InputPhone extends UserDataValidator {
             })
         )
     }
+
+    handleFocus() {
+        this.focused = true
+        this.touched = true
+    }
+
+    handleBlur() {
+        this.focused = false
+    }
 }

package/frontend/components/flt/picklist/picklist.js

@@ -76,15 +76,10 @@ export default class Picklist extends SelectElement {
     }
 
     handleMousedownView(event) {
-        let classList = event.target.parentElement.classList;
-        
-        if (
-            event.currentTarget === document.activeElement &&
-            !classList.contains('flt-picklist__dropdown') &&
-            !classList.contains('flt-picklist__dropdown-container')
-        ) {
-            event.currentTarget.blur();
-            event.preventDefault();
+        const dropdown = event.target.closest('.flt-picklist__dropdown')
+        if (event.currentTarget === document.activeElement && !dropdown) {
+            event.currentTarget.blur()
+            event.preventDefault()
         }
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "fleetcor-lwc",
-    "version": "3.19.0",
+    "version": "3.20.2",
     "description": "LWC framework by Fleetcor",
     "repository": {
         "type": "git",
@@ -27,6 +27,7 @@
         "expose": [
             "flt/alertInfo",
             "flt/button",
+            "flt/btn",
             "flt/checkbox",
             "flt/card",
             "flt/loader",