@nuraly/lumenui 0.1.0 → 0.2.2

package/dist/src/components/toast/controllers/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export { BaseToastController } from './base.controller.js';
+export type { ToastControllerHost } from './base.controller.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/toast/controllers/index.js

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export { BaseToastController } from './base.controller.js';
+//# sourceMappingURL=index.js.map

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

@@ -5,7 +5,7 @@
  */
 import { LitElement } from 'lit';
 import { ToastPosition, ToastAnimation, ToastConfig } from './toast.types.js';
-declare const NrToastElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
+declare const NrToastElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & (new (...args: any[]) => import("packages/common/src/shared/base-mixin.js").LightDomContent) & typeof LitElement;
 /**
  * Toast notification component for displaying temporary messages.
  *
@@ -71,6 +71,7 @@ declare const NrToastElement_base: (new (...args: any[]) => import("@nuralyui/co
  * @cssproperty --nuraly-toast-info-background - Info toast background
  */
 export declare class NrToastElement extends NrToastElement_base {
+    static useShadowDom: boolean;
     static styles: import("lit").CSSResult;
     requiredComponents: string[];
     /** Position of toast container on screen */

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

@@ -339,6 +339,7 @@ let NrToastElement = class NrToastElement extends NuralyUIBaseMixin(LitElement)
     `;
     }
 };
+NrToastElement.useShadowDom = true;
 NrToastElement.styles = styles;
 __decorate([
     property({ type: String, reflect: true })

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

@@ -15,43 +15,43 @@ export const styles = css `
   :host {
     display: block;
     position: fixed;
-    z-index: var(--nuraly-z-index-toast);
+    z-index: 1200;
     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);
+    color: #161616;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   }
 
   /* Container positioning */
   :host([position="top-right"]) {
-    top: var(--nuraly-spacing-4);
-    right: var(--nuraly-spacing-4);
+    top: 1rem;
+    right: 1rem;
   }
 
   :host([position="top-left"]) {
-    top: var(--nuraly-spacing-4);
-    left: var(--nuraly-spacing-4);
+    top: 1rem;
+    left: 1rem;
   }
 
   :host([position="top-center"]) {
-    top: var(--nuraly-spacing-4);
+    top: 1rem;
     left: 50%;
     transform: translateX(-50%);
   }
 
   :host([position="bottom-right"]) {
-    bottom: var(--nuraly-spacing-4);
-    right: var(--nuraly-spacing-4);
+    bottom: 1rem;
+    right: 1rem;
   }
 
   :host([position="bottom-left"]) {
-    bottom: var(--nuraly-spacing-4);
-    left: var(--nuraly-spacing-4);
+    bottom: 1rem;
+    left: 1rem;
   }
 
   :host([position="bottom-center"]) {
-    bottom: var(--nuraly-spacing-4);
+    bottom: 1rem;
     left: 50%;
     transform: translateX(-50%);
   }
@@ -59,61 +59,61 @@ export const styles = css `
   .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);
+    gap: 0.5rem;
+    min-width: 280px;
+    max-width: 480px;
   }
 
   .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);
+    gap: 0.75rem;
+    padding: 0.75rem 1rem;
+    background-color: #ffffff;
+    color: #161616;
+    border: 1px solid #e0e0e0;
+    border-radius: 6px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
     pointer-events: auto;
     cursor: default;
-    transition: all var(--nuraly-transition-fast) ease;
+    transition: all 0.15s ease;
     position: relative;
     overflow: hidden;
   }
 
   .toast:hover {
-    box-shadow: var(--nuraly-shadow-toast-hover);
+    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
   }
 
   /* 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);
+    background-color: #ffffff;
+    border-color: #e0e0e0;
+    color: #161616;
   }
 
   .toast--success {
-    background-color: var(--nuraly-toast-success-background);
-    border-color: var(--nuraly-toast-success-border);
-    color: var(--nuraly-toast-success-text);
+    background-color: #defbe6;
+    border-color: #198038;
+    color: #0e6027;
   }
 
   .toast--error {
-    background-color: var(--nuraly-toast-error-background);
-    border-color: var(--nuraly-toast-error-border);
-    color: var(--nuraly-toast-error-text);
+    background-color: #fff1f1;
+    border-color: #dc2626;
+    color: #a61a1a;
   }
 
   .toast--warning {
-    background-color: var(--nuraly-toast-warning-background);
-    border-color: var(--nuraly-toast-warning-border);
-    color: var(--nuraly-toast-warning-text);
+    background-color: #fdf4d3;
+    border-color: #f1c21b;
+    color: #75490a;
   }
 
   .toast--info {
-    background-color: var(--nuraly-toast-info-background);
-    border-color: var(--nuraly-toast-info-border);
-    color: var(--nuraly-toast-info-text);
+    background-color: #edf5ff;
+    border-color: #0043ce;
+    color: #003087;
   }
 
   /* Toast icon */
@@ -134,12 +134,12 @@ export const styles = css `
     flex: 1;
     display: flex;
     flex-direction: column;
-    gap: var(--nuraly-spacing-2);
+    gap: 0.5rem;
     min-width: 0;
   }
 
   .toast__text {
-    font-size: var(--nuraly-font-size-sm);
+    font-size: 0.875rem;
     line-height: 1.5;
     word-break: break-word;
   }
