@nuraly/lumenui 0.1.0

package/dist/src/components/toast/toast.style.js

@@ -0,0 +1,338 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { css } from 'lit';
+/**
+ * Toast component styles for the Hybrid UI Library
+ * Using shared CSS variables from /src/shared/themes/
+ *
+ * This file contains all the styling for the nr-toast component with
+ * clean CSS variable usage without local fallbacks and proper theme switching support.
+ */
+export const styles = css `
+  :host {
+    display: block;
+    position: fixed;
+    z-index: var(--nuraly-z-index-toast);
+    pointer-events: none;
+    
+    /* Force CSS custom property inheritance to ensure theme switching works properly */
+    color: var(--nuraly-color-text);
+    font-family: var(--nuraly-font-family);
+  }
+
+  /* Container positioning */
+  :host([position="top-right"]) {
+    top: var(--nuraly-spacing-4);
+    right: var(--nuraly-spacing-4);
+  }
+
+  :host([position="top-left"]) {
+    top: var(--nuraly-spacing-4);
+    left: var(--nuraly-spacing-4);
+  }
+
+  :host([position="top-center"]) {
+    top: var(--nuraly-spacing-4);
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  :host([position="bottom-right"]) {
+    bottom: var(--nuraly-spacing-4);
+    right: var(--nuraly-spacing-4);
+  }
+
+  :host([position="bottom-left"]) {
+    bottom: var(--nuraly-spacing-4);
+    left: var(--nuraly-spacing-4);
+  }
+
+  :host([position="bottom-center"]) {
+    bottom: var(--nuraly-spacing-4);
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .toast-container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nuraly-toast-stack-gap);
+    min-width: var(--nuraly-toast-min-width);
+    max-width: var(--nuraly-toast-max-width);
+  }
+
+  .toast {
+    display: flex;
+    align-items: start;
+    gap: var(--nuraly-toast-gap);
+    padding: var(--nuraly-toast-padding-vertical) var(--nuraly-toast-padding-horizontal);
+    background-color: var(--nuraly-color-background);
+    color: var(--nuraly-color-text);
+    border: 1px solid var(--nuraly-color-border);
+    border-radius: var(--nuraly-border-radius-toast);
+    box-shadow: var(--nuraly-shadow-toast);
+    pointer-events: auto;
+    cursor: default;
+    transition: all var(--nuraly-transition-fast) ease;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .toast:hover {
+    box-shadow: var(--nuraly-shadow-toast-hover);
+  }
+
+  /* Toast type variants */
+  .toast--default {
+    background-color: var(--nuraly-toast-default-background);
+    border-color: var(--nuraly-toast-default-border);
+    color: var(--nuraly-toast-default-text);
+  }
+
+  .toast--success {
+    background-color: var(--nuraly-toast-success-background);
+    border-color: var(--nuraly-toast-success-border);
+    color: var(--nuraly-toast-success-text);
+  }
+
+  .toast--error {
+    background-color: var(--nuraly-toast-error-background);
+    border-color: var(--nuraly-toast-error-border);
+    color: var(--nuraly-toast-error-text);
+  }
+
+  .toast--warning {
+    background-color: var(--nuraly-toast-warning-background);
+    border-color: var(--nuraly-toast-warning-border);
+    color: var(--nuraly-toast-warning-text);
+  }
+
+  .toast--info {
+    background-color: var(--nuraly-toast-info-background);
+    border-color: var(--nuraly-toast-info-border);
+    color: var(--nuraly-toast-info-text);
+  }
+
+  /* Toast icon */
+  .toast__icon {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 0.125rem; /* Slight adjustment for better visual alignment */
+  }
+
+  .toast__icon nr-icon {
+    color: inherit;
+  }
+
+  /* Toast content */
+  .toast__content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: var(--nuraly-spacing-2);
+    min-width: 0;
+  }
+
+  .toast__text {
+    font-size: var(--nuraly-font-size-sm);
+    line-height: 1.5;
+    word-break: break-word;
+  }
+
+  /* Toast button */
+  .toast__button {
+    display: flex;
+    align-items: center;
+    margin-top: var(--nuraly-spacing-1);
+  }
+
+  .toast__button nr-button {
+    flex-shrink: 0;
+  }
+
+  /* Close button */
+  .toast__close {
+    flex-shrink: 0;
+    min-width: var(--nuraly-toast-close-size);
+    min-height: var(--nuraly-toast-close-size);
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: currentColor;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--nuraly-border-radius-small);
+    transition: all var(--nuraly-transition-fast) ease;
+    opacity: var(--nuraly-toast-close-opacity);
+  }
+
+  .toast__close:hover {
+    opacity: var(--nuraly-toast-close-opacity-hover);
+    background-color: var(--nuraly-toast-close-hover-background);
+  }
+
+  .toast__close:focus {
+    outline: var(--nuraly-focus-outline);
+    outline-offset: var(--nuraly-focus-outline-offset);
+  }
+
+  .toast__close nr-icon {
+    color: inherit;
+  }
+
+  /* Animations */
+  @keyframes toast-fade-in {
+    from {
+      opacity: 0;
+      transform: translateY(-1rem);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes toast-fade-out {
+    from {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    to {
+      opacity: 0;
+      transform: translateY(-1rem);
+    }
+  }
+
+  @keyframes toast-slide-in-right {
+    from {
+      opacity: 0;
+      transform: translateX(100%);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes toast-slide-out-right {
+    from {
+      opacity: 1;
+      transform: translateX(0);
+    }
+    to {
+      opacity: 0;
+      transform: translateX(100%);
+    }
+  }
+
+  @keyframes toast-slide-in-left {
+    from {
+      opacity: 0;
+      transform: translateX(-100%);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes toast-slide-out-left {
+    from {
+      opacity: 1;
+      transform: translateX(0);
+    }
+    to {
+      opacity: 0;
+      transform: translateX(-100%);
+    }
+  }
+
+  @keyframes toast-bounce-in {
+    0% {
+      opacity: 0;
+      transform: scale(0.3);
+    }
+    50% {
+      transform: scale(1.05);
+    }
+    70% {
+      transform: scale(0.9);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes toast-bounce-out {
+    0% {
+      transform: scale(1);
+    }
+    25% {
+      transform: scale(0.95);
+    }
+    50% {
+      opacity: 1;
+      transform: scale(1.1);
+    }
+    100% {
+      opacity: 0;
+      transform: scale(0.3);
+    }
+  }
+
+  /* Animation classes */
+  .toast--fade-in {
+    animation: toast-fade-in var(--nuraly-transition-toast) ease;
+  }
+
+  .toast--fade-out {
+    animation: toast-fade-out var(--nuraly-transition-toast) ease;
+  }
+
+  .toast--slide-in {
+    animation: toast-slide-in-right var(--nuraly-transition-toast) ease;
+  }
+
+  .toast--slide-out {
+    animation: toast-slide-out-right var(--nuraly-transition-toast) ease;
+  }
+
+  .toast--bounce-in {
+    animation: toast-bounce-in var(--nuraly-transition-toast) ease;
+  }
+
+  .toast--bounce-out {
+    animation: toast-bounce-out var(--nuraly-transition-toast) ease;
+  }
+
+  /* Position-specific slide animations */
+  :host([position="top-left"]) .toast--slide-in,
+  :host([position="bottom-left"]) .toast--slide-in {
+    animation: toast-slide-in-left var(--nuraly-transition-toast) ease;
+  }
+
+  :host([position="top-left"]) .toast--slide-out,
+  :host([position="bottom-left"]) .toast--slide-out {
+    animation: toast-slide-out-left var(--nuraly-transition-toast) ease;
+  }
+
+  /* Progress bar for duration indicator */
+  .toast__progress {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: var(--nuraly-toast-progress-height);
+    background-color: currentColor;
+    opacity: var(--nuraly-toast-progress-opacity);
+    transition: width linear;
+  }
+`;
+//# sourceMappingURL=toast.style.js.map

