@aquera/nile-elements 0.1.32-beta-1.1 → 0.1.32-beta-1.3

package/dist/src/nile-tooltip/nile-tooltip.css.js

@@ -9,119 +9,60 @@ import { css } from 'lit';
  * Tooltip CSS
  */
 export const styles = css `
-
-
-:host {
-      position: relative;
-      display: inline-block;
-    }
-
-    .tooltip {
-      position: fixed;
-      z-index: 1000;
-      background-color: var(--nile-tooltip-color-background, #333);
-      color: var(--nile-colors-white-base, #fff);
-      padding: 6px 10px;
-      border-radius: 4px;
-      font-size: var(--nile-tooltip-font-size-sm, 14px);
-      line-height: var(--nile-tooltip-line-height-sm, 1.5);
-      opacity: 0;
-      transition: opacity 0.2s, transform 0.2s;
-      pointer-events: none;
-      white-space: nowrap;
-      visibility: hidden;
-      transform: scale(0.95);
-      transition: opacity 0.2s ease-out, transform 0.2s ease-out;
-    }
-
-    .tooltip[open] {
-  opacity: 1;
-  transform: scale(1);
-}
-
-    :host([open]) .tooltip {
-      opacity: 1;
-      visibility: visible;
-      pointer-events: auto;
-    }
-
-    .tooltip__body--large {
-      font-size: var(--nile-type-scale-4, 16px);
-      line-height: var(--nile-tooltip-line-height-lg, 1.75);
-    }
-
-    /* Tooltip Arrow */
-    .tooltip::after {
-      content: '';
-      position: absolute;
-      width: 0;
-      height: 0;
-      border-style: solid;
-    }
-
-    /* Basic Arrow Positions */
-    .tooltip[data-placement^="top"]::after {
-      bottom: -6px;
-      border-width: 6px 6px 0 6px;
-      border-color: var(--nile-tooltip-color-background, #333) transparent transparent transparent;
-    }
-
-    .tooltip[data-placement^="bottom"]::after {
-      top: -6px;
-      border-width: 0 6px 6px 6px;
-      border-color: transparent transparent var(--nile-tooltip-color-background, #333) transparent;
-    }
-
-    .tooltip[data-placement^="left"]::after {
-      right: -6px;
-      border-width: 6px 0 6px 6px;
-      border-color: transparent transparent transparent var(--nile-tooltip-color-background, #333);
-    }
-
-    .tooltip[data-placement^="right"]::after {
-      left: -6px;
-      border-width: 6px 6px 6px 0;
-      border-color: transparent var(--nile-tooltip-color-background, #333) transparent transparent;
-    }
-
-    /* Arrow Horizontal Alignment for top/bottom placements */
-    .tooltip[data-placement="top"]::after,
-    .tooltip[data-placement="bottom"]::after {
-      left: 50%;
-      transform: translateX(-50%);
-    }
-
-    .tooltip[data-placement="top-start"]::after,
-    .tooltip[data-placement="bottom-start"]::after {
-      left: 12px;
-    }
-
-    .tooltip[data-placement="top-end"]::after,
-    .tooltip[data-placement="bottom-end"]::after {
-      right: 12px;
-      left: auto;
-    }
-
-    /* Arrow Vertical Alignment for left/right placements */
-    .tooltip[data-placement="left"]::after,
-    .tooltip[data-placement="right"]::after {
-      top: 50%;
-      transform: translateY(-50%);
-    }
-
-    .tooltip[data-placement="left-start"]::after,
-    .tooltip[data-placement="right-start"]::after {
-      top: 12px;
-      transform: none;
-    }
-
-    .tooltip[data-placement="left-end"]::after,
-    .tooltip[data-placement="right-end"]::after {
-      bottom: 12px;
-      top: auto;
-      transform: none;
-    }
-  
+  :host {
+    --max-width: 20rem;
+    --hide-delay: 0ms;
+    --show-delay: 150ms;
+
+    display: contents;
+  }
+
+  .tooltip {
+    --arrow-size: 6px;
+    --arrow-color: var(--nile-tooltip-color-background);
+  }
+
+  .tooltip::part(popup) {
+    pointer-events: none;
+    z-index: 1000;
+  }
+
+  .tooltip[placement^='top']::part(popup) {
+    transform-origin: bottom;
+  }
+
+  .tooltip[placement^='bottom']::part(popup) {
+    transform-origin: top;
+  }
+
+  .tooltip[placement^='left']::part(popup) {
+    transform-origin: right;
+  }
+
+  .tooltip[placement^='right']::part(popup) {
+    transform-origin: left;
+  }
+
+  .tooltip__body {
+    display: block;
+    width: max-content;
+    max-width: var(--max-width);
+    border-radius: 4px;
+    background-color: var(--nile-tooltip-color-background);
+    font-size: var(--nile-tooltip-font-size-sm);
+    font-weight: var(--nile-tooltip-font-weight-sm);
+    line-height: var(--nile-tooltip-line-height-sm);
+    padding: var(--nile-tooltip-padding-y) var(--nile-tooltip-padding-x);
+    color: var(--nile-colors-white-base);
+    pointer-events: none;
+    word-break: break-word;
+  }
+
+  .tooltip__body--large {
+    font-size: var(--nile-tooltip-font-size-lg);
+    line-height: var(--nile-tooltip-line-height-lg);
+    font-weight: var(--nile-tooltip-font-weight-lg);
+  }
 `;
 export default [styles];
 //# sourceMappingURL=nile-tooltip.css.js.map

