@tmorrow/cre8-wc 1.2.4 → 1.2.6

package/lib/components/tooltip/tooltip.d.ts

@@ -0,0 +1,171 @@
+import { Cre8Element } from '../cre8-element';
+/**
+ * The purpose of tooltips is to provide a tip or hint about what a tool, icon, link, or other interaction does.
+ * If you need to present a call to action with perhaps a button for the user to click, then use
+ * [Popover](/docs/cre8-components-popover--docs) instead.
+ *
+ * ##Tooltip Styles
+ * There are 4 alignment options for Tooltips: Top, Bottom, Right, and Left. Default placement is Bottom, below the
+ * element it is describing. Top or Bottom alignment are the the preferred placement, particularly on screens that
+ * have a more narrow viewport. Tooltips utilize Global styles and are not affected by brand themes.
+ *
+ * **With icon**
+ * - **iconRotateDegree** & **iconFlipDirection** props are optional.
+ * - They are used to set up the correct dirrection for icons, for example,
+ * arrows, caret up or caret down.
+ *
+ * ##Usability Considerations
+ * With the exception of icons - which should always have alt text at a minimum - the UI should never rely on
+ * Tooltips for clarity, especially because they are not always discovered by the user. If the user cannot
+ * intuitively understand the interface without Tooltips, the interface should be redesigned.
+ *
+ * ##How to use
+ * - Use Tooltips to clarify the UI element the user is interacting with, not to add additional content on the page.
+ * Also, do not simply restate content on the page, for example, the title of the field.
+ * - Tooltips should be short and to the point. Example: "Click X to do X" or "Icon Description." If a succinct
+ * description is not possible, the interaction element should be redesigned.
+ * - In a mouse-driven UI, Tooltips are triggered on hover (mouseover) and dismissed (disappear)
+ * when the user mouses away from the element. In touch UIs, a Tooltip is triggered by tapping
+ * and holding an item. The Tooltip is displayed as long as the user continues to hold the element.
+ * Tap and hold is a more advanced user behavior, and further reason for not relying on Tooltips.
+ * A novice user may never discover tap and hold for Tooltips.
+ *
+ * @slot default - Default, unnamed slot container for Tooltip text
+ * @slot trigger - Named slot container for Tooltip element to trigger showing/hiding the Tooltip text
+ */
+export declare class Cre8Tooltip extends Cre8Element {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Positions the tooltip panel absolutely to the icon. Position overrides `isDynamic`.
+     * @type {"default"|"top"|"left"|"right"}
+     * @attr {string}
+     * - **default** positions the tooltip panel below the trigger element
+     * - **top** positions the tooltip panel above the trigger element
+     * - **left** positions the tooltip panel left of the trigger element
+     * - **right** positions the tooltip panel right of the trigger element
+     */
+    position?: 'top' | 'left' | 'right';
+    /**
+     * The knockout variant for the tooltip
+     * @attr {boolean}
+     * 1. If is true, the tooltip background is white
+     * 2. If is false, the tooltip background is gray
+     */
+    knockout?: boolean;
+    /**
+     * The dynamic state for the tooltip. Position overrides isDynamic.
+     * @attr {boolean}
+     * - If true, the tooltip panel placement is determined by its position in the viewport
+     * - If false, the tooltip panel placement will be placed according to the position value
+     */
+    isDynamic?: boolean;
+    /**
+     * The dynamic active state
+     * @attr {boolean}
+     * <br/><br/> _*This property is dynamically set_
+     */
+    isActiveDynamic?: boolean;
+    /**
+     * The active state for the tooltip
+     * @attr {boolean}
+     * - If true, the tooltip panel is visible
+     * - If false, the tooltip panel is hidden
+     * <br/><br/> _*This property is dynamically set_
+     */
+    isActive?: boolean;
+    /**
+     *  Accepts the ID string of the item the tooltip is referencing
+     *  @attr {string}
+     *  Dynmically appends its own ID to the aria-describedby attribute on the referenced element
+     */
+    ariaDescribes?: string;
+    _uniqueId?: string;
+    /**
+     * svg as a raw string
+     * - The icon is defined by this prop.
+     * - Pass in a raw svg as a String for using <cre8-icon>
+     */
+    svg?: string;
+    /**
+     * iconRotateDegree is used for <cre8-icon> to set the arrow in the correct direction
+     */
+    iconRotateDegree?: number;
+    /**
+     * iconFlipDirection is used for <cre8-icon> to set the icon in the correct direction
+     */
+    iconFlipDirection?: string;
+    /**
+     * Query the tooltip panel element
+     */
+    _Cre8Tooltip: HTMLElement;
+    /**
+     * Query the tooltip panel element
+     */
+    _Cre8TooltipPanel: HTMLElement;
+    /**
+     * Query the document direction value
+     * <br/><br/> _*This property is dynamically set_
+     */
+    get isRTL(): boolean;
+    /**
+     * updated Callback Lifecycle
+     * 1. Find the second slot
+     * 2. Create a string from joining the textContent of the textnodes
+     * 3. Set the textContent of the tip generated in the firstUpdated lifecycle callback
+     * */
+    updated(): void;
+    /**
+     * firstUpdated Callback Lifecycle
+     * 1. If ariaDescribes is set
+        * a. create an ID and assign it to the property _uniqueId
+        * b. Generate an empty div, assign it the  _uniqueId and the tooltip role
+    * 2. Set the aria-describedby on the ariaDescribes target
+    */
+    firstUpdated(): void;
+    /**
+     * Connected Callback Lifecycle
+     * 1. Add window mouseover event listener
+     * 2. Add window mouseout event listener
+     * 3. Add mousedown event listener
+     * 4. Set the id and aria-describedby
+     */
+    connectedCallback(): void;
+    /**
+     * Disconnected Callback Lifecycle
+     * 1. Remove window mouseover event listener
+     * 2. Remove window mouseout event listener
+     */
+    disconnectedCallback(): void;
+    /**
+     * Handle all dynamic placement
+     */
+    dynamicPosition(): void;
+    /**
+     * Handle Keydown
+     * 1. If escape or tab key is struck when the tooltip is active, close it
+     * 2. If enter or escape is keyed, toggle the tooltip open or close.
+     *    We need these since the click event is on a div so that accessibility reads this aloud to a user
+     */
+    private _handleKeydown;
+    /**
+     * Set Tooltip Active State
+     * 1. Toggle the active state between true and false
+     * 2. If is active, set the dynamic position and custom event.
+     * 3. If is not active, remove fire the close custom event.
+     * 4. Toggle the active state for dynamic. This prevents a flash of the tooltip in the orginal position.
+     */
+    toggleActive(): void;
+    /**
+     * Remove Active State
+     * 1. If a specific event is fired, remove the active state.
+     */
+    removeActive: () => void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cre8-tooltip': Cre8Tooltip;
+    }
+}
+export default Cre8Tooltip;
+//# sourceMappingURL=tooltip.d.ts.map

