fleetcor-lwc 3.9.9 → 3.11.0

package/README.md

@@ -31,9 +31,6 @@ Add / update `lwc.config.json` file in your project
 
 ## Components
 
-<details open>
-<summary>Click to expand/collapse Components</summary>
-
 ### Radio Group Icon
 
 ```html
@@ -77,6 +74,7 @@ Add / update `lwc.config.json` file in your project
 | name   | handle       | return | description                           |
 | ------ | ------------ | ------ | ------------------------------------- |
 | change | event.detail | object | Return full data of component's state |
+
 </details>
 
 ---
@@ -128,12 +126,11 @@ Add / update `lwc.config.json` file in your project
 | name   | handle       | return | description                           |
 | ------ | ------------ | ------ | ------------------------------------- |
 | change | event.detail | object | Return full data of component's state |
+
 </details>
 
 ---
 
-
-
 ### Checkbox
 
 ```html
@@ -148,7 +145,6 @@ Add / update `lwc.config.json` file in your project
 ></flt-checkbox>
 ```
 
-
 <details>
 <summary>Details</summary>
 
@@ -178,11 +174,11 @@ Add / update `lwc.config.json` file in your project
 | name   | handle       | return | description                           |
 | ------ | ------------ | ------ | ------------------------------------- |
 | change | event.detail | object | Return full data of component's state |
+
 </details>
 
 ---
 
-
 ### Button
 
 ```html
@@ -219,12 +215,11 @@ Add / update `lwc.config.json` file in your project
 | 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 |
+
 </details>
 
 ---
 
-
-
 ### Icon
 
 ```html
@@ -236,14 +231,14 @@ Add / update `lwc.config.json` file in your project
 
 #### Icon variables
 
-| @api variables | type   | values                                                                                                                                                                                                                                     | required | description |
-| -------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- | ----------- |
-| icon           | string | `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, hgv, eye, sign, check,discount,pin-drop,credit-card,receipt,gear-wheel,app-shortcut,drug-indicator,sell,parking-sign,headset-mic,gas-station,directions-car,local-shipping,public,place` | -        |             |
+| @api variables | type   | values                                                                                                                                                                                                                                                                                                                                                                                                                                     | required | description |
+| -------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- | ----------- |
+| icon           | string | `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, hgv, eye, sign, check, discount, pin-drop, credit-card, receipt, gear-wheel, app-shortcut, drug-indicator, sell, parking-sign, headset-mic, gas-station, directions-car, local-shipping, public, place, info, warning` | -        |             |
+
 </details>
 
 ---
 
-
 ### Card
 
 ```html
@@ -258,11 +253,11 @@ Add / update `lwc.config.json` file in your project
 | slot    | description                   |
 | ------- | ----------------------------- |
 | default | any html element can be there |
+
 </details>
 
 ---
 
-
 ### Tooltip
 
 ```html
@@ -287,12 +282,11 @@ Add / update `lwc.config.json` file in your project
 | slot    | description                   |
 | ------- | ----------------------------- |
 | default | any html element can be there |
+
 </details>
 
 ---
 
-
-
 ### Loader
 
 ```html
@@ -309,11 +303,11 @@ Add / update `lwc.config.json` file in your project
 | slot    | description                   |
 | ------- | ----------------------------- |
 | default | any html element can be there |
+
 </details>
 
 ---
 
-
 ### Modal
 
 ```html
@@ -336,11 +330,11 @@ Add / update `lwc.config.json` file in your project
 | slot    | description                   |
 | ------- | ----------------------------- |
 | default | any html element can be there |
+
 </details>
 
 ---
 
-
 ### Progress Step
 
 ```html
@@ -357,11 +351,43 @@ Add / update `lwc.config.json` file in your project
 | title          | string |        | +        | title for component                            |
 | total          | int    |        | +        | right number position                          |
 | current        | int    |        | +        | left part of position (always less then total) |
+
 </details>
 
 ---
 