package/dist/src/components/toast/toast.types.d.ts

@@ -0,0 +1,124 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { TemplateResult } from 'lit';
+/**
+ * Toast type variants
+ */
+export declare const enum ToastType {
+    Default = "default",
+    Success = "success",
+    Error = "error",
+    Warning = "warning",
+    Info = "info"
+}
+/**
+ * Toast position on screen
+ */
+export declare const enum ToastPosition {
+    TopRight = "top-right",
+    TopLeft = "top-left",
+    TopCenter = "top-center",
+    BottomRight = "bottom-right",
+    BottomLeft = "bottom-left",
+    BottomCenter = "bottom-center"
+}
+/**
+ * Toast animation types
+ */
+export declare const enum ToastAnimation {
+    Fade = "fade",
+    Slide = "slide",
+    Bounce = "bounce"
+}
+/**
+ * Predefined duration values in milliseconds
+ */
+export declare const enum ToastDuration {
+    Short = 3000,
+    Medium = 5000,
+    Long = 7000
+}
+/**
+ * Toast action button configuration
+ */
+export interface ToastButton {
+    /** Button label text */
+    label: string;
+    /** Button click handler */
+    onClick: (event: Event) => void;
+    /** Button type/variant */
+    type?: 'default' | 'primary' | 'secondary' | 'tertiary' | 'danger' | 'ghost';
+    /** Button size */
+    size?: 'small' | 'medium' | 'large';
+    /** Whether button is disabled */
+    disabled?: boolean;
+    /** Icon name for button */
+    icon?: string;
+}
+/**
+ * Individual toast configuration
+ */
+export interface ToastConfig {
+    /** Toast message text */
+    text?: string;
+    /** Custom HTML content (overrides text) */
+    content?: TemplateResult;
+    /** Toast type/variant */
+    type?: ToastType;
+    /** Duration in milliseconds */
+    duration?: number;
+    /** Auto dismiss after duration (default: true) */
+    autoDismiss?: boolean;
+    /** Show close button */
+    closable?: boolean;
+    /** Icon name to display */
+    icon?: string;
+    /** Custom CSS class */
+    customClass?: string;
+    /** Action button configuration */
+    button?: ToastButton;
+    /** Callback when toast is closed */
+    onClose?: () => void;
+    /** Callback when toast is clicked */
+    onClick?: () => void;
+}
+/**
+ * Internal toast item with metadata
+ */
+export interface ToastItem extends ToastConfig {
+    /** Unique identifier */
+    id: string;
+    /** Creation timestamp */
+    timestamp: number;
+    /** Whether toast is being removed */
+    removing?: boolean;
+}
+/**
+ * Toast container configuration
+ */
+export interface ToastContainerConfig {
+    /** Position on screen */
+    position?: ToastPosition;
+    /** Maximum number of toasts to show */
+    maxToasts?: number;
+    /** Default duration */
+    defaultDuration?: number;
+    /** Animation type */
+    animation?: ToastAnimation;
+    /** Stack toasts or replace */
+    stack?: boolean;
+}
+/**
+ * Toast event detail
+ */
+export interface ToastEventDetail {
+    toast: ToastItem;
+    action: 'show' | 'close' | 'click';
+}
+export declare const EMPTY_STRING = "";
+export declare const DEFAULT_TOAST_DURATION = ToastDuration.Medium;
+export declare const DEFAULT_MAX_TOASTS = 5;
+//# sourceMappingURL=toast.types.d.ts.map

