fleetcor-lwc

v3.13.5

Published

6 days ago

LWC framework by Fleetcor

0High
0Medium
0Low

lwc.fleetcor

lwc

Fleetcor LWC

About

The Fleetcor LWC framework is a set of popular LWC components for use in any client-side web development projects.

It will help you speed up the process of building any web application.

How to install

In your project open terminal and install fleetcor-lwc

npm i fleetcor-lwc

Add / update lwc.config.json file in your project

...
{
    "modules": [
        ...
        {
            "npm": "fleetcor-lwc"
        }
    ]
}
...

Components

Radio Group Icon

<flt-radio-group-icon
  size="s"
  name="city"
  disabled
  required
  group="main"
  options="[{icon:'///icon-path', value:'London'}, {icon:'///icon-path', value:'Leon'}]"
  value="London"
></flt-radio-group-icon>

Radio Group Icon variables

| @api | type | values | required | description | | ------------- | ------ | ------ | -------- | ----------------------------------------------------------------------------------------- | | name | string | | + | | | options | array | | + | Array of available items which have icon with path of icon and value as unique string | | size | string | s | - | | | value | string | | - | Current value from options items value | | disabled | bool | | - | | | required | bool | | - | | | group | string | | - | | | error-message | string | | - | |

Radio Group Icon methods

| @api | params | return type | description | | -------- | ----------- | ----------- | ----------------------------------------------------------------------------------------------------------------------- | | validate | | void | Check component validation and show error message to user | | isValid | | bool | Return true or false | | getData | silent:bool | object | Return full data of component's state. If silent true - return value will be without any errors displaying for client |

Radio Group Icon events

| name | handle | return | description | | ------ | ------------ | ------ | ------------------------------------- | | change | event.detail | object | Return full data of component's state |

Radio Group

<flt-radio-group
  size="s"
  name="city"
  disabled
  required
  direction="column"
  group="main"
  options="[{label:'London', value:'London'}, {label:'Leon', value:'Leon'}]"
  value="London"
  label="City"
></flt-radio-group>

Radio Group variables

| @api variables | type | values | required | description | | -------------- | ------ | ----------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | | name | string | | + | | | options | array | | + | Array of available items which have label with any html text and value as unique string, element to display for selected item at the bottom side | | size | string | s | - | | | value | string | | - | Current value from options items value | | label | string | | - | It is main label for items value | | disabled | bool | | - | | | required | bool | | - | | | direction | string | row or column | - | | | group | string | | - | | | error-message | string | | - | |

Radio Group methods

Radio Group events

| name | handle | return | description | | ------ | ------------ | ------ | ------------------------------------- | | change | event.detail | object | Return full data of component's state |

Checkbox

<flt-checkbox
  size="small"
  name="agreement"
  disabled
  required
  group="main"
  value="true"
  label="Next"
></flt-checkbox>

Checkbox variables

| @api variables | type | values | required | description | | -------------- | ------ | ------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------- | | name | string | | + | | | size | string | small or medium | - | | | value | bool | | - | | | label | html | | - | Label set to template as HTML content. You can user tag a with attribute view-modal to catch viewmodal Custom Event by click on it | | disabled | bool | | - | | | required | bool | | - | | | group | string | | - | | | error-message | string | | - | |

Checkbox methods

Checkbox events

| name | handle | return | description | | ------ | ------------ | ------ | ------------------------------------- | | change | event.detail | object | Return full data of component's state |

Button

<flt-button
  type="base|primary|secondary|link"
  size="xs|small|medium|large"
  icon-left="arrow-left"
  icon-right="arrow-left"
  disabled
  label="Next"
>
  <!-- Any html element -->
</flt-button>

Button variables

| @api variables | type | values | required | description | | -------------- | ------ | -------------------------------- | -------- | ------------------------------- | | type | string | base, primary, secondary, link | - | | | size | string | xs, small, medium, large | - | | | icon-left | string | arrow-left, ... | - | any value from Icon component | | icon-right | string | arrow-right, ... | - | any value from Icon component | | label | string | | - | | | disabled | bool | | - | |

Button 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 |

Icon

<flt-icon icon="arrow-left"></flt-icon>

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, info, warning | - | |

Card

<flt-card></flt-card>

Card slot

| slot | description | | ------- | ----------------------------- | | default | any html element can be there |