@@ -148,7 +148,7 @@ export const styles = css `
   .toast__button {
     display: flex;
     align-items: center;
-    margin-top: var(--nuraly-spacing-1);
+    margin-top: 0.25rem;
   }
 
   .toast__button nr-button {
@@ -158,8 +158,8 @@ export const styles = css `
   /* Close button */
   .toast__close {
     flex-shrink: 0;
-    min-width: var(--nuraly-toast-close-size);
-    min-height: var(--nuraly-toast-close-size);
+    min-width: 1.5rem;
+    min-height: 1.5rem;
     padding: 0;
     border: none;
     background: transparent;
@@ -168,19 +168,19 @@ export const styles = css `
     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);
+    border-radius: 4px;
+    transition: all 0.15s ease;
+    opacity: 0.6;
   }
 
   .toast__close:hover {
-    opacity: var(--nuraly-toast-close-opacity-hover);
-    background-color: var(--nuraly-toast-close-hover-background);
+    opacity: 1;
+    background-color: rgba(0,0,0,0.08);
   }
 
   .toast__close:focus {
-    outline: var(--nuraly-focus-outline);
-    outline-offset: var(--nuraly-focus-outline-offset);
+    outline: 2px solid #7c3aed;
+    outline-offset: 2px;
   }
 
   .toast__close nr-icon {
@@ -290,38 +290,38 @@ export const styles = css `
 
   /* Animation classes */
   .toast--fade-in {
-    animation: toast-fade-in var(--nuraly-transition-toast) ease;
+    animation: toast-fade-in 0.3s ease;
   }
 
   .toast--fade-out {
-    animation: toast-fade-out var(--nuraly-transition-toast) ease;
+    animation: toast-fade-out 0.3s ease;
   }
 
   .toast--slide-in {
-    animation: toast-slide-in-right var(--nuraly-transition-toast) ease;
+    animation: toast-slide-in-right 0.3s ease;
   }
 
   .toast--slide-out {
-    animation: toast-slide-out-right var(--nuraly-transition-toast) ease;
+    animation: toast-slide-out-right 0.3s ease;
   }
 
   .toast--bounce-in {
-    animation: toast-bounce-in var(--nuraly-transition-toast) ease;
+    animation: toast-bounce-in 0.3s ease;
   }
 
   .toast--bounce-out {
-    animation: toast-bounce-out var(--nuraly-transition-toast) ease;
+    animation: toast-bounce-out 0.3s 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;
+    animation: toast-slide-in-left 0.3s 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;
+    animation: toast-slide-out-left 0.3s ease;
   }
 
   /* Progress bar for duration indicator */
@@ -329,9 +329,9 @@ export const styles = css `
     position: absolute;
     bottom: 0;
     left: 0;
-    height: var(--nuraly-toast-progress-height);
+    height: 3px;
     background-color: currentColor;
-    opacity: var(--nuraly-toast-progress-opacity);
+    opacity: 0.4;
     transition: width linear;
   }
 `;

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

@@ -1,7 +1,7 @@
-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`
+import{css as t,LitElement as i,html as s,nothing as o}from"lit";import{property as e,state as n,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);
+    background-color: #161616;
+    color: #ffffff;
     position: fixed;
     padding: 5px;
     text-align: center;
@@ -51,20 +51,20 @@ import{css as t,LitElement as i,html as o,nothing as s}from"lit";import{property
     border: 5px solid transparent;
   }
   :host(.top-position)::after {
-    border-top-color: var(--nuraly-tooltip-background-color);
+    border-top-color: #161616;
     top: 100%;
   }
   :host(.left-position)::after {
-    border-left-color: var(--nuraly-tooltip-background-color);
+    border-left-color: #161616;
     left: 100%;
   }
 
   :host(.right-position)::after {
-    border-right-color: var(--nuraly-tooltip-background-color);
+    border-right-color: #161616;
     right: 100%;
   }
   :host(.bottom-position)::after {
-    border-bottom-color: var(--nuraly-tooltip-background-color);
+    border-bottom-color: #161616;
     bottom: 100%;
   }
   :host(.alignement-center.top-position)::after,
@@ -107,8 +107,8 @@ import{css as t,LitElement as i,html as o,nothing as s}from"lit";import{property
       --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">
+`];var a,p;!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"}(p||(p={}));var l=function(t,i,s,o){for(var e,n=arguments.length,h=n<3?i:null===o?o=Object.getOwnPropertyDescriptor(i,s):o,r=t.length-1;r>=0;r--)(e=t[r])&&(h=(n<3?e(h):n>3?e(i,s,h):e(i,s))||h);return n>3&&h&&Object.defineProperty(i,s,h),h};let c=class extends i{constructor(){super(...arguments),this.position=a.Bottom,this.alignement=p.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,s=t.top,o=window.visualViewport.height,e=this.clientHeight,n=e+this.verticalOffset<o-i,h=e+this.verticalOffset<s;this.position===a.Bottom?n||!h?(this.classList.add("bottom-position"),this.style.top=`${i+this.verticalOffset}px`):(this.classList.add("top-position"),this.style.top=s-e-this.verticalOffset+"px"):h||!n?(this.classList.add("top-position"),this.style.top=s-e-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,s=t.width,o=t.left,e=this.clientWidth,n=o+s/2,h=window.visualViewport.width,r=h-i+s/2;if(this.alignement===p.Start){e+o<h?(this.classList.add("alignement-start"),this.style.left=o-this.horizontalOffset+"px"):(this.classList.add("alignement-end"),this.style.left=`${o-e+this.horizontalOffset}px`)}else if(this.alignement===p.End){e<o?(this.classList.add("alignement-end"),this.style.left=`${o-e+this.horizontalOffset}px`):(this.classList.add("alignement-start"),this.style.left=o-this.horizontalOffset+"px")}else{const t=e<n;e/2<n&&e/2<r||e>n&&e>r?(this.classList.add("alignement-center"),this.style.left=o-e/2+s/2+"px"):t?(this.classList.add("alignement-end"),this.style.left=`${o-e+this.horizontalOffset}px`):(this.classList.add("alignement-start"),this.style.left=o-this.horizontalOffset+"px")}},this.calculateXposition=()=>{const t=this.target.getBoundingClientRect(),i=t.left,s=t.right,o=window.visualViewport.width,e=this.clientWidth,n=e+this.horizontalOffset<o-s,h=e+this.horizontalOffset<i;this.position===a.Right?n||!h?(this.classList.add("right-position"),this.style.left=`${s+this.horizontalOffset}px`):(this.classList.add("left-position"),this.style.left=i-e-this.horizontalOffset+"px"):h||!n?(this.classList.add("left-position"),this.style.left=i-e-this.horizontalOffset+"px"):(this.classList.add("right-position"),this.style.left=`${s+this.horizontalOffset}px`)},this.calculateXalignement=()=>{const t=this.target.getBoundingClientRect(),i=t.top,s=t.height,o=t.bottom,e=this.clientHeight,n=window.visualViewport.height,h=n-o;if(this.alignement===p.End){e<i?(this.classList.add("alignement-end"),this.style.top=o-e+"px"):(this.classList.add("alignement-start"),this.style.top=i-s/4+"px")}else if(this.alignement===p.Start){e<n-o?(this.classList.add("alignement-start"),this.style.top=i-s/4+"px"):(this.classList.add("alignement-end"),this.style.top=o-e+"px")}else{const t=e<i;e/2<i&&e/2<h||e>i&&e>h?(this.classList.add("alignement-center"),this.style.top=i+s/2-e/2+"px"):t?(this.classList.add("alignement-end"),this.style.top=o-e+"px"):(this.classList.add("alignement-start"),this.style.top=i-s/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?s`
+          <div class="popconfirm-container" part="container">
             <p class="popconfirm-title">${this.popConfirmTitle}</p>
             <p class="popconfirm-description">${this.popConfirmDescription}</p>
             <div class="btn-block">