package/dist/src/nile-tooltip/nile-tooltip.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-tooltip.css.js","sourceRoot":"","sources":["../../../src/nile-tooltip/nile-tooltip.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkHxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Tooltip CSS\n */\nexport const styles = css`\n\n\n:host {\n      position: relative;\n      display: inline-block;\n    }\n\n    .tooltip {\n      position: fixed;\n      z-index: 1000;\n      background-color: var(--nile-tooltip-color-background, #333);\n      color: var(--nile-colors-white-base, #fff);\n      padding: 6px 10px;\n      border-radius: 4px;\n      font-size: var(--nile-tooltip-font-size-sm, 14px);\n      line-height: var(--nile-tooltip-line-height-sm, 1.5);\n      opacity: 0;\n      transition: opacity 0.2s, transform 0.2s;\n      pointer-events: none;\n      white-space: nowrap;\n      visibility: hidden;\n      transform: scale(0.95);\n      transition: opacity 0.2s ease-out, transform 0.2s ease-out;\n    }\n\n    .tooltip[open] {\n  opacity: 1;\n  transform: scale(1);\n}\n\n    :host([open]) .tooltip {\n      opacity: 1;\n      visibility: visible;\n      pointer-events: auto;\n    }\n\n    .tooltip__body--large {\n      font-size: var(--nile-type-scale-4, 16px);\n      line-height: var(--nile-tooltip-line-height-lg, 1.75);\n    }\n\n    /* Tooltip Arrow */\n    .tooltip::after {\n      content: '';\n      position: absolute;\n      width: 0;\n      height: 0;\n      border-style: solid;\n    }\n\n    /* Basic Arrow Positions */\n    .tooltip[data-placement^=\"top\"]::after {\n      bottom: -6px;\n      border-width: 6px 6px 0 6px;\n      border-color: var(--nile-tooltip-color-background, #333) transparent transparent transparent;\n    }\n\n    .tooltip[data-placement^=\"bottom\"]::after {\n      top: -6px;\n      border-width: 0 6px 6px 6px;\n      border-color: transparent transparent var(--nile-tooltip-color-background, #333) transparent;\n    }\n\n    .tooltip[data-placement^=\"left\"]::after {\n      right: -6px;\n      border-width: 6px 0 6px 6px;\n      border-color: transparent transparent transparent var(--nile-tooltip-color-background, #333);\n    }\n\n    .tooltip[data-placement^=\"right\"]::after {\n      left: -6px;\n      border-width: 6px 6px 6px 0;\n      border-color: transparent var(--nile-tooltip-color-background, #333) transparent transparent;\n    }\n\n    /* Arrow Horizontal Alignment for top/bottom placements */\n    .tooltip[data-placement=\"top\"]::after,\n    .tooltip[data-placement=\"bottom\"]::after {\n      left: 50%;\n      transform: translateX(-50%);\n    }\n\n    .tooltip[data-placement=\"top-start\"]::after,\n    .tooltip[data-placement=\"bottom-start\"]::after {\n      left: 12px;\n    }\n\n    .tooltip[data-placement=\"top-end\"]::after,\n    .tooltip[data-placement=\"bottom-end\"]::after {\n      right: 12px;\n      left: auto;\n    }\n\n    /* Arrow Vertical Alignment for left/right placements */\n    .tooltip[data-placement=\"left\"]::after,\n    .tooltip[data-placement=\"right\"]::after {\n      top: 50%;\n      transform: translateY(-50%);\n    }\n\n    .tooltip[data-placement=\"left-start\"]::after,\n    .tooltip[data-placement=\"right-start\"]::after {\n      top: 12px;\n      transform: none;\n    }\n\n    .tooltip[data-placement=\"left-end\"]::after,\n    .tooltip[data-placement=\"right-end\"]::after {\n      bottom: 12px;\n      top: auto;\n      transform: none;\n    }\n  \n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-tooltip.css.js","sourceRoot":"","sources":["../../../src/nile-tooltip/nile-tooltip.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuDxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Tooltip CSS\n */\nexport const styles = css`\n  :host {\n    --max-width: 20rem;\n    --hide-delay: 0ms;\n    --show-delay: 150ms;\n\n    display: contents;\n  }\n\n  .tooltip {\n    --arrow-size: 6px;\n    --arrow-color: var(--nile-tooltip-color-background);\n  }\n\n  .tooltip::part(popup) {\n    pointer-events: none;\n    z-index: 1000;\n  }\n\n  .tooltip[placement^='top']::part(popup) {\n    transform-origin: bottom;\n  }\n\n  .tooltip[placement^='bottom']::part(popup) {\n    transform-origin: top;\n  }\n\n  .tooltip[placement^='left']::part(popup) {\n    transform-origin: right;\n  }\n\n  .tooltip[placement^='right']::part(popup) {\n    transform-origin: left;\n  }\n\n  .tooltip__body {\n    display: block;\n    width: max-content;\n    max-width: var(--max-width);\n    border-radius: 4px;\n    background-color: var(--nile-tooltip-color-background);\n    font-size: var(--nile-tooltip-font-size-sm);\n    font-weight: var(--nile-tooltip-font-weight-sm);\n    line-height: var(--nile-tooltip-line-height-sm);\n    padding: var(--nile-tooltip-padding-y) var(--nile-tooltip-padding-x);\n    color: var(--nile-colors-white-base);\n    pointer-events: none;\n    word-break: break-word;\n  }\n\n  .tooltip__body--large {\n    font-size: var(--nile-tooltip-font-size-lg);\n    line-height: var(--nile-tooltip-line-height-lg);\n    font-weight: var(--nile-tooltip-font-weight-lg);\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -1,40 +1,80 @@
-import { CSSResultArray } from 'lit';
+/**
+ * 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 { CSSResultArray, TemplateResult } from 'lit';
+import '../nile-popup/nile-popup';
 import NileElement from '../internal/nile-element';
-type TooltipPlacement = 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
+import type NilePopup from '../nile-popup/nile-popup';
+/**
+ * Nile icon component.
+ *
+ * @tag nile-tooltip
+ *
+ */
 export declare 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]`
+     */
+    static get styles(): CSSResultArray;
+    private hoverTimeout;
+    defaultSlot: HTMLSlotElement;
+    body: HTMLElement;
+    popup: NilePopup;
+    /** The tooltip's content. If you need to display HTML, use the `content` slot instead. */
     content: string;
+    /** Size Property to decide the tool tip size */
     size: 'small' | 'large';
-    placement: TooltipPlacement;
+    /**
+     * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip
+     * inside of the viewport.
+     */
+    placement: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
+    /** Disables the tooltip so it won't show when triggered. */
     disabled: boolean;
-    open: boolean;
-    trigger: string;
+    /** The distance in pixels from which to offset the tooltip away from its target. */
     distance: number;
+    /** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */
+    open: boolean;
+    /** The distance in pixels from which to offset the tooltip along its target. */
     skidding: number;
+    /**
+     * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple
+     * options can be passed by separating them with a space. When manual is used, the tooltip must be activated
+     * programmatically.
+     */
+    trigger: string;
+    /**
+     * Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with
+     * `overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,
+     * scenarios.
+     */
     hoist: boolean;
