fleetcor-lwc 3.9.7 → 3.9.9

package/README.md

@@ -31,6 +31,9 @@ Add / update `lwc.config.json` file in your project
 
 ## Components
 
+<details open>
+<summary>Click to expand/collapse Components</summary>
+
 ### Radio Group Icon
 
 ```html
@@ -43,9 +46,11 @@ Add / update `lwc.config.json` file in your project
   options="[{icon:'///icon-path', value:'London'}, {icon:'///icon-path', value:'Leon'}]"
   value="London"
 ></flt-radio-group-icon>
-...
 ```
 
+<details>
+<summary>Details</summary>
+
 #### Radio Group Icon variables
 
 | @api          | type   | values | required | description                                                                               |
@@ -72,6 +77,9 @@ 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>
+
+---
 
 ### Radio Group
 
@@ -87,9 +95,11 @@ Add / update `lwc.config.json` file in your project
   value="London"
   label="City"
 ></flt-radio-group>
-...
 ```
 
+<details>
+<summary>Details</summary>
+
 #### Radio Group variables
 
 | @api variables | type   | values            | required | description                                                                                                                                            |
@@ -118,6 +128,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
 
@@ -131,9 +146,12 @@ Add / update `lwc.config.json` file in your project
   value="true"
   label="Next"
 ></flt-checkbox>
-...
 ```
 
+
+<details>
+<summary>Details</summary>
+
 #### Checkbox variables
 
 | @api variables | type   | values              | required | description                                                                                                                              |
@@ -160,6 +178,10 @@ 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
 
@@ -174,9 +196,11 @@ Add / update `lwc.config.json` file in your project
 >
   <!-- Any html element -->
 </flt-button>
-...
 ```
 
+<details>
+<summary>Details</summary>
+
 #### Button variables
 
 | @api variables | type   | values                           | required | description                     |
@@ -195,6 +219,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
 
@@ -202,11 +231,18 @@ Add / update `lwc.config.json` file in your project
 <flt-icon icon="arrow-left"></flt-icon>
 ```
 
+<details>
+<summary>Details</summary>
+
 #### 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` | -        |             |
+</details>
+
+---
+
 
 ### Card
 
@@ -214,11 +250,18 @@ Add / update `lwc.config.json` file in your project
 <flt-card></flt-card>
 ```
 
+<details>
+<summary>Details</summary>
+
 #### Card slot
 
 | slot    | description                   |
 | ------- | ----------------------------- |
 | default | any html element can be there |
+</details>
+
+---
+
 
 ### Tooltip
 
@@ -227,10 +270,11 @@ Add / update `lwc.config.json` file in your project
   <!-- Any html element -->
   <flt-icon icon="arrow-left"></flt-icon>
 </flt-tooltip>
-
-...
 ```
 
+<details>
+<summary>Details</summary>
+
 #### Tooltip variables
 
 | @api variables | type | values | required | description                       |
@@ -243,6 +287,11 @@ Add / update `lwc.config.json` file in your project
 | slot    | description                   |
 | ------- | ----------------------------- |
 | default | any html element can be there |
+</details>
+
+---
+
+
 
 ### Loader
 
@@ -250,14 +299,20 @@ Add / update `lwc.config.json` file in your project
 <flt-loader>
   <flt-icon icon="arrow-left"></flt-icon>
 </flt-loader>
-...
 ```
 
+<details>
+<summary>Details</summary>
+
 #### Loader slot
 
 | slot    | description                   |
 | ------- | ----------------------------- |
 | default | any html element can be there |
+</details>
+
+---
+
 
 ### Modal
 
@@ -265,10 +320,11 @@ Add / update `lwc.config.json` file in your project
 <flt-modal deactive-glass>
   <flt-icon icon="arrow-left"></flt-icon>
 </flt-modal>
-
-...
 ```
 
+<details>
+<summary>Details</summary>
+
 #### Modal variables
 
 | @api variables | type | values | required | description                             |
@@ -280,14 +336,20 @@ Add / update `lwc.config.json` file in your project
 | slot    | description                   |
 | ------- | ----------------------------- |
 | default | any html element can be there |
+</details>
+
+---
+
 
 ### Progress Step
 
 ```html
 <flt-progress-step title="Contacts" total="8" current="1"></flt-progress-step>
-...
 ```
 
+<details>
+<summary>Details</summary>
+
 #### Progress Step variables
 
 | @api variables | type   | values | required | description                                    |
@@ -295,6 +357,11 @@ 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>
+
+---
+
+
 
 ### Radio Group Chips
 
@@ -308,9 +375,11 @@ Add / update `lwc.config.json` file in your project
   options="[{label:'London', value:'London'}, {label:'Leon', value:'Leon'}]"
 >
 </flt-radio-group-chips>
-...
 ```
 
+<details>
+<summary>Details</summary>
+
 #### Radio Group Chips variables
 
 | @api variables | type   | values    | required | description                                                        |
@@ -338,6 +407,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
 
@@ -352,9 +426,11 @@ Add / update `lwc.config.json` file in your project
   options="[{label:'London', value:'London'}, {label:'Leon', value:'Leon'}]"
 >
 </flt-picklist>
-...
 ```
 
+<details>
+<summary>Details</summary>
+
 #### Picklist variables
 
 | @api variables         | type   | values   | required | description                                                                                   |
@@ -385,6 +461,10 @@ 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
 