Tooltip

<flt-tooltip content="Text description info" corner="12">
  <!-- Any html element -->
  <flt-icon icon="arrow-left"></flt-icon>
</flt-tooltip>

Tooltip variables

| @api variables | type | values | required | description | | -------------- | ---- | ------ | -------- | --------------------------------- | | content | html | | + | | | corner | int | | - | change corner radius of container |

Tooltip slot

| slot | description | | ------- | ----------------------------- | | default | any html element can be there |

Loader

<flt-loader>
  <flt-icon icon="arrow-left"></flt-icon>
</flt-loader>

Loader slot

| slot | description | | ------- | ----------------------------- | | default | any html element can be there |

Modal

<flt-modal deactive-glass>
  <flt-icon icon="arrow-left"></flt-icon>
</flt-modal>

Modal variables

| @api variables | type | values | required | description | | -------------- | ---- | ------ | -------- | --------------------------------------- | | deactiveGlass | bool | | - | Depricate close modal by clicking glass |

Modal slot

| slot | description | | ------- | ----------------------------- | | default | any html element can be there |

Progress Step

<flt-progress-step title="Contacts" total="8" current="1"></flt-progress-step>

Progress Step variables

| @api variables | type | values | required | description | | -------------- | ------ | ------ | -------- | ---------------------------------------------- | | title | string | | + | title for component | | total | int | | + | right number position | | current | int | | + | left part of position (always less then total) |

Alert Info

<flt-alert-info
  title="Contacts"
  icon="warning"
  content="Welcome to our application."
></flt-alert-info>

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 |

Radio Group Chips

<flt-radio-group-chips
  name="city"
  label="City"
  value="London"
  error-message="Error! Empty field"
  required
  options="[{label:'London', value:'London'}, {label:'Leon', value:'Leon'}]"
>
</flt-radio-group-chips>

Radio Group Chips variables

| @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 | | - | |

Radio Group Chips methods

Radio Group Chips events

| name | handle | return | description | | ------ | ------------ | ------ | ------------------------------------- | | change | event.detail | object | Return full data of component's state |

Picklist Chips

<flt-picklist
  name="city"
  required
  show-dropdown-as-modal
  placeholder="City"
  error-message="Error! Empty field"
  value="London"
  options="[{label:'London', value:'London'}, {label:'Leon', value:'Leon'}]"
>
</flt-picklist>

Picklist variables

| @api variables | type | values | required | description | | ---------------------- | ------ | -------- | -------- | --------------------------------------------------------------------------------------------- | | name | string | | + | | | options | array | | + | Array of available items with label and value as unique string | | size | string | medium | - | Size of buttons (button sizes) | | show-dropdown-as-modal | bool | | - | Show modal with selected options | | modal-dimention-start | int | 1280 | - | If showDropdownAsModal is true, by default modal become visible window width less then 1280px | | hide-placeholder | bool | | - | Hide placeholder on picklist in desktop version and if value is exist |

Picklist methods

Picklist events

| name | handle | return | description | | ------ | ------------ | ------ | ------------------------------------- | | change | event.detail | object | Return full data of component's state |

Input Text

<flt-input-text
  name="FirstName"
  label="First Name"
  value="Jos"
  error-message="Error! Required field"
  required
  reg-exp="^[a-zA-Z]*$"
  placeholder="First Name"
  max-length="16"
  type="text"
  placeholde-visible
></flt-input-text>

<flt-input-text
  name="Currency"
  label="Currency"
  value="100"
  error-message="Error! Required field"
  required
  prefix="$"
  reg-exp="^[0-9]$"
  placeholder="Currency"
  max-length="7"
  min-value="100"
  max-value="1000000"
  type="text"
  placeholde-visible
></flt-input-text>

Input Text variables

| @api variables | type | values | required | description | | ------------------ | ------ | ------------ | -------- | ----------- | | name | string | | + | | | label | string | | - | | | value | string | | - | | | error-message | string | | - | | | required | bool | | - | | | disabled | bool | | - | | | placeholde-visible | bool | | - | | | prefix | html | | - | | | reg-exp | string | | - | | | placeholder | string | | - | | | max-length | int | | - | | | min-value | int | | - | | | max-value | int | | - | | | type | string | text,tel | - | |

Input Text methods

Input Text events