+### Alert Info
+
+```html
+<flt-alert-info
+  title="Contacts"
+  icon="warning"
+  content="Welcome to our application."
+></flt-alert-info>
+```
+
+<details>
+<summary>Details</summary>
+
+#### Alert Info variables
+
+| @api variables | type   | values    | required | description                   |
+| -------------- | ------ | --------- | -------- | ----------------------------- |
+| title          | html   |           | +        | title for component as HTML   |
+| content        | html   |           | +        | content for component as HTML |
+| icon           | string | icons cmp | +        | any value from icons          |
 
+#### Alert Info slots
+
+| slot    | description                                      |
+| ------- | ------------------------------------------------ |
+| icon    | any html element can be there instead of icon    |
+| title   | any html element can be there instead of title   |
+| content | any html element can be there instead of content |
+
+</details>
+
+---
 
 ### Radio Group Chips
 
@@ -382,17 +408,17 @@ Add / update `lwc.config.json` file in your project
 
 #### Radio Group Chips variables
 
-| @api variables | type   | values    | required | description                                                        |
-| -------------- | ------ | --------- | -------- | ------------------------------------------------------------------ |
-| name           | string |           | +        |                                                                    |
+| @api variables | type   | values    | required | description                                                                                                                                       |
+| -------------- | ------ | --------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
+| name           | string |           | +        |                                                                                                                                                   |
 | options        | array  |           | +        | Array of available items with parameters: `label` - string; `value` - unique string; `iconLeft` and `iconRight` - any value from `Icon` component |
-| size           | string | `medium`  | -        | Size of buttons (button sizes)                                     |
-| type           | string | `primary` | -        | Type of selected button (button types)                             |
-| value          | string |           | -        | Current value from options items value                             |
-| disabled       | bool   |           | -        |                                                                    |
-| required       | bool   |           | -        |                                                                    |
-| group          | string |           | -        |                                                                    |
-| error-message  | string |           | -        |                                                                    |
+| size           | string | `medium`  | -        | Size of buttons (button sizes)                                                                                                                    |
+| type           | string | `primary` | -        | Type of selected button (button types)                                                                                                            |
+| value          | string |           | -        | Current value from options items value                                                                                                            |
+| disabled       | bool   |           | -        |                                                                                                                                                   |
+| required       | bool   |           | -        |                                                                                                                                                   |
+| group          | string |           | -        |                                                                                                                                                   |
+| error-message  | string |           | -        |                                                                                                                                                   |
 
 #### Radio Group Chips methods
 
@@ -407,12 +433,11 @@ Add / update `lwc.config.json` file in your project
 | name   | handle       | return | description                           |
 | ------ | ------------ | ------ | ------------------------------------- |
 | change | event.detail | object | Return full data of component's state |
+
 </details>
 
 ---
 
-
-
 ### Picklist Chips
 
 ```html
@@ -461,11 +486,11 @@ Add / update `lwc.config.json` file in your project
 | name   | handle       | return | description                           |
 | ------ | ------------ | ------ | ------------------------------------- |
 | change | event.detail | object | Return full data of component's state |
+
 </details>
 
 ---
 
-
 ### Input Text
 
 ```html
@@ -536,11 +561,11 @@ Add / update `lwc.config.json` file in your project
 | focus  | event        | object | Return common Event object            |
 | blur   | event        | object | Return common Event object            |
 | change | event.detail | object | Return full data of component's state |
+
 </details>
 
 ---
 
-
 ### Input Email
 
 This component fully extends from `Input Text`
@@ -604,6 +629,7 @@ This component fully extends from `Input Text`
 | focus  | event        | object | Return common Event object            |
 | blur   | event        | object | Return common Event object            |
 | change | event.detail | object | Return full data of component's state |
+
 </details>
 
 ---
@@ -666,7 +692,6 @@ This component fully extends from `Input Text`
 | name   | handle       | return | description                           |
 | ------ | ------------ | ------ | ------------------------------------- |
 | change | event.detail | object | Return full data of component's state |
-</details>
 
 </details>
 
@@ -678,7 +703,7 @@ This component fully extends from `Input Text`
 <flt-collapsible-section>
   <div slot="title">Collapsible Section Title</div>
   <div>
