@aquera/nile-elements 0.0.38 → 0.0.40

package/src/nile-tooltip/nile-tooltip.css.ts

@@ -1,18 +1,17 @@
 /**
-* Copyright Aquera Inc 2023
-*
-* This source code is licensed under the BSD-3-Clause license found in the
-* LICENSE file in the root directory of this source tree.
-*/
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 
-import {css} from 'lit-element';
+import { css } from 'lit-element';
 
 /**
  * Tooltip CSS
  */
 export const styles = css`
-
-:host {
+  :host {
     --max-width: 20rem;
     --hide-delay: 0ms;
     --show-delay: 150ms;
@@ -52,14 +51,20 @@ export const styles = css`
     max-width: var(--max-width);
     border-radius: 0.25rem;
     background-color: hsl(240 3.7% 15.9%);
-    font-size: 0.875rem;
+    font-size: 10.24px;
     font-weight: 400;
-    line-height: 1;
+    line-height: 10.24px;
     color: hsl(0, 0%, 100%);
     padding: 0.25rem 0.5rem;
     pointer-events: none;
     word-break: break-word;
   }
+
+  .tooltip__body--large {
+    font-size: 12px;
+    line-height: 12px;
+    font-weight: 500;
+  }
 `;
 
 export default [styles];

package/src/nile-tooltip/nile-tooltip.ts

@@ -5,13 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {LitElement, CSSResultArray, TemplateResult} from 'lit-element';
-import {styles} from './nile-tooltip.css';
+import { LitElement, CSSResultArray, TemplateResult } from 'lit-element';
+import { styles } from './nile-tooltip.css';
 import '../nile-popup/nile-popup';
 import { animateTo, parseDuration, stopAnimations } from '../internal/animate';
 import { classMap } from 'lit/directives/class-map.js';
 import { customElement, property, query } from 'lit/decorators.js';
-import { getAnimation, setDefaultAnimation } from '../utilities/animation-registry';
+import {
+  getAnimation,
+  setDefaultAnimation,
+} from '../utilities/animation-registry';
 import { html } from 'lit';
 // import { LocalizeController } from '../utilities/localize';
 import { waitForEvent } from '../internal/event';
@@ -27,15 +30,13 @@ import type NilePopup from '../nile-popup/nile-popup';
  */
 @customElement('nile-tooltip')
 export class NileTooltip extends NileElement {
-
-	/**
-	 * The styles for Tooltip
-	 * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
-	 */
-	public static get styles(): CSSResultArray {
-		return [styles];
-	}
-
+  /**
+   * The styles for Tooltip
+   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+   */
+  public static get styles(): CSSResultArray {
+    return [styles];
+  }
 
   private hoverTimeout: number;
   // private readonly localize = new LocalizeController(this);
@@ -47,6 +48,9 @@ export class NileTooltip extends NileElement {
   /** The tooltip's content. If you need to display HTML, use the `content` slot instead. */
   @property({ type: String, reflect: true }) content = '';
 
+  /** Size Property to decide the tool tip size */
+  @property({ reflect: true }) size: 'small' | 'large' = 'small';
+
   /**
    * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip
    * inside of the viewport.
@@ -162,7 +166,9 @@ export class NileTooltip extends NileElement {
 
   private handleMouseOver() {
     if (this.hasTrigger('hover')) {
-      const delay = parseDuration(getComputedStyle(this).getPropertyValue('--show-delay'));
+      const delay = parseDuration(
+        getComputedStyle(this).getPropertyValue('--show-delay')
+      );
       clearTimeout(this.hoverTimeout);
       this.hoverTimeout = window.setTimeout(() => this.show(), delay);
     }
@@ -170,7 +176,9 @@ export class NileTooltip extends NileElement {
 
   private handleMouseOut() {
     if (this.hasTrigger('hover')) {
-      const delay = parseDuration(getComputedStyle(this).getPropertyValue('--hide-delay'));
+      const delay = parseDuration(
+        getComputedStyle(this).getPropertyValue('--hide-delay')
+      );
       clearTimeout(this.hoverTimeout);
       this.hoverTimeout = window.setTimeout(() => this.hide(), delay);
     }
@@ -194,7 +202,9 @@ export class NileTooltip extends NileElement {
       await stopAnimations(this.body);
       this.body.hidden = false;
       this.popup.active = true;
-      const { keyframes, options } = getAnimation(this, 'tooltip.show', { dir: '' });
+      const { keyframes, options } = getAnimation(this, 'tooltip.show', {
+        dir: '',
+      });
       await animateTo(this.popup.popup, keyframes, options);
 
       this.emit('nile-after-show');
@@ -203,7 +213,9 @@ export class NileTooltip extends NileElement {
       this.emit('nile-hide');
 
       await stopAnimations(this.body);
-      const { keyframes, options } = getAnimation(this, 'tooltip.hide', { dir: '' });
+      const { keyframes, options } = getAnimation(this, 'tooltip.hide', {
+        dir: '',
+      });
       await animateTo(this.popup.popup, keyframes, options);
       this.popup.active = false;
       this.body.hidden = true;
@@ -229,7 +241,7 @@ export class NileTooltip extends NileElement {
 
   /** Shows the tooltip. */
   async show() {
-    if (this.open || !(this.content?.trim().length)) {
+    if (this.open || !this.content?.trim().length) {
       return undefined;
     }
 
@@ -257,7 +269,7 @@ export class NileTooltip extends NileElement {
         "
         class=${classMap({
           tooltip: true,
-          'tooltip--open': this.open
+          'tooltip--open': this.open,
         })}
         placement=${this.placement}
         distance=${this.distance}
@@ -273,7 +285,10 @@ export class NileTooltip extends NileElement {
           name="content"
           part="body"
           id="tooltip"
-          class="tooltip__body"
+          class=${classMap({
+            tooltip__body: true,
+            'tooltip__body--large': this.size === 'large',
+          })}
           role="tooltip"
           aria-live=${this.open ? 'polite' : 'off'}
         >
@@ -287,17 +302,17 @@ export class NileTooltip extends NileElement {
 setDefaultAnimation('tooltip.show', {
   keyframes: [
     { opacity: 0, scale: 0.8 },
-    { opacity: 1, scale: 1 }
+    { opacity: 1, scale: 1 },
   ],
-  options: { duration: 150, easing: 'ease' }
+  options: { duration: 150, easing: 'ease' },
 });
 
 setDefaultAnimation('tooltip.hide', {
   keyframes: [
     { opacity: 1, scale: 1 },
-    { opacity: 0, scale: 0.8 }
+    { opacity: 0, scale: 0.8 },
   ],
-  options: { duration: 150, easing: 'ease' }
+  options: { duration: 150, easing: 'ease' },
 });
 
 export default NileTooltip;