| name | handle | return | description | | ------ | ------------ | ------ | ------------------------------------- | | 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 |

Input Email

This component fully extends from Input Text

<flt-input-email
  name="Email"
  label="Email"
  value="[email protected]"
  error-message="Error! Required field"
  required
  placeholder="Email"
  type="email"
  placeholde-visible
></flt-input-email>

Input Phone

<flt-input-phone
  name="phone"
  value="+44 3435234523"
  error-message="Error! Required field"
  required
  placeholder="Phone Number"
  error-message="Please enter a valid phone"
></flt-input-phone>

Input Phone variables

| @api variables | type | values | required | description | | ---------------------- | ------ | ------ | -------- | --------------------------------------------------------------------------------------------- | | name | string | | + | | | input-label | string | | - | | | error-message | string | | - | | | value | string | | - | | | required | bool | | - | | | disabled | bool | | - | | | placeholder | string | | - | | | code-by-default | string | GB | - | Country code. by default UK country code GB | | show-dropdown-as-modal | bool | | - | | | modal-dimention-start | int | 1280 | - | If showDropdownAsModal is true, by default modal become visible window width less then 1280px |

Input Phone methods

| @api | params | return type | description | | -------- | ------------------ | ----------- | ----------------------------------------------------------------------------------------------------------------------- | | validate | | void | Check component validation and show error message to user | | isValid | | bool | Return true or false | | getData | silent:bool | object | Return full data of component's state. If silent true - return value will be without any errors displaying for client | | setCode | countryCode:string | void | Change country code |

Input Phone events

Input With Picklist

<flt-input-with-picklist
  name="{picklist:'picklistName', input:'inputName'}"
  required
  label="{picklist:'picklistLabel', input:'inputLabel'}"
  value="{picklist:'picklistValue', input:'inputValue'}"
  show-dropdown-as-modal
  placeholder="{picklist:'picklistPlaceholder', input:'inputPlaceholder'}"
  onchange="{handleInputWithPicklist}"
  hide-placeholder-picklist
  min-value="100"
  max-value="1000"
  max-length="4000"
  reg-exp="^([0-9]{1,1}||([1-9]{1,1}[0-9]{1,9}))$"
  error-message="Error message Mounthly Sequrity"
  options="[{label:'Label 1', value:'val_1'}, {label:'Label 2', value:'val_2'}]"
></flt-input-with-picklist>

Input With Picklist variables

| @api variables | type | values | required | description | | ------------------------- | ------ | ------ | -------- | --------------------------------------------------------------------------------------------- | | name | object | | + | in format {picklist:'value', input:'value'} | | label | object | | - | in format {picklist:'value', input:'value'} | | value | object | | - | in format {picklist:'value', input:'value'} | | placeholder | object | | - | in format {picklist:'value', input:'value'} | | error-message | string | | - | | | required | bool | | - | | | hide-placeholder-picklist | bool | | - | Hide placeholder on picklist in desktop version and if value is exist | | disabled | bool | | - | | | show-dropdown-as-modal | bool | | - | Show modal with selected options | | modal-dimention-start | int | 1280 | - | If showDropdownAsModal is true, by default modal become visible window width less then 1280px | | prefix | html | | - | | | reg-exp | string | | - | | | max-length | int | | - | | | min-value | int | | - | | | options | array | | + | Array of available items with label and value as unique string | | max-value | int | | - | |

Input With Picklist methods

Input With Picklist events

| name | handle | return | description | | ------ | ------------ | ------ | ------------------------------------- | | change | event.detail | object | Return full data of component's state |

Collapsible Section

<flt-collapsible-section title="Details">
  <div class="collapsible-section__body-item">
    <flt-icon icon="oil"></flt-icon>
    <span>Oil</span>
  </div>
  <div class="collapsible-section__body-item">
    <flt-icon icon="fuel"></flt-icon>
    <span>Fuel</span>
  </div>
  <div class="collapsible-section__body-item">
    <flt-icon icon="hgv"></flt-icon>
    <span>Hgv</span>
  </div>
</flt-collapsible-section>

Collapsible Section variables

| @api variables | type | values | required | description | | -------------- | ---- | ------ | -------- | ------------------------------------------------------------------- | | opened | bool | | - | To control section status closed or opened (default - closed) | | title | html | | - | Any html text |