package/dist/src/components/toast/toast.types.js

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export const EMPTY_STRING = '';
+export const DEFAULT_TOAST_DURATION = 5000 /* ToastDuration.Medium */;
+export const DEFAULT_MAX_TOASTS = 5;
+//# sourceMappingURL=toast.types.js.map

package/dist/src/components/tooltips/bundle.js

@@ -0,0 +1,123 @@
+import{css as t,LitElement as i,html as o,nothing as s}from"lit";import{property as n,state as e,customElement as h}from"lit/decorators.js";const r=[t`
+  :host([show]) {
+    background-color: var(--nuraly-tooltip-background-color);
+    color: var(--nuraly-tooltip-text-color);
+    position: fixed;
+    padding: 5px;
+    text-align: center;
+    opacity: 0;
+      font-size: 14px;
+      z-index: 9999;
+    border-radius: 4px;
+    animation-name: show-animation;
+    animation-duration: 0.4s;
+    animation-fill-mode: forwards;
+  }
+
+  .popconfirm-container {
+    display: flex;
+    flex-direction: column;
+  }
+  .btn-block {
+    display: flex;
+    justify-content: end;
+    gap: 10px;
+    margin: 10px;
+  }
+
+  .popconfirm-description,
+  .popconfirm-title {
+    margin: 5px;
+    text-align: left;
+  }
+  .popconfirm-title {
+    font-weight: bold;
+  }
+
+  @keyframes show-animation {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  :host::after {
+    content: '';
+    height: 0;
+    width: 0;
+    position: absolute;
+    border: 5px solid transparent;
+  }
+  :host(.top-position)::after {
+    border-top-color: var(--nuraly-tooltip-background-color);
+    top: 100%;
+  }
+  :host(.left-position)::after {
+    border-left-color: var(--nuraly-tooltip-background-color);
+    left: 100%;
+  }
+
+  :host(.right-position)::after {
+    border-right-color: var(--nuraly-tooltip-background-color);
+    right: 100%;
+  }
+  :host(.bottom-position)::after {
+    border-bottom-color: var(--nuraly-tooltip-background-color);
+    bottom: 100%;
+  }
+  :host(.alignement-center.top-position)::after,
+  :host(.alignement-center.bottom-position)::after {
+    right: 50%;
+    transform: translate(50%);
+  }
+
+  :host(.alignement-start.top-position)::after,
+  :host(.alignement-start.bottom-position)::after {
+    left: 4%;
+  }
+  :host(.top-position.alignement-end)::after,
+  :host(.alignement-end.bottom-position)::after {
+    right: 4%;
+  }
+
+  :host(.alignement-center.left-position)::after,
+  :host(.alignement-center.right-position)::after {
+    top: 50%;
+    transform: translate(0%, -50%);
+  }
+
+  :host(.alignement-start.left-position)::after,
+  :host(.alignement-start.right-position)::after {
+    top: 5px;
+  }
+  :host(.alignement-end.left-position)::after,
+  :host(.alignement-end.right-position)::after {
+    bottom: 5px;
+  }
+`,t`
+  :host {
+    --nuraly-tooltip-background-color: #393939;
+    --nuraly-tooltip-text-color: #ffffff;
+  }
+  @media (prefers-color-scheme: dark) {
+    :host {
+      --nuraly-tooltip-background-color: #f4f4f4;
+      --nuraly-tooltip-text-color: #161616;
+    }
+  }
+`];var a,l;!function(t){t.Top="top",t.Bottom="bottom",t.Right="right",t.Left="left"}(a||(a={})),function(t){t.Start="start",t.Center="center",t.End="end"}(l||(l={}));var p=function(t,i,o,s){for(var n,e=arguments.length,h=e<3?i:null===s?s=Object.getOwnPropertyDescriptor(i,o):s,r=t.length-1;r>=0;r--)(n=t[r])&&(h=(e<3?n(h):e>3?n(i,o,h):n(i,o))||h);return e>3&&h&&Object.defineProperty(i,o,h),h};let c=class extends i{constructor(){super(...arguments),this.position=a.Bottom,this.alignement=l.Center,this.show=!1,this.isPopConfirm=!1,this.popConfirmTitle="",this.popConfirmDescription="",this.okText="Yes",this.cancelText="No",this.horizontalOffset=10,this.verticalOffset=10,this.onMouseOver=()=>{this.show=!0},this.onMouseLeave=()=>{this.show=!1,this.initStyles()},this.onClick=()=>{this.show=!this.show},this.calculatePosition=()=>{this.initStyles(),this.style.width=`${this.clientWidth}px`,this.position===a.Bottom||this.position===a.Top?(this.calculateYposition(),this.calculateYalignement()):(this.calculateXposition(),this.calculateXalignement())},this.calculateYposition=()=>{const t=this.target.getBoundingClientRect(),i=t.bottom,o=t.top,s=window.visualViewport.height,n=this.clientHeight,e=n+this.verticalOffset<s-i,h=n+this.verticalOffset<o;this.position===a.Bottom?e||!h?(this.classList.add("bottom-position"),this.style.top=`${i+this.verticalOffset}px`):(this.classList.add("top-position"),this.style.top=o-n-this.verticalOffset+"px"):h||!e?(this.classList.add("top-position"),this.style.top=o-n-this.verticalOffset+"px"):(this.classList.add("bottom-position"),this.style.top=`${i+this.verticalOffset}px`)},this.calculateYalignement=()=>{const t=this.target.getBoundingClientRect(),i=t.right,o=t.width,s=t.left,n=this.clientWidth,e=s+o/2,h=window.visualViewport.width,r=h-i+o/2;if(this.alignement===l.Start){n+s<h?(this.classList.add("alignement-start"),this.style.left=s-this.horizontalOffset+"px"):(this.classList.add("alignement-end"),this.style.left=`${s-n+this.horizontalOffset}px`)}else if(this.alignement===l.End){n<s?(this.classList.add("alignement-end"),this.style.left=`${s-n+this.horizontalOffset}px`):(this.classList.add("alignement-start"),this.style.left=s-this.horizontalOffset+"px")}else{const t=n<e;n/2<e&&n/2<r||n>e&&n>r?(this.classList.add("alignement-center"),this.style.left=s-n/2+o/2+"px"):t?(this.classList.add("alignement-end"),this.style.left=`${s-n+this.horizontalOffset}px`):(this.classList.add("alignement-start"),this.style.left=s-this.horizontalOffset+"px")}},this.calculateXposition=()=>{const t=this.target.getBoundingClientRect(),i=t.left,o=t.right,s=window.visualViewport.width,n=this.clientWidth,e=n+this.horizontalOffset<s-o,h=n+this.horizontalOffset<i;this.position===a.Right?e||!h?(this.classList.add("right-position"),this.style.left=`${o+this.horizontalOffset}px`):(this.classList.add("left-position"),this.style.left=i-n-this.horizontalOffset+"px"):h||!e?(this.classList.add("left-position"),this.style.left=i-n-this.horizontalOffset+"px"):(this.classList.add("right-position"),this.style.left=`${o+this.horizontalOffset}px`)},this.calculateXalignement=()=>{const t=this.target.getBoundingClientRect(),i=t.top,o=t.height,s=t.bottom,n=this.clientHeight,e=window.visualViewport.height,h=e-s;if(this.alignement===l.End){n<i?(this.classList.add("alignement-end"),this.style.top=s-n+"px"):(this.classList.add("alignement-start"),this.style.top=i-o/4+"px")}else if(this.alignement===l.Start){n<e-s?(this.classList.add("alignement-start"),this.style.top=i-o/4+"px"):(this.classList.add("alignement-end"),this.style.top=s-n+"px")}else{const t=n<i;n/2<i&&n/2<h||n>i&&n>h?(this.classList.add("alignement-center"),this.style.top=i+o/2-n/2+"px"):t?(this.classList.add("alignement-end"),this.style.top=s-n+"px"):(this.classList.add("alignement-start"),this.style.top=i-o/4+"px")}},this.onClickOutside=t=>{const i=t.composedPath();!i.includes(this.target)&&!i.includes(this)&&(this.show=!1)}}connectedCallback(){super.connectedCallback(),this.target=this.target||this.previousElementSibling,this.target?this.isPopConfirm?(document.addEventListener("scroll",this.calculatePosition),this.target.addEventListener("click",this.onClick),document.addEventListener("click",this.onClickOutside)):(this.target.addEventListener("mouseover",this.onMouseOver),this.target.addEventListener("mouseleave",this.onMouseLeave)):console.error("Tooltip target is not defined or found. Ensure target is explicitly set or precedes the tooltip.")}initStyles(){this.style.top="",this.style.left="",this.style.width="",this.classList.remove(...this.classList.values())}updated(t){this.show&&this.calculatePosition()}onPopConfirmCancel(){this.dispatchEvent(new CustomEvent("onCancel")),this.show=!1,this.initStyles()}onPopConfirmConfirm(){this.dispatchEvent(new CustomEvent("onConfirm")),this.show=!1,this.initStyles()}disconnectedCallback(){super.disconnectedCallback(),this.isPopConfirm?(this.target.removeEventListener("click",this.onClick),document.removeEventListener("scroll",this.calculatePosition)):(this.target.removeEventListener("mouseover",this.onMouseOver),this.target.removeEventListener("mouseleave",this.onMouseLeave))}render(){return this.isPopConfirm?this.show?o`
+          <div class="popconfirm-container">
+            <p class="popconfirm-title">${this.popConfirmTitle}</p>
+            <p class="popconfirm-description">${this.popConfirmDescription}</p>
+            <div class="btn-block">
+              <nr-button .size=${"small"} type=${"primary"} @click=${this.onPopConfirmConfirm}
+                >${this.okText}</nr-button
+              >
+              <nr-button .size=${"small"} type=${"danger"} @click=${this.onPopConfirmCancel}
+                >${this.cancelText}</nr-button
+              >
+            </div>
+          </div>
+        `:s:this.show?o`<slot></slot>`:s}};c.styles=r,p([n({reflect:!0})],c.prototype,"position",void 0),p([n({reflect:!0})],c.prototype,"alignement",void 0),p([e()],c.prototype,"target",void 0),p([n({reflect:!0,type:Boolean})],c.prototype,"show",void 0),p([n()],c.prototype,"isPopConfirm",void 0),p([n()],c.prototype,"popConfirmTitle",void 0),p([n()],c.prototype,"popConfirmDescription",void 0),p([n()],c.prototype,"okText",void 0),p([n()],c.prototype,"cancelText",void 0),c=p([h("hy-tooltip")],c);export{c as TooltipElement};