-      <div>Any Content...</div>
+    <div>Any Content...</div>
   </div>
 </flt-collapsible-section>
 ```
@@ -688,22 +713,22 @@ This component fully extends from `Input Text`
 
 #### Collapsible Section variables
 
-| @api variables     | type   | values       | required | description                                                                    |
-| ------------------ | ------ | ------------ | -------- | -----------                                                                    |
-| closed             | bool   |              | -        | To control section status `closed/opened` (default - false)                    |
-| styleOff           | bool   |              | -        | To be able to turn off default styles for named slot `title` (default - false) |
+| @api variables | type | values | required | description                                                                    |
+| -------------- | ---- | ------ | -------- | ------------------------------------------------------------------------------ |
+| closed         | bool |        | -        | To control section status `closed/opened` (default - false)                    |
+| styleOff       | bool |        | -        | To be able to turn off default styles for named slot `title` (default - false) |
 
 #### Collapsible Section slots
 
-| slot      | description                                    |
-| --------- | ---------------------------------------------- |
-| default   | any html element can be there                  |
-| title     | any html element can be there                  |
+| slot    | description                   |
+| ------- | ----------------------------- |
+| default | any html element can be there |
+| title   | any html element can be there |
+
 </details>
 
 ---
 
-
 ## Interfaces
 
 #### ModalViewer
@@ -856,8 +881,24 @@ 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;
 }
 ```
+
 </details>
 
 ---
@@ -867,6 +908,21 @@ You can override them as you wish by global css variables as priority.
 <details>
 <summary>Click to expand/collapse</summary>
 
+v.3.11.0
+
+- Added icons for component `flt-icon` : `info`, `warning`
+- Added `Animation` methods `collapseIn`, `collapseOut`, `toggleCollapse`
+- Bugfix `flt-input-text` method `isValid`
+- Added component `flt-alert-info`
+
+---
+
+v.3.10.0
+
+- Added expose for component `flt-collapsible-section`
+
+---
+
 v.3.9.9
 
 - Added component `flt-collapsible-section`
@@ -880,13 +936,13 @@ v.3.9.8
 ---
 
 - v.3.9.7
-  
+
   - Icon component updates to use `--flt-icon-color`
 
 ---
 
 - v.3.9.6
-  
+
   - Added ability to use `iconLeft` and `iconRight` parameters in options (`flt-radio-group-chips`)
 
 ---
@@ -1239,4 +1295,4 @@ v.3.9.8
   - Added hgv icon
   - Added $FLT_BUTTON_LABEL_PADDING constant
 
-</details>
+</details>

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

@@ -0,0 +1,28 @@
+import { createElement, setHooks } from 'lwc'
+import AlertInfo from 'flt/alertInfo'
+
+setHooks({
+    sanitizeHtmlContent(content) {
+        return content
+    }
+})
+
+describe('flt-alert-info', () => {
+    afterEach(() => {
+        while (document.body.firstChild) {
+            document.body.removeChild(document.body.firstChild)
+        }
+    })
+
+    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')
+        })
+    })
+})

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

@@ -0,0 +1,17 @@
+<template lwc:render-mode="light">
+    <div class={alertClass}>
+        <div class="flt-alert-info__icon">
+            <slot name="icon">
+                <flt-icon icon={icon}></flt-icon>
+            </slot>
+        </div>
+        <div class="flt-alert-info__block">
+            <slot name="title">
+                <div class="flt-alert-info__title" lwc:inner-html={title}></div>
+            </slot>
+            <slot name="content">
+                <div class="flt-alert-info__content" lwc:inner-html={content}></div>
+            </slot>
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,21 @@
+import './alertInfo.scss'
+import { BaseElement } from 'fleetcor-lwc'
+import { api } from 'lwc'
+
+/**
+ * @class AlertInfo
+ * @extends BaseElement
+ * @description Flt Alert Info component
+ */
+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