Collapsible Section methods

| @api | params | return type | description | | -------------------- | ------ | ----------- | -------------------- | | handleToggleCollapse | | void | Toggle opened flag |

Collapsible Section slots

| slot | description | | ------- | ----------------------------- | | header | any html element can be there | | default | any html element can be there |

Interfaces

ModalViewer

ModalViewer.showModalWithComponent(element, options) - to show modal window with element inside
ModalViewer.hideModals() - remove all modals

import { ModalViewer } from "fleetcor-lwc";
import { createElement } from "lwc";
import Button from "flt/button";

const btn = createElement("flt-button", { is: Button });
btn.label = "Close";
btn.onclick = () => {
  ModalViewer.hideModals();
};

ModalViewer.showModalWithComponent(btn, { duration: 700, deactiveGlass: true });

Override styles

You can override them as you wish by global css variables as priority.

/* this is aquamarine variables */

:root {
  --flt-tooltip-bg-color: #374151;
  --flt-tooltip-color: #f9fafb;
  --flt-icon-color: #111827;
  --flt-button-primary-bg-color: #3782c8;
  --flt-button-primary-color: #f9fafb;
  --flt-button-primary-disabled-color: #6b7280;
  --flt-button-primary-disabled-bg-color: #f3f4f6;
  --flt-button-secondary-bg-color: #f2d400;
  --flt-button-secondary-color: #111827;
  --flt-button-secondary-disabled-color: #6b7280;
  --flt-button-secondary-disabled-bg-color: #f3f4f6;
  --flt-button-base-bg-color: #ffffff;
  --flt-button-base-color: #111827;
  --flt-button-base-border-color: #111827;
  --flt-button-base-disabled-color: #6b7280;
  --flt-button-base-disabled-bg-color: #f3f4f6;
  --flt-button-base-disabled-border-color: #6b7280;
  --flt-button-link-color: #111827;
  --flt-button-link-disabled-color: #9ca3af;
  --flt-button-link-hover-color: #6b7280;
  --flt-button-x-small-height: 40px;
  --flt-button-x-small-font-size: 14px;
  --flt-button-small-height: 44px;
  --flt-button-small-font-size: 14px;
  --flt-button-medium-height: 52px;
  --flt-button-medium-font-size: 15px;
  --flt-button-large-height: 56px;
  --flt-button-large-font-size: 15px;
  --flt-button-label-padding: 0;
  --flt-button-border-radius: 32px;
  --flt-button-padding: 0 24px;
  --flt-button-gap: 16px;
  --flt-button-fw: 700;
  --flt-checkbox-border-color: #6b7280;
  --flt-checkbox-bg-color: #ffffff;
  --flt-checkbox-agree-color: #59eb9c;
  --flt-checkbox-color: #111827;
  --flt-checkbox-error-color: #ed123d;
  --flt-checkbox-disabled-color: #6b7280;
  --flt-checkbox-disabled-border-color: #6b7280;
  --flt-checkbox-disabled-bg-color: #e5e7eb;
  --flt-checkbox-disabled-agree-color: #9ca3af;
  --flt-checkbox-hover-border-color: #111827;
  --flt-checkbox-hover-bg-color: #f9fafb;
  --flt-checkbox-label-href-color: #3782c8;
  --flt-checkbox-label-href-hover-color: #67cdda;
  --flt-radio-group-color: #111827;
  --flt-radio-group-disabled-color: #6b7280;
  --flt-radio-group-error-color: #ed123d;
  --flt-radio-group-circle-color: #6b7280;
  --flt-radio-group-circle-bg-color: #ffffff;
  --flt-radio-group-circle-hover-color: #111827;
  --flt-radio-group-circle-disabled-color: #9ca3af;
  --flt-radio-group-circle-disabled-bg-color: #e5e7eb;
  --flt-radio-group-circle-selected-hover-color: #52d990;
  --flt-radio-group-circle-selected-color: #59eb9c;
  --flt-radio-group-circle-disabled-selected-color: #d1d5db;
  --flt-radio-group-circle-disabled-selected-bg-color: #ffffff;
  --flt-modal-glass-bgc: rgba(0, 0, 0, 0.4);
  --flt-input-text-color: #111827;
  --flt-input-text-font-weight: 400;
  --flt-input-border-color-active: #6b7280;
  --flt-input-border-color-success: #59eb9c;
  --flt-input-border-color-error: #ed123d;
  --flt-input-border-radius: 12px;
  --flt-input-prefix-gap: 8px;
  --flt-card-bgc: #fff;
  --flt-card-padding: 24px;
  --flt-card-border-radius: 20px;
  --flt-card-box-shadow: (
    0px 2px 3px 0px #0000004d,
    0px 6px 10px 4px #00000026
  );
  --flt-loader-gap: 16px;
  --flt-loader-background: #ffffff;
  --flt-loader-spinner-circle: 80px;
  --flt-loader-spinner-fill-first-part: #ffffff;
  --flt-loader-spinner-fill: #85a2b6;
  --flt-loader-spinner-inner-circle-percent: 88%;
  --flt-loader-spinner-bgc-inner-circle: #ffffff;
  --flt-loader-message-font-size: 16px;
  --flt-loader-message-color: #80828a;
  --flt-radio-group-chips-gap: 12px;
  --flt-radio-group-chips-label-fw: 600;
  --flt-radio-group-chips-color: #111827;
  --flt-radio-group-chips-label-fz: 16px;
  --flt-radio-group-chips-label-lh: 20px;
  --flt-radio-group-chips-label-mb: 4px;
  --flt-radio-group-chips-error-color: #ed123d;
  --flt-radio-group-chips-error-fz: 12px;
  --flt-picklist-view-border-color-selected: #59eb9c;
  --flt-picklist-placeholder-activate-fz: 12px;
  --flt-picklist-placeholder-activate-lh: 16px;
  --flt-picklist-bgc: #ffffff;
  --flt-picklist-border: 1px solid #6b7280;
  --flt-picklist-border-radius: 12px;
  --flt-picklist-wrapper-height: 44px;
  --flt-picklist-wrapper-padding: 0 16px;
  --flt-picklist-error-color: #ed123d;
  --flt-picklist-error-fz: 12px;
  --flt-picklist-placeholder-color: #111827;
  --flt-picklist-placeholder-fz: 16px;
  --flt-picklist-placeholder-lh: 20px;
  --flt-picklist-view-arrow-path-stroke: #4c4c4c;
  --flt-picklist-dropdown-border: none;
  --flt-picklist-dropdown-bgc: #ffffff;
  --flt-picklist-option-padding: 12px 16px;
  --flt-picklist-option-color: #4c4c4c;
  --flt-picklist-dropdown-option-border-bottom-color: #eeeeee;
  --flt-picklist-option-selected-color: #4c4c4c;
  --flt-picklist-dropdown-option-bgc: #f2d400;
  --flt-picklist-option-first-child-padding: 32px 16px 12px;
  --flt-picklist-option-padding: 12px 16px;
  --flt-picklist-dropdown-modal-header-bgc: #f3f4f6;
  --flt-input-phone-border-color-success: #59eb9c;
  --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;
}