@@ -417,9 +497,11 @@ Add / update `lwc.config.json` file in your project
   type="text"
   placeholde-visible
 ></flt-input-text>
-...
 ```
 
+<details>
+<summary>Details</summary>
+
 #### Input Text variables
 
 | @api variables     | type   | values       | required | description |
@@ -454,6 +536,10 @@ 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
 
@@ -470,7 +556,6 @@ This component fully extends from `Input Text`
   type="email"
   placeholde-visible
 ></flt-input-email>
-...
 ```
 
 ### Input Phone
@@ -484,9 +569,11 @@ This component fully extends from `Input Text`
   placeholder="Phone Number"
   error-message="Please enter a valid phone"
 ></flt-input-phone>
-...
 ```
 
+<details>
+<summary>Details</summary>
+
 #### Input Phone variables
 
 | @api variables         | type   | values | required | description                                                                                   |
@@ -517,6 +604,9 @@ 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>
+
+---
 
 ### Input With Picklist
 
@@ -537,9 +627,11 @@ This component fully extends from `Input Text`
   error-message="Error message Mounthly Sequrity"
   options="[{label:'Label 1', value:'val_1'}, {label:'Label 2', value:'val_2'}]"
 ></flt-input-with-picklist>
-...
 ```
 
+<details>
+<summary>Details</summary>
+
 #### Input With Picklist variables
 
 | @api variables            | type   | values | required | description                                                                                   |
@@ -574,6 +666,43 @@ This component fully extends from `Input Text`
 | name   | handle       | return | description                           |
 | ------ | ------------ | ------ | ------------------------------------- |
 | change | event.detail | object | Return full data of component's state |
+</details>
+
+</details>
+
+---
+
+### Collapsible Section
+
+```html
+<flt-collapsible-section>
+  <div slot="title">Collapsible Section Title</div>
+  <div>
+      <div>Any Content...</div>
+  </div>
+</flt-collapsible-section>
+```
+
+<details>
+<summary>Details</summary>
+
+#### 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) |
+
+#### Collapsible Section slots
+
+| slot      | description                                    |
+| --------- | ---------------------------------------------- |
+| default   | any html element can be there                  |
+| title     | any html element can be there                  |
+</details>
+
+---
+
 
 ## Interfaces
 
@@ -596,10 +725,15 @@ btn.onclick = () => {
 ModalViewer.showModalWithComponent(btn, { duration: 700, deactiveGlass: true });
 ```
 
+---
+
 ## Override styles
 
 You can override them as you wish by global css variables as priority.
 
+<details>
+<summary>Click to expand/collapse</summary>
+
 ```css
 /* this is aquamarine variables */
 
@@ -724,111 +858,179 @@ You can override them as you wish by global css variables as priority.
   --flt-input-with-picklist-border-color-error: #ed123d;
 }
 ```
+</details>
+
+---
 
 ## Release Notes:
 
+<details>
+<summary>Click to expand/collapse</summary>
+
+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
@@ -1036,3 +1238,5 @@ You can override them as you wish by global css variables as priority.
   - Added CheckboxElement class
   - Added hgv icon
   - Added $FLT_BUTTON_LABEL_PADDING constant
+
+</details>

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

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

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

@@ -0,0 +1,43 @@
+import { api } from 'lwc';
+import { BaseElement } from 'fleetcor-lwc'
+import './collapsibleSection.scss';
+
+export default class CollapsibleSection extends BaseElement {
+    titleSlotNonEmpty;
+
+    @api closed = false;
+    @api styleOff = false;
+
+    get containerWrapperClass() {
+        return this.generateClassNameList({
+            'collapsible-section__container-wrapper': true,
+            'collapsible-section__container-wrapper_expanded': !this.closed
+        })
+    }
+
+    get titleClass() {
+        if (this.styleOff) {
+            return '';
+        }
+        return this.generateClassNameList({
+            'collapsible-section_title': this.titleSlotNonEmpty,
+            'collapsible-section_title-active': !this.closed && this.titleSlotNonEmpty
+        });
+    }
+
+
+    renderedCallback() {
+        const titleEmptySlot = this.querySelector('.title-empty-slot');
+        if (titleEmptySlot) {
+            this.titleSlotNonEmpty = false;
+        } else {
+            this.titleSlotNonEmpty = true;
+        }
+    }
+
+    toggleWrapper() {
+        if (this.titleSlotNonEmpty) {
+            this.closed = !this.closed;
+        }
+    }
+}

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

@@ -0,0 +1,51 @@
+.collapsible-section {
+    &__container {
+        animation: fadeOut 0.5s ease-in;
+
+        &-wrapper {
+            display: grid;
+            grid-template-rows: 0fr;
+            transition: grid-template-rows 500ms, margin-top 500ms;
+
+            &_expanded {
+                grid-template-rows: 1fr;
+            }
+        }
+
+        &-wrapper > div {
+            overflow: hidden;
+            margin-top: 0px;
+        }
+    }
+
+    &_title {
+        font-size: 16px;
+        font-weight: 700;
+        padding-bottom: 12px;
+
+        cursor: pointer;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        &:after{
+            content:'';
+            display: inline-block;
+            margin-left: .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;
+        }
+
+        &-active{
+            &:after{
+                transform: rotate(135deg);
+                margin-top: 2px;
+            }
+        }
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "fleetcor-lwc",
-    "version": "3.9.7",
+    "version": "3.9.9",
     "description": "LWC framework by Fleetcor",
     "repository": {
         "type": "git",