@@ -0,0 +1,35 @@
+.flt-alert-info {
+    padding: var(--flt-alert-info-padding, 16px);
+    border-radius: var(--flt-alert-info-border-radius, 8px);
+    border: var(--flt-alert-info-border, initial);
+    display: flex;
+    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);
+        margin-bottom: var(--flt-alert-info-title-margin-bottom, 8px);
+        font-weight: var(--flt-alert-info-title-font-weight, 700);
+        color: var(--flt-alert-info-title-color, #1a1a1a);
+    }
+
+    &__content {
+        font-size: var(--flt-alert-info-content-font-size, 12px);
+        line-height: var(--flt-alert-info-content-line-height, 16px);
+        font-weight: var(--flt-alert-info-content-font-weight, 400);
+        color: var(--flt-alert-info-content-color, #1a1a1a);
+    }
+
+    &__icon {
+        flex-shrink: 0;
+        .flt-icon {
+            max-width: var(--flt-alert-info-icon-max-width, 20px);
+        }
+        max-width: var(--flt-alert-info-icon-max-width, 20px);
+    }
+}

package/frontend/components/flt/collapsibleSection/collapsibleSection.html

@@ -1,5 +1,5 @@
 <template lwc:render-mode="light">
-    <div class={titleClass} onclick={toggleWrapper}>
+    <div class={titleClass} onclick={handleToggleWrapper}>
         <slot name="title"><span class="title-empty-slot"></span></slot>
     </div>
     <div class={containerWrapperClass}>

package/frontend/components/flt/collapsibleSection/collapsibleSection.js

@@ -20,8 +20,8 @@ export default class CollapsibleSection extends BaseElement {
             return '';
         }
         return this.generateClassNameList({
-            'collapsible-section_title': this.titleSlotNonEmpty,
-            'collapsible-section_title-active': !this.closed && this.titleSlotNonEmpty
+            'collapsible-section__title': this.titleSlotNonEmpty,
+            'collapsible-section__title-active': !this.closed && this.titleSlotNonEmpty
         });
     }
 
@@ -35,7 +35,7 @@ export default class CollapsibleSection extends BaseElement {
         }
     }
 