Release Notes:

v.3.13.5

Update flt-input-phone component

v.3.13.4

Bug fix flt-input-text component

v.3.13.3

Bug fix flt-input-phone component

v.3.13.2

Bug fix flt-input-phone component

v.3.13.1

Bug fix flt-input-phone and flt-input-text component

v.3.13.0

Update flt-collapsible-section component
Update Demo page

v.3.12.2

Bugfix flt-alert-info

v.3.12.1

Bugfix flt-alert-info

v.3.12.0

Added icons for component flt-icon : question

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

v.3.9.8

Updates for Readme.md

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)

v.3.9.5
- Added new icons: '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'

v.3.9.4
- Bug fix flt-input-text

v.3.9.3
- Bug fix flt-picklist

v.3.9.2
- Bug fix Readmi.md

v.3.9.1
- Bug fix flt-input-with-picklist and flt-picklist

v.3.8.6
- Bug fix visiability of flt-input-phone

v.3.8.5
- Bug fix visiability of flt-input-phone

v.3.8.4
- Bug fix visiability of flt-input-text

v.3.8.3
- Bug fix visiability of flt-picklist

v.3.8.2
- Bug fix visiability of flt-input-phone

v.3.8.1
- Bug fix visiability of flt-picklist

v.3.8.0
- Added new component flt-input-phone
- Updated: flt-input-text, flt-picklist

v.3.7.0
- Added new component flt-picklist