-    tooltip: HTMLElement;
-    slotElement: HTMLSlotElement;
-    private hoverTimeout;
-    static get styles(): CSSResultArray;
     connectedCallback(): void;
+    firstUpdated(): void;
     disconnectedCallback(): void;
-    private getBasePlacement;
-    private getAlignmentModifier;
-    private updateTooltipPosition;
-    private showTooltip;
-    private handleAfterShow;
-    private hideTooltip;
-    private handleAfterHide;
-    private handleMouseOver;
-    private handleMouseOut;
+    private handleBlur;
     private handleClick;
-    updated(changedProperties: Map<string, any>): void;
     private handleFocus;
-    private handleBlur;
-    render(): import("lit-html").TemplateResult<1>;
+    private handleKeyDown;
+    private handleMouseOver;
+    private handleMouseOut;
+    private hasTrigger;
+    handleOpenChange(): Promise<void>;
+    handleOptionsChange(): Promise<void>;
+    handleDisabledChange(): void;
+    /** Shows the tooltip. */
+    show(): Promise<void>;
+    /** Hides the tooltip */
+    hide(): Promise<void>;
+    render(): TemplateResult<1>;
 }
+export default NileTooltip;
 declare global {
     interface HTMLElementTagNameMap {
         'nile-tooltip': NileTooltip;
     }
 }
-export {};