-    toggleWrapper() {
+    handleToggleWrapper() {
         if (this.titleSlotNonEmpty) {
             this.closed = !this.closed;
         }

package/frontend/components/flt/collapsibleSection/collapsibleSection.scss

@@ -1,48 +1,47 @@
 .collapsible-section {
     &__container {
         animation: fadeOut 0.5s ease-in;
+    }
 
-        &-wrapper {
-            display: grid;
-            grid-template-rows: 0fr;
-            transition: grid-template-rows 500ms, margin-top 500ms;
+    &__container-wrapper {
+        display: grid;
+        grid-template-rows: 0fr;
+        transition: grid-template-rows 500ms, margin-top 500ms;
 
-            &_expanded {
-                grid-template-rows: 1fr;
-            }
+        &_expanded {
+            grid-template-rows: 1fr;
         }
+    }
 
-        &-wrapper > div {
-            overflow: hidden;
-            margin-top: 0px;
-        }
+    &__container-wrapper > div {
+        overflow: hidden;
+        margin-top: 0px;
     }
 
-    &_title {
+    &__title {
         font-size: 16px;
         font-weight: 700;
         padding-bottom: 12px;
-
         cursor: pointer;
         display: flex;
         justify-content: space-between;
         align-items: center;
 
-        &:after{
-            content:'';
+        &:after {
+            content: '';
             display: inline-block;
-            margin-left: .75rem;
+            margin-left: 0.75rem;
             width: 10px;
             height: 10px;
             border-bottom: 2px solid #111827;
             border-left: 2px solid #111827;
             transform: rotate(-45deg);
             margin-top: -8px;
-            transition: all .4s ease-out;
+            transition: all 0.4s ease-out;
         }
 
-        &-active{
-            &:after{
+        &_active {
+            &:after {
                 transform: rotate(135deg);
                 margin-top: 2px;
             }

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

@@ -36,21 +36,23 @@ import TMPL_MAP_PIN from './icons/tmpl-map-pin.html'
 import TMPL_EYE from './icons/tmpl-eye.html'
 import TMPL_SIGN from './icons/tmpl-sign.html'
 import TMPL_CHECK from './icons/tmpl-check.html'
-import TMPL_DISCOUNT from './icons/tmpl-discount.html';
-import TMPL_PIN_DROP from './icons/tmpl-pin-drop.html';
-import TMPL_CREDIT_CARD from './icons/tmpl-credit-card.html';
-import TMPL_RECEIPT from './icons/tmpl-receipt.html';
-import TMPL_GEAR_WHEEL from './icons/tmpl-gear-wheel.html';
-import TMPL_APP_SHORTCUT from './icons/tmpl-app-shortcut.html';
-import TMPL_DRAG_INDICATOR from './icons/tmpl-drag-indicator.html';
-import TMPL_SELL from './icons/tmpl-sell.html';
-import TMPL_PARKING_SIGN from './icons/tmpl-parking-sign.html';
-import TMPL_HEADSET_MIC from './icons/tmpl-headset-mic.html';
-import TMPL_GAS_STATION from './icons/tmpl-gas-station.html';
-import TMPL_DIRECTION_CAR from './icons/tmpl-directions-car.html';
-import TMPL_LOCAL_SHIPPING from './icons/tmpl-local-shipping.html';
-import TMPL_PUBLIC from './icons/tmpl-public.html';
-import TMPL_PLACE from './icons/tmpl-place.html';
+import TMPL_DISCOUNT from './icons/tmpl-discount.html'
+import TMPL_PIN_DROP from './icons/tmpl-pin-drop.html'
+import TMPL_CREDIT_CARD from './icons/tmpl-credit-card.html'
+import TMPL_RECEIPT from './icons/tmpl-receipt.html'
+import TMPL_GEAR_WHEEL from './icons/tmpl-gear-wheel.html'
+import TMPL_APP_SHORTCUT from './icons/tmpl-app-shortcut.html'
+import TMPL_DRAG_INDICATOR from './icons/tmpl-drag-indicator.html'
+import TMPL_SELL from './icons/tmpl-sell.html'
+import TMPL_PARKING_SIGN from './icons/tmpl-parking-sign.html'
+import TMPL_HEADSET_MIC from './icons/tmpl-headset-mic.html'
+import TMPL_GAS_STATION from './icons/tmpl-gas-station.html'
+import TMPL_DIRECTION_CAR from './icons/tmpl-directions-car.html'
+import TMPL_LOCAL_SHIPPING from './icons/tmpl-local-shipping.html'
+import TMPL_PUBLIC from './icons/tmpl-public.html'
+import TMPL_PLACE from './icons/tmpl-place.html'
+import TMPL_WARNING from './icons/tmpl-warning.html'
+import TMPL_INFO from './icons/tmpl-info.html'
 
 /**
  * @class Icon
@@ -58,66 +60,68 @@ import TMPL_PLACE from './icons/tmpl-place.html';
  * @description Flt icon component
  */
 export default class Icon extends LightningDomElement {
-    @api icon;
+    @api icon
 
-    connectedCallback () {
+    connectedCallback() {
         if (!ICONS[this.icon]) {
-            console.error(`FltError: Icon '${this.icon}' is not available!`);
+            console.error(`FltError: Icon '${this.icon}' is not available!`)
         }
     }
 
-    render () {
-        return ICONS[this.icon] || TMPL_EMPTY;
+    render() {
+        return ICONS[this.icon] || TMPL_EMPTY
     }
 }
 
 const ICONS = {
-    'search': TMPL_SEARCH,
-    'plus': TMPL_PLUS,
+    search: TMPL_SEARCH,
+    plus: TMPL_PLUS,
     'plus-small': TMPL_SMALL_PLUS,
-    'document': TMPL_DOCUMENT,
-    'close': TMPL_CLOSE,
-    'ev': TMPL_EV,
-    'carwash': TMPL_CARWASH,
-    'car': TMPL_CAR,
-    'van': TMPL_VAN,
-    'unleaded': TMPL_UNLIDEAD,
-    'diesel': TMPL_DIESEL,
-    'hydrogen': TMPL_HYDROGEN,
-    'signature': TMPL_SIGNATURE,
-    'fuel': TMPL_FUEL,
-    'driver': TMPL_DRIVER,
-    'vehicle': TMPL_VEHICLE,
-    'both': TMPL_BOTH,
+    document: TMPL_DOCUMENT,
+    close: TMPL_CLOSE,
+    ev: TMPL_EV,
+    carwash: TMPL_CARWASH,
+    car: TMPL_CAR,
+    van: TMPL_VAN,
+    unleaded: TMPL_UNLIDEAD,
+    diesel: TMPL_DIESEL,
+    hydrogen: TMPL_HYDROGEN,
+    signature: TMPL_SIGNATURE,
+    fuel: TMPL_FUEL,
+    driver: TMPL_DRIVER,
+    vehicle: TMPL_VEHICLE,
+    both: TMPL_BOTH,
     'shared-card': TMPL_SHARED_CARD,
     'ev-and-fuel': TMPL_EV_AND_FUEL,
-    'oil': TMPL_OIL,
-    'key': TMPL_KEY,
-    'blocked': TMPL_BLOCKED,
+    oil: TMPL_OIL,
+    key: TMPL_KEY,
+    blocked: TMPL_BLOCKED,
     'arrow-left': TMPL_ARROW_LEFT,
     'multiple-users': TMPL_MULTIPLE_USERS,
     'arrow-right': TMPL_ARROW_RIGHT,
-    'hgv': TMPL_HGV,
-    'world': TMPL_WORLD,
+    hgv: TMPL_HGV,
+    world: TMPL_WORLD,
     'map-pin': TMPL_MAP_PIN,
-    'eye': TMPL_EYE,
-    'sign': TMPL_SIGN,
-    'check': TMPL_CHECK,
-    'discount': TMPL_DISCOUNT,
+    eye: TMPL_EYE,
+    sign: TMPL_SIGN,
+    check: TMPL_CHECK,
+    discount: TMPL_DISCOUNT,
     'pin-drop': TMPL_PIN_DROP,
     'credit-card': TMPL_CREDIT_CARD,
-    'receipt': TMPL_RECEIPT,
+    receipt: TMPL_RECEIPT,
     'gear-wheel': TMPL_GEAR_WHEEL,
     'app-shortcut': TMPL_APP_SHORTCUT,
     'drug-indicator': TMPL_DRAG_INDICATOR,
-    'sell': TMPL_SELL,
+    sell: TMPL_SELL,
     'parking-sign': TMPL_PARKING_SIGN,
     'headset-mic': TMPL_HEADSET_MIC,
     'gas-station': TMPL_GAS_STATION,
     'directions-car': TMPL_DIRECTION_CAR,
     'local-shipping': TMPL_LOCAL_SHIPPING,
-    'public': TMPL_PUBLIC,
-    'place': TMPL_PLACE,
+    public: TMPL_PUBLIC,
+    place: TMPL_PLACE,
+    warning: TMPL_WARNING,
+    info: TMPL_INFO
 }
 
-export const ICONS_LIST = Object.keys(ICONS);
+export const ICONS_LIST = Object.keys(ICONS)

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

@@ -0,0 +1,10 @@
+<template lwc:render-mode="light">
+    <svg class="flt-icon flt-icon__info" width="20" height="20" viewBox="0 0 20 20" fill="none">
+        <path
+            d="M9.375 9.375L9.40957 9.35771C9.88717 9.11891 10.4249 9.55029 10.2954 10.0683L9.70458 12.4317C9.57507 12.9497 10.1128 13.3811 10.5904 13.1423L10.625 13.125M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10ZM10 6.875H10.0063V6.88125H10V6.875Z"
+            class="flt-icon__prop-stroke"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"></path>
+    </svg>
+</template>

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

@@ -0,0 +1,7 @@
+<template lwc:render-mode="light">
+    <svg class="flt-icon flt-icon__warning" width="20" height="20" viewBox="0 0 20 20" fill="none">
+        <path
+            d="M8.99023 3.99609C9.43932 3.2204 10.5597 3.2204 11.0088 3.99609L17.2832 14.8379C17.7319 15.6133 17.172 16.5869 16.2744 16.5869H3.72461C2.82704 16.5869 2.26703 15.6133 2.71582 14.8379L8.99023 3.99609ZM9.56641 4.32812L3.29199 15.1699L2.85742 15.9199H17.1416L16.707 15.1699L10.4326 4.32812L9.99902 3.58008L9.56641 4.32812ZM10.333 13.4199V14.0869H9.66602V13.4199H10.333ZM9.99902 8.41992C10.1812 8.41992 10.333 8.57172 10.333 8.75391V10.4199C10.333 10.6021 10.1812 10.7539 9.99902 10.7539C9.81702 10.7537 9.66602 10.602 9.66602 10.4199V8.75391C9.66602 8.57186 9.81702 8.42016 9.99902 8.41992Z"
+            class="flt-icon__prop-stroke" ></path>
+    </svg>
+</template>

package/frontend/core/interface/Animation.js

@@ -27,7 +27,7 @@ export default class Animation {
             }
         })
     }
-    
+
     static fadeOut = ({
         el,
         duration = 300,
@@ -55,6 +55,109 @@ export default class Animation {
         })
     }
 
+    static collapseIn = ({
+        el,
+        duration = 300,
+        beforeAction,
+        afterAction,
+        timing = (timeFraction) => 1 - timeFraction * timeFraction
+    }) => {
+        if (!el.offsetHeight || el.getAttribute('flt-collapsing') === 'true') {
+            return
+        }
+        el.setAttribute('flt-collapsing', 'true')
+        const HEIGHT = el.offsetHeight
+        el.style.overflow = 'hidden'
+
+        if (typeof beforeAction === 'function') {
+            beforeAction()
+        }
+
+        Animation.animate({
+            duration: duration,
+            timing: timing,
+            draw: (progress) => {
+                if (progress < 0) progress = 0
+                el.style.height = progress * HEIGHT + 'px'
+            },
+            complete: () => {
+                el.removeAttribute('flt-collapsing')
+                if (typeof afterAction === 'function') {
+                    afterAction()
+                }
+            }
+        })
+    }
+
+    static collapseOut = ({
+        el,
+        duration = 300,
+        beforeAction,
+        afterAction,
+        timing = (timeFraction) => timeFraction * timeFraction
+    }) => {
+        if (el.offsetHeight || el.getAttribute('flt-collapsing') === 'true') {
+            return
+        }
+        el.setAttribute('flt-collapsing', 'true')
+
+        el.style.height = null
+        el.style.overflow = null
+
+        requestAnimationFrame(() => {
+            const HEIGHT = el.offsetHeight
+            el.style.height = 0
+            el.style.overflow = 'hidden'
+            if (typeof beforeAction === 'function') {
+                beforeAction()
+            }
+
+            Animation.animate({
+                duration: duration,
+                timing: timing,
+                draw: (progress) => {
+                    if (progress > 1) progress = 1
+                    el.style.height = progress * HEIGHT + 'px'
+                },
+                complete: () => {
+                    el.style.overflow = null
+                    el.style.height = null
+                    el.removeAttribute('flt-collapsing')
+                    if (typeof afterAction === 'function') {
+                        afterAction()
+                    }
+                }
+            })
+        })
+    }
+
+    static toggleCollapse = ({
+        el,
+        duration = 300,
+        beforeAction,
+        afterAction,
+        timingIn = (timeFraction) => 1 - timeFraction * timeFraction,
+        timingOut = (timeFraction) => timeFraction * timeFraction
+    }) => {
+        if (el.offsetHeight) {
+            Animation.collapseIn({
+                el,
+                duration,
+                beforeAction,
+                afterAction,
+                timing: timingIn
+            })
+        } else {
+            Animation.collapseOut({
+                el,
+                duration,
+                beforeAction,
+                afterAction,
+                timing: timingOut
+            })
+        }
+    }
+
     static animate({ timing, duration, draw = () => {}, complete = () => {} }) {
         let start = performance.now()
 

package/frontend/core/interface/InputElement.js

@@ -22,12 +22,13 @@ export default class InputElement extends UserDataValidator {
 
     @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 (this.required && !this.value) {
+            result = false
+        }
+
+        if (result && this.regExp && this.value && !new RegExp(this.regExp).test(this.value)) {
+            result = false
         }
 
         if (

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "fleetcor-lwc",
-    "version": "3.9.9",
+    "version": "3.11.0",
     "description": "LWC framework by Fleetcor",
     "repository": {
         "type": "git",
@@ -33,6 +33,7 @@
             "flt/inputText",
             "flt/inputEmail",
             "flt/inputPhone",
+            "flt/collapsibleSection",
             "flt/inputWithPicklist",
             "flt/picklist",
             "flt/modal",