v.3.6.3
- Updated flt-button componentm styles

v.3.6.2
- Updated flt-radio-group-chips componentm styles

v.3.6.1
- Bug fix visiability of flt-loader

v.3.6.0
- Added new component flt-loader

v.3.5.2
- Update modal component with option deactiveGlass

v.3.5.1
- Bug fix with progress component

v.3.5.0
- Added new component flt-card

v.3.4.2
- Bug fix with modal component

v.3.4.1
- Bug fix with modal component

v.3.4.0
- Added Animation util class
- Updated Modal view animation with fadeIn and fadeOut

v.3.3.0
- Added components flt-input-text, flt-input-email, flt-modal
- For modal added new interface ModalViewer for dynamically creation modals
- Update button styles gap as variable

v.3.0.1
- Bug fix with firstChild for tooltip component

v.3.0.0
- Added flt-progress-step and flt-radio-group-chips components
- Update .css overriding of styles
- Removed loader
- Update all dependencies webpack, lwc, sass

v.2.18.0
- Added iconLeft and iconRight slot's place

v.2.17.0
- Added new icon version search

v.2.16.0
- Update flt-button style with icons distanse

v.2.15.0
- Added new icon version check

v.2.14.0
- Added new icon version sign

v.2.13.0
- Added new icon version eye

v.2.12.0
- Added slot functionality to Button component

v.2.11.1
- Fixed compression circle for Radio Item component

v.2.11.0
- Update option for Radio Group component
- Added key element for option to display HTMLObject for selected item at bottom side

v.2.10.0
- Added to direction for Radio Group component with values row or column
- Update to label type in options to html text

v.2.9.1
- Checkbox label rendared bug fix

v.2.9.0
- Added css variable for button padding value

v.2.8.0
- Added css variable for button border radius value

v.2.7.6
- Tooltip bug fix with render content

v.2.7.5
- Tooltip bug fix with render content

v.2.7.4
- Tooltip bug fix with render content

v.2.7.3
- Added required class marker for the checkbox component

v.2.7.2
- Added variant for the RadioGroupIcon: 'hide-checkbox'

v.2.7.1
- Added icons: 'world', 'map-pin'

v.2.7.0
- Added size medium for checkbox component

v.2.6.2
- Updated close icon

v.2.6.1
- Update documentation

v.2.6.0
- Added new component flt-radio-group-icon (don't use flt-radio-group with icons)

v.2.5.0
- Available icons for flt-radio-group

v.2.4.2
- Bug fix at flt-radio-group

v.2.4.1
- Change margin for items at flt-radio-group

v.2.4.0
- Added Component flt-radio-group

v.2.3.2
- Change icon style at checkbox

v.2.3.1
- Change links at checkbox's label

v.2.3.0
- Added label fire events to checkbox

v.2.2.2
- Bug fix checkbox link underline text

v.2.2.1
- Bug fix expose flt/checkbox

v.2.2.0
- Added Component flt-checkbox

v.2.1.1
- Added to Button new type secondary
- Added to Button new size xs
- Bug fix loader, now you can override available theme with mixins

v.2.0.1
- Bug fix export loader

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Fleetcor LWC

About

How to install

Components

Radio Group Icon

Radio Group Icon variables

Radio Group Icon methods

Radio Group Icon events

Radio Group

Radio Group variables

Radio Group methods

Radio Group events

Checkbox

Checkbox variables

Checkbox methods

Checkbox events

Button

Button variables

Button slot

Icon

Icon variables

Card

Card slot

Tooltip

Tooltip variables

Tooltip slot

Loader

Loader slot

Modal

Modal variables

Modal slot

Progress Step

Progress Step variables

Alert Info

Alert Info variables

Alert Info slots

Radio Group Chips

Radio Group Chips variables

Radio Group Chips methods

Radio Group Chips events

Picklist Chips

Picklist variables

Picklist methods

Picklist events

Input Text

Input Text variables

Input Text methods

Input Text events

Input Email

Input Phone

Input Phone variables

Input Phone methods

Input Phone events

Input With Picklist

Input With Picklist variables

Input With Picklist methods

Input With Picklist events

Collapsible Section

Collapsible Section variables

Collapsible Section methods

Collapsible Section slots

Interfaces

ModalViewer

Override styles

Release Notes: