fleetcor-lwc 1.4.0 → 1.4.2

package/README.md

@@ -68,22 +68,17 @@ Icon:
 
 <flt-icon icon="arrow-left"></flt-icon>
 
-arrow-left  | ev        | carwash       | car               | 
-van         | unleaded  | fuel          | driver            | 
-vehicle     | both      | shared-card   | ev-and-fuel       |
-oil         | key       | blocked       | multiple-users    | 
-arrow-right |
-...
+arrow-left | ev | carwash | car | van | unleaded | fuel | driver | vehicle |
+both | shared-card | ev-and-fuel | oil | key | blocked | multiple-users |
+arrow-right | ...
 ```
 
 ```html
 Tooltip:
 
-<flt-tooltip 
-    content="Text description info"
-    corner="12">
-    <!-- Any html element -->
-    <flt-icon icon="arrow-left"></flt-icon>
+<flt-tooltip content="Text description info" corner="12">
+  <!-- Any html element -->
+  <flt-icon icon="arrow-left"></flt-icon>
 </flt-tooltip>
 
 ...
@@ -134,6 +129,16 @@ $FLT_BUTTON_LINK_HOVER_COLOR: var(--flt-button-link-hover-color, #6b7280);
 
 ## Release Notes:
 
+- v.1.4.2
+  - Bug fix selectors conflicts
+
+---
+
+- v.1.4.1
+  - Bug fix with empty content and svg max width
+
+---
+
 - v.1.4.0
   - Added Component `flt-tooltip`
 

package/frontend/components/flt/tooltip/tooltip.html

@@ -1,11 +1,11 @@
 <template lwc:render-mode="light">
-    <div class="tooltip" onmouseover={over} ontouchstart={over} onmouseout={out} ontouchend={out}>
+    <div class="flt-tooltip" onmouseover={over} ontouchstart={over} onmouseout={out} ontouchend={out}>
         <slot></slot>
-        <div class={tooltipVisibility} style={conentStyle}>
-            <svg class="tooltip__svg" height={svgH} width={svgW} style={svgStyle}>
-                <path class="tooltip__path" d={svgD}></path>
+        <div if:true={content} class={tooltipVisibility} style={conentStyle}>
+            <svg class="flt-tooltip__svg" height={svgH} width={svgW} style={svgStyle}>
+                <path class="flt-tooltip__path" d={svgD}></path>
             </svg>
-            <p class="tooltip__text" style={textStyle}></p>
+            <p class="flt-tooltip__text" style={textStyle}></p>
         </div>
     </div>
 </template>

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

@@ -56,7 +56,7 @@ export default class Tooltip extends LightningElement {
     }
 
     get tooltipVisibility() {
-        return this.active ? 'tooltip__content tooltip__content_visible' : 'tooltip__content'
+        return this.active ? 'flt-tooltip__content flt-tooltip__content_visible' : 'flt-tooltip__content'
     }
 
     get svgD() {
@@ -200,24 +200,28 @@ export default class Tooltip extends LightningElement {
     }
 
     connectedCallback() {
-        this.resizeObserver = new ResizeObserver(this.update.bind(this))
+        if (this.content) {
+            this.resizeObserver = new ResizeObserver(this.update.bind(this))
+        }
     }
 
     update() {
-        const text = this.firstChild.querySelector('.tooltip__text')
-        text.innerHTML = this.content
-        this.createTooltip()
+        if (this.content) {
+            const text = this.firstChild.querySelector('.flt-tooltip__text')
+            text.innerHTML = this.content
+            this.createTooltip()
+        }
     }
 
     over() {
-        if (!this.active) {
+        if (!this.active && this.content) {
             this.active = true
             this.createTooltip()
         }
     }
 
     out() {
-        if (this.active) {
+        if (this.active && this.content) {
             this.active = false
             this.childElementRect = this.firstChild.firstChild.getBoundingClientRect()
             this.leftPosition = (this.childElementRect.width - this.svgW) / 2
@@ -228,7 +232,7 @@ export default class Tooltip extends LightningElement {
 
     createTooltip() {
         // 1. find width of tooltip
-        const text = this.firstChild.querySelector('.tooltip__text')
+        const text = this.firstChild.querySelector('.flt-tooltip__text')
         this.minimalWidth = getLineWidth(text)
         if (this.minimalWidth < this.maxWidth) {
             this.minimalWidth = this.minimalWidth + this.paddingX * 2 + 2 * this.delta
@@ -262,7 +266,9 @@ export default class Tooltip extends LightningElement {
     }
 
     renderedCallback() {
-        this.resizeObserver.observe(this.firstChild)
+        if (this.content) {
+            this.resizeObserver.observe(this.firstChild)
+        }
     }
 }
 

package/frontend/components/flt/tooltip/tooltip.scss

@@ -1,7 +1,7 @@
 @import './../../../common/mixins_aquamarine';
 /* mixins */
 
-.tooltip {
+.flt-tooltip {
     display: inline-block;
     cursor: pointer;
     position: relative;
@@ -15,6 +15,7 @@
         opacity: 0;
         font-size: 16px;
         line-height: 1.3;
+        max-width: initial;
         transition: opacity 0.3s ease-out;
 
         &_visible {
@@ -34,6 +35,7 @@
 
     &__svg {
         position: absolute;
+        max-width: initial;
     }
 
     &__path {

package/package.json

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