@@ -120,4 +120,4 @@ import{css as t,LitElement as i,html as o,nothing as s}from"lit";import{property
               >
             </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};
+        `:o:this.show?s`<slot></slot>`:o}};c.styles=r,c.useShadowDom=!0,l([e({reflect:!0})],c.prototype,"position",void 0),l([e({reflect:!0})],c.prototype,"alignement",void 0),l([n()],c.prototype,"target",void 0),l([e({reflect:!0,type:Boolean})],c.prototype,"show",void 0),l([e()],c.prototype,"isPopConfirm",void 0),l([e()],c.prototype,"popConfirmTitle",void 0),l([e()],c.prototype,"popConfirmDescription",void 0),l([e()],c.prototype,"okText",void 0),l([e()],c.prototype,"cancelText",void 0),c=l([h("hy-tooltip")],c);export{c as TooltipElement};

package/dist/src/components/tooltips/demo/tooltips-demo.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+import '../tooltips.component';
+export declare class ElMeenuElement extends LitElement {
+    float: string;
+    protected render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'hy-tooltips-demo': ElMeenuElement;
+    }
+}
+//# sourceMappingURL=tooltips-demo.d.ts.map

package/dist/src/components/tooltips/demo/tooltips-demo.js

@@ -0,0 +1,132 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, css, html } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import '../tooltips.component';
+let ElMeenuElement = class ElMeenuElement extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.float = 'left';
+    }
+    render() {
+        return html `
+      <h3>BOTTOM</h3>
+      <span>click me</span>
+      <hy-tooltip
+        .isPopConfirm=${true}
+        .popConfirmDescription=${'Are you sure to delete this task?'}
+        .popConfirmTitle=${'delete the task'}
+        .cancelText=${'Cancel'}
+        .okText=${'Ok'}
+        @onCancel=${() => {
+            console.log('canceled');
+        }}
+        @onConfirm=${() => {
+            console.log('confirm');
+        }}
+      >
+      </hy-tooltip>
+
+      <br /><br /><br />
+      <p>hover me</p>
+      <hy-tooltip alignement=${'start'}>
+        <span>This is bottom and start</span>
+      </hy-tooltip>
+
+      <br /><br /><br />
+      <p>hover me</p>
+      <hy-tooltip alignement=${'end'}>
+        <span>This is bottom and end</span>
+      </hy-tooltip>
+
+      <br /><br /><br />
+      <h3>TOP</h3>
+
+      <p>hover me</p>
+      <hy-tooltip position=${'top'}>
+        <span>This is a description of the p in top and center</span>
+      </hy-tooltip>
+      <br /><br /><br />
+      <div>hover me</div>
+
+      <hy-tooltip position=${'top'} alignement=${'start'}>
+        <span>This is a description of the p in top and start </span>
+      </hy-tooltip>
+      <br /><br /><br />
+
+      <p>hover me</p>
+
+      <hy-tooltip position=${'top'} alignement=${'end'}>
+        <span>This is a description of the p in top and end</span>
+      </hy-tooltip>
+      <br /><br /><br />
+      <h3>RIGHT</h3>
+      <span>hover me</span>
+      <hy-tooltip position=${'right'}>
+        <span>This is a description of the p to the right and center</span>
+      </hy-tooltip>
+
+      <br /><br /><br />
+
+      <div>hover me</div>
+      <hy-tooltip position=${'right'} alignement=${'start'}>
+        <span>This is a description of the p to the right and start</span>
+      </hy-tooltip>
+
+      <br /><br /><br />
+      <span>hover me</span>
+      <hy-tooltip position=${'right'} alignement=${'end'}>
+        <span>This is a description of the p to the right and end</span>
+      </hy-tooltip>
+
+      <br /><br /><br />
+      <h3>LEFT</h3>
+      <span>hover me</span>
+      <hy-tooltip position=${'left'}>
+        <span>This is a description of the p to the left and center</span>
+      </hy-tooltip>
+      <br /><br /><br />
+
+      <span>hover me</span>
+      <hy-tooltip position=${'left'} alignement=${'start'}>
+        <span>This is a description of the p to the left and start</span>
+      </hy-tooltip>
+
+      <br /><br /><br />
+
+      <div>hover me</div>
+      <hy-tooltip position=${'left'} alignement=${'end'}>
+        <span>This is a description of the p to the left and end</span>
+      </hy-tooltip>
+    `;
+    }
+};
+ElMeenuElement.styles = [
+    css `
+      :host {
+        width: 800px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+    `,
+];
+__decorate([
+    state()
+], ElMeenuElement.prototype, "float", void 0);
+ElMeenuElement = __decorate([
+    customElement('hy-tooltips-demo')
+], ElMeenuElement);
+export { ElMeenuElement };
+//# sourceMappingURL=tooltips-demo.js.map

package/dist/src/components/tooltips/test/tooltips_test.d.ts

@@ -0,0 +1,2 @@
+import '../tooltips.component';
+//# sourceMappingURL=tooltips_test.d.ts.map