@energycap/components 0.31.2 → 0.31.4

package/lib/display/tooltip/tooltip.component.d.ts

@@ -0,0 +1,53 @@
+import { OverlayRef } from '@angular/cdk/overlay';
+import { EventEmitter, TemplateRef } from '@angular/core';
+/**
+ * The position of the tooltip relative to its anchor. For example, if position is 'top-left' the the tooltip will appear above the anchor and expand to the left of the anchor.
+ */
+export declare type TooltipPosition = 'top-left' | 'top-center' | 'top-right' | 'right-top' | 'right-center' | 'right-bottom' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'left-top' | 'left-center' | 'left-bottom';
+export interface TooltipOptions {
+    /**
+     * Unique identifier for the tooltip that is assigned to the <article> element that wraps the tooltip content.
+     */
+    id?: string;
+    /**
+     * The tooltip title. Hidden if not defined. The tooltip header is hidden if both title and subtile are not defined.
+     */
+    title?: string;
+    /**
+     * Text to display under the tooltip title. Hidden if not defined. The tooltip header is hidden if both title and subtitle are not defined.
+     */
+    subtitle?: string;
+    /**
+     * HTML string for the main content of the tooltip. Will be ignored if customContent has a value.
+     */
+    text?: string;
+    /**
+     * Provide a TemplateRef for custom content. If customContent is defined, any value for text will be ignored.
+     */
+    customContent?: TemplateRef<any>;
+    /**
+     * When true a close button appears in the top right corner to hide the tooltip. Useful when tooltips are used in a tour. An event will emitted when the tooltip is hidden.
+     */
+    dismissible?: boolean;
+    /**
+     * Number in pixels of the width of the tooltip. If undefined width will be auto.
+     */
+    width?: number;
+    /**
+     * Customize the background color. Can be any color value or css varialbe with var() function. For example: var(--ec-background-color-success);
+     */
+    backgroundColor?: string;
+}
+export declare class TooltipComponent implements TooltipOptions {
+    position: TooltipPosition;
+    id?: string;
+    title?: string;
+    subtitle?: string;
+    text?: string;
+    dismissible: boolean;
+    customContent?: TemplateRef<any> | undefined;
+    overlayRef?: OverlayRef;
+    backgroundColor?: string;
+    onHide: EventEmitter<void>;
+    hide(): void;
+}

package/lib/display/tooltip/tooltip.service.d.ts

@@ -0,0 +1,12 @@
+import { Overlay } from "@angular/cdk/overlay";
+import { TooltipComponent, TooltipOptions, TooltipPosition } from "./tooltip.component";
+export declare class TooltipService {
+    private overlay;
+    private positions;
+    constructor(overlay: Overlay);
+    /**
+     * Show a tooltip attached to a specified element
+     */
+    show(anchor: HTMLElement, position?: TooltipPosition, options?: TooltipOptions): TooltipComponent;
+    private getOverlayConfig;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@energycap/components",
-  "version": "0.31.2",
+  "version": "0.31.4",
   "dependencies": {
     "tslib": "^2.0.0"
   },

package/public-api.d.ts

@@ -76,6 +76,8 @@ export * from './lib/display/toast/toast-types';
 export * from './lib/display/toast/toast.service';
 export * from './lib/display/toast/toaster/toaster.component';
 export * from './lib/display/toast/toast/toast.component';
+export * from './lib/display/tooltip/tooltip.component';
+export * from './lib/display/tooltip/tooltip.service';
 export * from './lib/core/telemetry.service';
 export * from './lib/core/telemetry-tracker.service';
 export * from './lib/shared/page/page-base/page-base.component';

package/src/styles/_base.scss

@@ -74,4 +74,8 @@ p {
 
 table {
   background-color: transparent;
+}
+
+.cdk-overlay-container {
+  z-index: var(--ec-z-index-tooltip);
 }

package/src/styles/_global-variables.scss

@@ -75,10 +75,10 @@
   --ec-font-weight-normal: normal;
 
   // Z-indexes
-  --ec-z-index-tooltip: 10;
   --ec-z-index-overlay: 20;
   --ec-z-index-splitter: 30;
   --ec-z-index-navbar: 40;
+  --ec-z-index-tooltip: 45;
   --ec-z-index-popup: 50;
   --ec-z-index-dialog: 60;
   --ec-z-index-toast: 70;