package/lib/components/tooltip/tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../components/tooltip/tooltip.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAEH,qBAAa,WAAY,SAAQ,WAAW;IACxC,MAAM,CAAC,MAAM,4BAAY;IAE3B;;;;;;;;OAQG;IAEC,QAAQ,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;IAExC;;;;;OAKG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;;OAKG;IAEC,SAAS,CAAC,EAAE,OAAO,CAAC;IAExB;;;;OAIG;IAEC,eAAe,CAAC,EAAE,OAAO,CAAC;IAE9B;;;;;;OAMG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IAEC,aAAa,CAAC,EAAE,MAAM,CAAC;IAGvB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;OAIG;IAEC,GAAG,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IAEC,gBAAgB,CAAC,EAAE,MAAM,CAAK;IAElC;;OAEG;IAEC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE/B;;OAEG;IAEC,YAAY,EAAE,WAAW,CAAC;IAE9B;;OAEG;IAEC,iBAAiB,EAAE,WAAW,CAAC;IAEnC;;;OAGG;IACH,IAAI,KAAK,YAER;IAED;;;;;SAKK;IACL,OAAO;IAcP;;;;;;MAME;IACF,YAAY;IAoBZ;;;;;;OAMG;IACH,iBAAiB;IAMjB;;;;OAIG;IACH,oBAAoB;IAMpB;;OAEG;IACH,eAAe;IA2Cf;;;;;OAKG;IACH,OAAO,CAAC,cAAc;IAWtB;;;;;;OAMG;IACH,YAAY;IA4BZ;;;OAGG;IACH,YAAY,aAIV;IAEF,MAAM;CAsCP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF;AAED,eAAe,WAAW,CAAC"}