package/dist/src/components/tooltips/index.d.ts

@@ -0,0 +1,2 @@
+export * from './tooltips.component.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/tooltips/index.js

@@ -0,0 +1,2 @@
+export * from './tooltips.component.js';
+//# sourceMappingURL=index.js.map

package/dist/src/components/tooltips/react.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=react.d.ts.map

package/dist/src/components/tooltips/react.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=react.js.map

package/dist/src/components/tooltips/tooltips.component.d.ts

@@ -0,0 +1,33 @@
+import { LitElement, nothing, PropertyValueMap } from 'lit';
+import { TooltipAlignment, TooltipPosition } from './tooltips.constant.js';
+export declare class TooltipElement extends LitElement {
+    static styles: import("lit").CSSResult[];
+    position: TooltipPosition;
+    alignement: TooltipAlignment;
+    target: Element;
+    show: boolean;
+    isPopConfirm: boolean;
+    popConfirmTitle: string;
+    popConfirmDescription: string;
+    okText: string;
+    cancelText: string;
+    horizontalOffset: number;
+    verticalOffset: number;
+    connectedCallback(): void;
+    private onMouseOver;
+    private onMouseLeave;
+    private onClick;
+    private initStyles;
+    updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    private calculatePosition;
+    private calculateYposition;
+    private calculateYalignement;
+    private calculateXposition;
+    private calculateXalignement;
+    onPopConfirmCancel(): void;
+    onPopConfirmConfirm(): void;
+    onClickOutside: (onClickEvent: Event) => void;
+    disconnectedCallback(): void;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=tooltips.component.d.ts.map