@nuralyui/tooltips 0.0.1

package/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").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'hy-tooltips-demo': ElMeenuElement;
+    }
+}
+//# sourceMappingURL=tooltips-demo.d.ts.map

package/demo/tooltips-demo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltips-demo.d.ts","sourceRoot":"","sources":["../../../../src/components/tooltips/demo/tooltips-demo.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AAEH,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAG1C,OAAO,uBAAuB,CAAC;AAE/B,qBACa,cAAe,SAAQ,UAAU;IAE5C,KAAK,SAAU;cAEI,MAAM;IA6FzB,OAAgB,MAAM,4BASpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}

package/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/demo/tooltips-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltips-demo.js","sourceRoot":"","sources":["../../../../src/components/tooltips/demo/tooltips-demo.ts"],"names":[],"mappings":"AAAA,uDAAuD;AACvD,uDAAuD;AACvD;;;;GAIG;;;;;;;AAEH,OAAO,EAAC,UAAU,EAAE,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAC;AAC1C,OAAO,EAAC,aAAa,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAEvD,OAAO,uBAAuB,CAAC;AAG/B,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,UAAU;IAA9C;;QAEE,UAAK,GAAG,MAAM,CAAC;IAyGjB,CAAC;IAvGoB,MAAM;QACvB,OAAO,IAAI,CAAA;;;;wBAIS,IAAI;iCACK,mCAAmC;2BACzC,iBAAiB;sBACtB,QAAQ;kBACZ,IAAI;oBACF,GAAG,EAAE;YACf,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;QAC1B,CAAC;qBACY,GAAG,EAAE;YAChB,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;QACzB,CAAC;;;;;;+BAMsB,OAAO;;;;;;+BAMP,KAAK;;;;;;;;6BAQP,KAAK;;;;;;6BAML,KAAK,eAAe,OAAO;;;;;;;6BAO3B,KAAK,eAAe,KAAK;;;;;;6BAMzB,OAAO;;;;;;;6BAOP,OAAO,eAAe,OAAO;;;;;;6BAM7B,OAAO,eAAe,KAAK;;;;;;;6BAO3B,MAAM;;;;;;6BAMN,MAAM,eAAe,OAAO;;;;;;;6BAO5B,MAAM,eAAe,KAAK;;;KAGlD,CAAC;IACJ,CAAC;CAYF,CAAA;AAViB,qBAAM,GAAG;IACvB,GAAG,CAAA;;;;;;;KAOF;CACD,CAAA;AAxGF;IADC,KAAK,EAAE;6CACO;AAFJ,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CA2G1B;SA3GY,cAAc","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/no-explicit-any */\n/**\n * @license\n * Copyright 2023 Google Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport {LitElement, css, html} from 'lit';\nimport {customElement, state} from 'lit/decorators.js';\n\nimport '../tooltips.component';\n\n@customElement('hy-tooltips-demo')\nexport class ElMeenuElement extends LitElement {\n  @state()\n  float = 'left';\n\n  protected override render() {\n    return html`\n      <h3>BOTTOM</h3>\n      <span>click me</span>\n      <hy-tooltip\n        .isPopConfirm=${true}\n        .popConfirmDescription=${'Are you sure to delete this task?'}\n        .popConfirmTitle=${'delete the task'}\n        .cancelText=${'Cancel'}\n        .okText=${'Ok'}\n        @onCancel=${() => {\n          console.log('canceled');\n        }}\n        @onConfirm=${() => {\n          console.log('confirm');\n        }}\n      >\n      </hy-tooltip>\n\n      <br /><br /><br />\n      <p>hover me</p>\n      <hy-tooltip alignement=${'start'}>\n        <span>This is bottom and start</span>\n      </hy-tooltip>\n\n      <br /><br /><br />\n      <p>hover me</p>\n      <hy-tooltip alignement=${'end'}>\n        <span>This is bottom and end</span>\n      </hy-tooltip>\n\n      <br /><br /><br />\n      <h3>TOP</h3>\n\n      <p>hover me</p>\n      <hy-tooltip position=${'top'}>\n        <span>This is a description of the p in top and center</span>\n      </hy-tooltip>\n      <br /><br /><br />\n      <div>hover me</div>\n\n      <hy-tooltip position=${'top'} alignement=${'start'}>\n        <span>This is a description of the p in top and start </span>\n      </hy-tooltip>\n      <br /><br /><br />\n\n      <p>hover me</p>\n\n      <hy-tooltip position=${'top'} alignement=${'end'}>\n        <span>This is a description of the p in top and end</span>\n      </hy-tooltip>\n      <br /><br /><br />\n      <h3>RIGHT</h3>\n      <span>hover me</span>\n      <hy-tooltip position=${'right'}>\n        <span>This is a description of the p to the right and center</span>\n      </hy-tooltip>\n\n      <br /><br /><br />\n\n      <div>hover me</div>\n      <hy-tooltip position=${'right'} alignement=${'start'}>\n        <span>This is a description of the p to the right and start</span>\n      </hy-tooltip>\n\n      <br /><br /><br />\n      <span>hover me</span>\n      <hy-tooltip position=${'right'} alignement=${'end'}>\n        <span>This is a description of the p to the right and end</span>\n      </hy-tooltip>\n\n      <br /><br /><br />\n      <h3>LEFT</h3>\n      <span>hover me</span>\n      <hy-tooltip position=${'left'}>\n        <span>This is a description of the p to the left and center</span>\n      </hy-tooltip>\n      <br /><br /><br />\n\n      <span>hover me</span>\n      <hy-tooltip position=${'left'} alignement=${'start'}>\n        <span>This is a description of the p to the left and start</span>\n      </hy-tooltip>\n\n      <br /><br /><br />\n\n      <div>hover me</div>\n      <hy-tooltip position=${'left'} alignement=${'end'}>\n        <span>This is a description of the p to the left and end</span>\n      </hy-tooltip>\n    `;\n  }\n\n  static override styles = [\n    css`\n      :host {\n        width: 800px;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n      }\n    `,\n  ];\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hy-tooltips-demo': ElMeenuElement;\n  }\n}\n"]}

package/index.d.ts

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

package/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tooltips/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC"}

package/index.js

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

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/tooltips/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC","sourcesContent":["export * from './tooltips.component.js';\n"]}

package/package.json

@@ -0,0 +1,15 @@
+{
+    "name": "@nuralyui/tooltips",
+    "version": "0.0.1",
+    "description": "",
+    "main": "index.js",
+    "type": "module",
+    "dependencies": {
+        "dayjs": "^1.11.7"
+    },
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "author": "Labidi Aymen",
+    "license": "ISC"
+}

package/react.d.ts

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

package/react.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/components/tooltips/react.ts"],"names":[],"mappings":""}

package/react.js

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

package/react.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/tooltips/react.ts"],"names":[],"mappings":"","sourcesContent":[""]}

package/test/tooltips_test.d.ts

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

package/test/tooltips_test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltips_test.d.ts","sourceRoot":"","sources":["../../../../src/components/tooltips/test/tooltips_test.ts"],"names":[],"mappings":"AACA,OAAO,uBAAuB,CAAC"}

package/test/tooltips_test.js

@@ -0,0 +1,145 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { html, fixture, expect } from '@open-wc/testing';
+import '../tooltips.component';
+import { TooltipAlignment, TooltipPosition } from '../tooltips.constant';
+suite('TooltipElement', () => {
+    test('shows tooltip on mouseover and hides on mouseleave', () => __awaiter(void 0, void 0, void 0, function* () {
+        const wrapper = yield fixture(html `
+      <div>
+        <span id="target">Hover me</span>
+        <hy-tooltip>Tooltip Content</hy-tooltip>
+      </div>
+    `);
+        const target = wrapper.querySelector('#target');
+        const tooltip = wrapper.querySelector('hy-tooltip');
+        expect(tooltip.show).to.be.false;
+        target.dispatchEvent(new MouseEvent('mouseover'));
+        expect(tooltip.show).to.be.true;
+        target.dispatchEvent(new MouseEvent('mouseleave'));
+        expect(tooltip.show).to.be.false;
+    }));
+    test('init tooltip position on mouseleave', () => __awaiter(void 0, void 0, void 0, function* () {
+        const wrapper = yield fixture(html `
+      <div>
+        <span id="target">Hover me</span>
+        <hy-tooltip>Tooltip Content</hy-tooltip>
+      </div>
+    `);
+        const target = wrapper.querySelector('#target');
+        const tooltip = wrapper.querySelector('hy-tooltip');
+        target.dispatchEvent(new MouseEvent('mouseover'));
+        yield tooltip.updateComplete;
+        expect(tooltip.show).to.be.true;
+        expect(tooltip.style.top).to.not.be.empty;
+        expect(tooltip.style.left).to.not.be.empty;
+        expect(tooltip.style.width).to.not.be.empty;
+        target.dispatchEvent(new MouseEvent('mouseleave'));
+        expect(tooltip.show).to.be.false;
+        expect(tooltip.style.top).to.be.empty;
+        expect(tooltip.style.left).to.be.empty;
+        expect(tooltip.style.width).to.be.empty;
+    }));
+    suite('calculates tooltip style correctly', () => {
+        test('tooltip style when position is bottom and alignement is center', () => __awaiter(void 0, void 0, void 0, function* () {
+            const wrapper = yield fixture(html `
+        <div>
+          <span id="target">Hover me</span>
+          <hy-tooltip position="${TooltipPosition.Bottom}" alignement="${TooltipAlignment.Center}">
+            Tooltip Content
+          </hy-tooltip>
+        </div>
+      `);
+            const target = wrapper.querySelector('#target');
+            const tooltip = wrapper.querySelector('hy-tooltip');
+            target.dispatchEvent(new MouseEvent('mouseover'));
+            yield tooltip.updateComplete;
+            const targetRect = target.getBoundingClientRect();
+            const tooltipRect = tooltip.getBoundingClientRect();
+            expect(Math.ceil(+tooltip.style.top.split('px')[0])).to.equal(Math.ceil(targetRect.bottom + tooltip.verticalOffset));
+            expect(Math.ceil(+tooltip.style.left.split('px')[0])).to.equal(Math.ceil(targetRect.left - tooltipRect.width / 2 + targetRect.width / 2));
+        }));
+        test('tooltip style when position is left and alignement is end', () => __awaiter(void 0, void 0, void 0, function* () {
+            const wrapper = yield fixture(html `
+        <div>
+          <span id="target">Hover me</span>
+          <hy-tooltip position="${TooltipPosition.Left}" alignement="${TooltipAlignment.End}">
+            Tooltip Content
+          </hy-tooltip>
+        </div>
+      `);
+            const target = wrapper.querySelector('#target');
+            const tooltip = wrapper.querySelector('hy-tooltip');
+            target.dispatchEvent(new MouseEvent('mouseover'));
+            yield tooltip.updateComplete;
+            const targetRect = target.getBoundingClientRect();
+            const tooltipRect = tooltip.getBoundingClientRect();
+            expect(Math.ceil(+tooltip.style.top.split('px')[0])).to.equal(Math.ceil(targetRect.bottom - tooltipRect.height));
+            expect(Math.ceil(+tooltip.style.left.split('px')[0])).to.equal(Math.ceil(targetRect.left - tooltipRect.width - tooltip.horizontalOffset));
+        }));
+        test('tooltip style when position is top and alignement is start', () => __awaiter(void 0, void 0, void 0, function* () {
+            const wrapper = yield fixture(html `
+        <div>
+          <span id="target">Hover me</span>
+          <hy-tooltip position="${TooltipPosition.Top}" alignement="${TooltipAlignment.Start}">
+            Tooltip Content
+          </hy-tooltip>
+        </div>
+      `);
+            const target = wrapper.querySelector('#target');
+            const tooltip = wrapper.querySelector('hy-tooltip');
+            target.dispatchEvent(new MouseEvent('mouseover'));
+            yield tooltip.updateComplete;
+            const targetRect = target.getBoundingClientRect();
+            const tooltipRect = tooltip.getBoundingClientRect();
+            expect(Math.ceil(+tooltip.style.top.split('px')[0])).to.equal(Math.ceil(targetRect.top - tooltipRect.height - tooltip.verticalOffset));
+            expect(Math.ceil(+tooltip.style.left.split('px')[0])).to.equal(Math.ceil(targetRect.left - tooltip.horizontalOffset));
+        }));
+    });
+    suite('removes event listeners on disconnectedCallback', () => {
+        test('removes mouseleave listener', () => __awaiter(void 0, void 0, void 0, function* () {
+            const wrapper = yield fixture(html `
+        <div>
+          <span id="target">Hover me</span>
+          <hy-tooltip>Tooltip Content</hy-tooltip>
+        </div>
+      `);
+            const target = wrapper.querySelector('#target');
+            const tooltip = wrapper.querySelector('hy-tooltip');
+            target.dispatchEvent(new MouseEvent('mouseover'));
+            expect(tooltip.show).to.be.true;
+            target.dispatchEvent(new MouseEvent('mouseleave'));
+            expect(tooltip.show).to.be.false;
+            target.dispatchEvent(new MouseEvent('mouseover'));
+            expect(tooltip.show).to.be.true;
+            wrapper.removeChild(tooltip);
+            target.dispatchEvent(new MouseEvent('mouseleave'));
+            expect(tooltip.show).to.be.true;
+        }));
+        test('removes mouseover listener', () => __awaiter(void 0, void 0, void 0, function* () {
+            const wrapper = yield fixture(html `
+        <div>
+          <span id="target">Hover me</span>
+          <hy-tooltip>Tooltip Content</hy-tooltip>
+        </div>
+      `);
+            const target = wrapper.querySelector('#target');
+            const tooltip = wrapper.querySelector('hy-tooltip');
+            target.dispatchEvent(new MouseEvent('mouseover'));
+            expect(tooltip.show).to.be.true;
+            target.dispatchEvent(new MouseEvent('mouseleave'));
+            expect(tooltip.show).to.be.false;
+            wrapper.removeChild(tooltip);
+            target.dispatchEvent(new MouseEvent('mouseover'));
+            expect(tooltip.show).to.be.false;
+        }));
+    });
+});
+//# sourceMappingURL=tooltips_test.js.map

package/test/tooltips_test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltips_test.js","sourceRoot":"","sources":["../../../../src/components/tooltips/test/tooltips_test.ts"],"names":[],"mappings":"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","sourcesContent":["import {html, fixture, expect} from '@open-wc/testing';\nimport '../tooltips.component';\nimport {TooltipElement} from '../tooltips.component';\nimport {TooltipAlignment, TooltipPosition} from '../tooltips.constant';\nsuite('TooltipElement', () => {\n  test('shows tooltip on mouseover and hides on mouseleave', async () => {\n    const wrapper = await fixture(html`\n      <div>\n        <span id=\"target\">Hover me</span>\n        <hy-tooltip>Tooltip Content</hy-tooltip>\n      </div>\n    `);\n    const target = wrapper.querySelector('#target')!;\n    const tooltip: TooltipElement = wrapper.querySelector('hy-tooltip')!;\n\n    expect(tooltip.show).to.be.false;\n\n    target.dispatchEvent(new MouseEvent('mouseover'));\n    expect(tooltip.show).to.be.true;\n\n    target.dispatchEvent(new MouseEvent('mouseleave'));\n    expect(tooltip.show).to.be.false;\n  });\n\n  test('init tooltip position on mouseleave', async () => {\n    const wrapper = await fixture(html`\n      <div>\n        <span id=\"target\">Hover me</span>\n        <hy-tooltip>Tooltip Content</hy-tooltip>\n      </div>\n    `);\n    const target = wrapper.querySelector('#target')!;\n    const tooltip: TooltipElement = wrapper.querySelector('hy-tooltip')!;\n    target.dispatchEvent(new MouseEvent('mouseover'));\n    await tooltip.updateComplete;\n    expect(tooltip.show).to.be.true;\n    expect(tooltip.style.top).to.not.be.empty;\n    expect(tooltip.style.left).to.not.be.empty;\n    expect(tooltip.style.width).to.not.be.empty;\n\n    target.dispatchEvent(new MouseEvent('mouseleave'));\n    expect(tooltip.show).to.be.false;\n    expect(tooltip.style.top).to.be.empty;\n    expect(tooltip.style.left).to.be.empty;\n    expect(tooltip.style.width).to.be.empty;\n  });\n\n  suite('calculates tooltip style correctly', () => {\n    test('tooltip style when position is bottom and alignement is center', async () => {\n      const wrapper = await fixture(html`\n        <div>\n          <span id=\"target\">Hover me</span>\n          <hy-tooltip position=\"${TooltipPosition.Bottom}\" alignement=\"${TooltipAlignment.Center}\">\n            Tooltip Content\n          </hy-tooltip>\n        </div>\n      `);\n      const target = wrapper.querySelector('#target')!;\n      const tooltip: TooltipElement = wrapper.querySelector('hy-tooltip')!;\n\n      target.dispatchEvent(new MouseEvent('mouseover'));\n\n      await tooltip.updateComplete;\n\n      const targetRect = target.getBoundingClientRect();\n      const tooltipRect = tooltip.getBoundingClientRect();\n\n      expect(Math.ceil(+tooltip.style.top.split('px')[0])).to.equal(\n        Math.ceil(targetRect.bottom + tooltip.verticalOffset)\n      );\n      expect(Math.ceil(+tooltip.style.left.split('px')[0])).to.equal(\n        Math.ceil(targetRect.left - tooltipRect.width / 2 + targetRect.width / 2)\n      );\n    });\n\n    test('tooltip style when position is left and alignement is end', async () => {\n      const wrapper = await fixture(html`\n        <div>\n          <span id=\"target\">Hover me</span>\n          <hy-tooltip position=\"${TooltipPosition.Left}\" alignement=\"${TooltipAlignment.End}\">\n            Tooltip Content\n          </hy-tooltip>\n        </div>\n      `);\n      const target = wrapper.querySelector('#target')!;\n      const tooltip: TooltipElement = wrapper.querySelector('hy-tooltip')!;\n\n      target.dispatchEvent(new MouseEvent('mouseover'));\n\n      await tooltip.updateComplete;\n\n      const targetRect = target.getBoundingClientRect();\n      const tooltipRect = tooltip.getBoundingClientRect();\n\n      expect(Math.ceil(+tooltip.style.top.split('px')[0])).to.equal(Math.ceil(targetRect.bottom - tooltipRect.height));\n      expect(Math.ceil(+tooltip.style.left.split('px')[0])).to.equal(\n        Math.ceil(targetRect.left - tooltipRect.width - tooltip.horizontalOffset)\n      );\n    });\n\n    test('tooltip style when position is top and alignement is start', async () => {\n      const wrapper = await fixture(html`\n        <div>\n          <span id=\"target\">Hover me</span>\n          <hy-tooltip position=\"${TooltipPosition.Top}\" alignement=\"${TooltipAlignment.Start}\">\n            Tooltip Content\n          </hy-tooltip>\n        </div>\n      `);\n      const target = wrapper.querySelector('#target')!;\n      const tooltip: TooltipElement = wrapper.querySelector('hy-tooltip')!;\n\n      target.dispatchEvent(new MouseEvent('mouseover'));\n\n      await tooltip.updateComplete;\n\n      const targetRect = target.getBoundingClientRect();\n      const tooltipRect = tooltip.getBoundingClientRect();\n\n      expect(Math.ceil(+tooltip.style.top.split('px')[0])).to.equal(\n        Math.ceil(targetRect.top - tooltipRect.height - tooltip.verticalOffset)\n      );\n      expect(Math.ceil(+tooltip.style.left.split('px')[0])).to.equal(\n        Math.ceil(targetRect.left - tooltip.horizontalOffset)\n      );\n    });\n  });\n\n  suite('removes event listeners on disconnectedCallback', () => {\n    test('removes mouseleave listener', async () => {\n      const wrapper = await fixture(html`\n        <div>\n          <span id=\"target\">Hover me</span>\n          <hy-tooltip>Tooltip Content</hy-tooltip>\n        </div>\n      `);\n      const target = wrapper.querySelector('#target')!;\n      const tooltip: TooltipElement = wrapper.querySelector('hy-tooltip')!;\n\n      target.dispatchEvent(new MouseEvent('mouseover'));\n      expect(tooltip.show).to.be.true;\n\n      target.dispatchEvent(new MouseEvent('mouseleave'));\n      expect(tooltip.show).to.be.false;\n\n      target.dispatchEvent(new MouseEvent('mouseover'));\n      expect(tooltip.show).to.be.true;\n\n      wrapper.removeChild(tooltip);\n      target.dispatchEvent(new MouseEvent('mouseleave'));\n      expect(tooltip.show).to.be.true;\n    });\n\n    test('removes mouseover listener', async () => {\n      const wrapper = await fixture(html`\n        <div>\n          <span id=\"target\">Hover me</span>\n          <hy-tooltip>Tooltip Content</hy-tooltip>\n        </div>\n      `);\n      const target = wrapper.querySelector('#target')!;\n      const tooltip: TooltipElement = wrapper.querySelector('hy-tooltip')!;\n\n      target.dispatchEvent(new MouseEvent('mouseover'));\n      expect(tooltip.show).to.be.true;\n\n      target.dispatchEvent(new MouseEvent('mouseleave'));\n      expect(tooltip.show).to.be.false;\n\n      wrapper.removeChild(tooltip);\n      target.dispatchEvent(new MouseEvent('mouseover'));\n      expect(tooltip.show).to.be.false;\n    });\n  });\n});\n"]}

package/tooltips.component.d.ts

@@ -0,0 +1,34 @@
+import { LitElement, nothing, PropertyValueMap } from 'lit';
+import '../button/hy-button.component.js';
+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").TemplateResult<1>;
+}
+//# sourceMappingURL=tooltips.component.d.ts.map

package/tooltips.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltips.component.d.ts","sourceRoot":"","sources":["../../../src/components/tooltips/tooltips.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,UAAU,EAAE,OAAO,EAAE,gBAAgB,EAAC,MAAM,KAAK,CAAC;AAGhE,OAAO,kCAAkC,CAAC;AAC1C,OAAO,EAAe,gBAAgB,EAAE,eAAe,EAAC,MAAM,wBAAwB,CAAC;AACvF,qBACa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,MAAM,4BAAU;IAGhC,QAAQ,kBAA0B;IAGlC,UAAU,mBAA2B;IAGrC,MAAM,EAAG,OAAO,CAAC;IAEjB,IAAI,UAAS;IAEb,YAAY,UAAS;IAErB,eAAe,SAAM;IAErB,qBAAqB,SAAM;IAE3B,MAAM,SAAS;IAEf,UAAU,SAAQ;IAElB,gBAAgB,SAAM;IACtB,cAAc,SAAM;IACX,iBAAiB,IAAI,IAAI;IAalC,OAAO,CAAC,WAAW,CAEjB;IAEF,OAAO,CAAC,YAAY,CAGlB;IAEF,OAAO,CAAC,OAAO,CAEb;IAEF,OAAO,CAAC,UAAU;IAOT,OAAO,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC,GAAG,IAAI;IAI7F,OAAO,CAAC,iBAAiB,CAWvB;IACF,OAAO,CAAC,kBAAkB,CA0BxB;IACF,OAAO,CAAC,oBAAoB,CA4C1B;IACF,OAAO,CAAC,kBAAkB,CA0BxB;IACF,OAAO,CAAC,oBAAoB,CA2C1B;IAEF,kBAAkB;IAKlB,mBAAmB;IAKnB,cAAc,iBAAkB,KAAK,UAInC;IACO,oBAAoB,IAAI,IAAI;IAW5B,MAAM;CAsBhB"}

package/tooltips.component.js

@@ -0,0 +1,309 @@
+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;
+};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { styles } from './tooltips.style.js';
+import '../button/hy-button.component.js';
+import { EMPTY_STRING, TooltipAlignment, TooltipPosition } from './tooltips.constant.js';
+let TooltipElement = class TooltipElement extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.position = TooltipPosition.Bottom;
+        this.alignement = TooltipAlignment.Center;
+        this.show = false;
+        this.isPopConfirm = false;
+        this.popConfirmTitle = '';
+        this.popConfirmDescription = '';
+        this.okText = 'Yes';
+        this.cancelText = 'No';
+        this.horizontalOffset = 10;
+        this.verticalOffset = 10;
+        this.onMouseOver = () => {
+            this.show = true;
+        };
+        this.onMouseLeave = () => {
+            this.show = false;
+            this.initStyles();
+        };
+        this.onClick = () => {
+            this.show = !this.show;
+        };
+        this.calculatePosition = () => {
+            this.initStyles();
+            this.style.width = `${this.clientWidth}px`;
+            if (this.position == TooltipPosition.Bottom || this.position == TooltipPosition.Top) {
+                this.calculateYposition();
+                this.calculateYalignement();
+            }
+            else {
+                this.calculateXposition();
+                this.calculateXalignement();
+            }
+        };
+        this.calculateYposition = () => {
+            const targetRect = this.target.getBoundingClientRect();
+            const targetWithTopSpaceHeight = targetRect.bottom;
+            const topAvailableSpace = targetRect.top;
+            const totalViewPortHeight = window.visualViewport.height;
+            const tooltipHeight = this.clientHeight;
+            const isAvailableBottomSpace = tooltipHeight + this.verticalOffset < totalViewPortHeight - targetWithTopSpaceHeight;
+            const isAvailableTopSpace = tooltipHeight + this.verticalOffset < topAvailableSpace;
+            if (this.position == TooltipPosition.Bottom) {
+                if (isAvailableBottomSpace || !isAvailableTopSpace) {
+                    this.classList.add('bottom-position');
+                    this.style.top = `${targetWithTopSpaceHeight + this.verticalOffset}px`;
+                }
+                else {
+                    this.classList.add('top-position');
+                    this.style.top = `${topAvailableSpace - tooltipHeight - this.verticalOffset}px`;
+                }
+            }
+            else {
+                if (isAvailableTopSpace || !isAvailableBottomSpace) {
+                    this.classList.add('top-position');
+                    this.style.top = `${topAvailableSpace - tooltipHeight - this.verticalOffset}px`;
+                }
+                else {
+                    this.classList.add('bottom-position');
+                    this.style.top = `${targetWithTopSpaceHeight + this.verticalOffset}px`;
+                }
+            }
+        };
+        this.calculateYalignement = () => {
+            const targetRect = this.target.getBoundingClientRect();
+            const leftSpaceAndTargetWidth = targetRect.right;
+            const targetWidth = targetRect.width;
+            const leftSpace = targetRect.left;
+            const tooltipWidth = this.clientWidth;
+            const leftSpaceAndHalfOfTargetWidth = leftSpace + targetWidth / 2;
+            const totalViewPortWidth = window.visualViewport.width;
+            const rightSpaceAndHalfOfTargetWidth = totalViewPortWidth - leftSpaceAndTargetWidth + targetWidth / 2;
+            if (this.alignement == TooltipAlignment.Start) {
+                const canBeAtStart = tooltipWidth + leftSpace < totalViewPortWidth;
+                if (canBeAtStart) {
+                    this.classList.add('alignement-start');
+                    this.style.left = `${leftSpace - this.horizontalOffset}px`;
+                }
+                else {
+                    this.classList.add('alignement-end');
+                    this.style.left = `${leftSpace - tooltipWidth + this.horizontalOffset}px`;
+                }
+            }
+            else if (this.alignement == TooltipAlignment.End) {
+                const canBeAtEnd = tooltipWidth < leftSpace;
+                if (canBeAtEnd) {
+                    this.classList.add('alignement-end');
+                    this.style.left = `${leftSpace - tooltipWidth + this.horizontalOffset}px`;
+                }
+                else {
+                    this.classList.add('alignement-start');
+                    this.style.left = `${leftSpace - this.horizontalOffset}px`;
+                }
+            }
+            else {
+                const canBeCentered = (tooltipWidth / 2 < leftSpaceAndHalfOfTargetWidth && tooltipWidth / 2 < rightSpaceAndHalfOfTargetWidth) ||
+                    (tooltipWidth > leftSpaceAndHalfOfTargetWidth && tooltipWidth > rightSpaceAndHalfOfTargetWidth);
+                const canBeAtEnd = tooltipWidth < leftSpaceAndHalfOfTargetWidth;
+                if (canBeCentered) {
+                    this.classList.add('alignement-center');
+                    this.style.left = `${leftSpace - tooltipWidth / 2 + targetWidth / 2}px`;
+                }
+                else if (canBeAtEnd) {
+                    this.classList.add('alignement-end');
+                    this.style.left = `${leftSpace - tooltipWidth + this.horizontalOffset}px`;
+                }
+                else {
+                    this.classList.add('alignement-start');
+                    this.style.left = `${leftSpace - this.horizontalOffset}px`;
+                }
+            }
+        };
+        this.calculateXposition = () => {
+            const targetRect = this.target.getBoundingClientRect();
+            const leftSpace = targetRect.left;
+            const leftSpaceAndTargetWidth = targetRect.right;
+            const totalViewPortWidth = window.visualViewport.width;
+            const tooltipWidth = this.clientWidth;
+            const isAvailableRightSpace = tooltipWidth + this.horizontalOffset < totalViewPortWidth - leftSpaceAndTargetWidth;
+            const isAvailableLeftSpace = tooltipWidth + this.horizontalOffset < leftSpace;
+            if (this.position == TooltipPosition.Right) {
+                if (isAvailableRightSpace || !isAvailableLeftSpace) {
+                    this.classList.add('right-position');
+                    this.style.left = `${leftSpaceAndTargetWidth + this.horizontalOffset}px`;
+                }
+                else {
+                    this.classList.add('left-position');
+                    this.style.left = `${leftSpace - tooltipWidth - this.horizontalOffset}px`;
+                }
+            }
+            else {
+                if (isAvailableLeftSpace || !isAvailableRightSpace) {
+                    this.classList.add('left-position');
+                    this.style.left = `${leftSpace - tooltipWidth - this.horizontalOffset}px`;
+                }
+                else {
+                    this.classList.add('right-position');
+                    this.style.left = `${leftSpaceAndTargetWidth + this.horizontalOffset}px`;
+                }
+            }
+        };
+        this.calculateXalignement = () => {
+            const targetRect = this.target.getBoundingClientRect();
+            const topSpace = targetRect.top;
+            const targetHeight = targetRect.height;
+            const targetWithTopSpaceHeight = targetRect.bottom;
+            const tooltipHeight = this.clientHeight;
+            const totalViewPortHeight = window.visualViewport.height;
+            const bottomSpace = totalViewPortHeight - targetWithTopSpaceHeight;
+            if (this.alignement == TooltipAlignment.End) {
+                const canBeAtEnd = tooltipHeight < topSpace;
+                if (canBeAtEnd) {
+                    this.classList.add('alignement-end');
+                    this.style.top = `${targetWithTopSpaceHeight - tooltipHeight}px`;
+                }
+                else {
+                    this.classList.add('alignement-start');
+                    this.style.top = `${topSpace - targetHeight / 4}px`;
+                }
+            }
+            else if (this.alignement == TooltipAlignment.Start) {
+                const canBeAtStart = tooltipHeight < totalViewPortHeight - targetWithTopSpaceHeight;
+                if (canBeAtStart) {
+                    this.classList.add('alignement-start');
+                    this.style.top = `${topSpace - targetHeight / 4}px`;
+                }
+                else {
+                    this.classList.add('alignement-end');
+                    this.style.top = `${targetWithTopSpaceHeight - tooltipHeight}px`;
+                }
+            }
+            else {
+                const canBeCentered = (tooltipHeight / 2 < topSpace && tooltipHeight / 2 < bottomSpace) ||
+                    (tooltipHeight > topSpace && tooltipHeight > bottomSpace);
+                const canBeAtEnd = tooltipHeight < topSpace;
+                if (canBeCentered) {
+                    this.classList.add('alignement-center');
+                    this.style.top = `${topSpace + targetHeight / 2 - tooltipHeight / 2}px`;
+                }
+                else if (canBeAtEnd) {
+                    this.classList.add('alignement-end');
+                    this.style.top = `${targetWithTopSpaceHeight - tooltipHeight}px`;
+                }
+                else {
+                    this.classList.add('alignement-start');
+                    this.style.top = `${topSpace - targetHeight / 4}px`;
+                }
+            }
+        };
+        this.onClickOutside = (onClickEvent) => {
+            const eventPath = onClickEvent.composedPath();
+            const outsideClick = !eventPath.includes(this.target) && !eventPath.includes(this);
+            if (outsideClick)
+                this.show = false;
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.target = this.previousElementSibling;
+        if (!this.isPopConfirm) {
+            this.target.addEventListener('mouseover', this.onMouseOver);
+            this.target.addEventListener('mouseleave', this.onMouseLeave);
+        }
+        else {
+            document.addEventListener('scroll', this.calculatePosition);
+            this.target.addEventListener('click', this.onClick);
+            document.addEventListener('click', this.onClickOutside);
+        }
+    }
+    initStyles() {
+        this.style.top = EMPTY_STRING;
+        this.style.left = EMPTY_STRING;
+        this.style.width = EMPTY_STRING;
+        this.classList.remove(...this.classList.values());
+    }
+    updated(_changedProperties) {
+        if (this.show)
+            this.calculatePosition();
+    }
+    onPopConfirmCancel() {
+        this.dispatchEvent(new CustomEvent('onCancel'));
+        this.show = false;
+        this.initStyles();
+    }
+    onPopConfirmConfirm() {
+        this.dispatchEvent(new CustomEvent('onConfirm'));
+        this.show = false;
+        this.initStyles();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (!this.isPopConfirm) {
+            this.target.removeEventListener('mouseover', this.onMouseOver);
+            this.target.removeEventListener('mouseleave', this.onMouseLeave);
+        }
+        else {
+            this.target.removeEventListener('click', this.onClick);
+            document.removeEventListener('scroll', this.calculatePosition);
+        }
+    }
+    render() {
+        return !this.isPopConfirm
+            ? this.show
+                ? html `<slot></slot>`
+                : nothing
+            : this.show
+                ? html `
+          <div class="popconfirm-container">
+            <p class="popconfirm-title">${this.popConfirmTitle}</p>
+            <p class="popconfirm-description">${this.popConfirmDescription}</p>
+            <div class="btn-block">
+              <hy-button .size=${'small'} type=${'primary'} @click=${this.onPopConfirmConfirm}
+                >${this.okText}</hy-button
+              >
+              <hy-button .size=${'small'} type=${'danger'} @click=${this.onPopConfirmCancel}
+                >${this.cancelText}</hy-button
+              >
+            </div>
+          </div>
+        `
+                : nothing;
+    }
+};
+TooltipElement.styles = styles;
+__decorate([
+    property({ reflect: true })
+], TooltipElement.prototype, "position", void 0);
+__decorate([
+    property({ reflect: true })
+], TooltipElement.prototype, "alignement", void 0);
+__decorate([
+    state()
+], TooltipElement.prototype, "target", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], TooltipElement.prototype, "show", void 0);
+__decorate([
+    property()
+], TooltipElement.prototype, "isPopConfirm", void 0);
+__decorate([
+    property()
+], TooltipElement.prototype, "popConfirmTitle", void 0);
+__decorate([
+    property()
+], TooltipElement.prototype, "popConfirmDescription", void 0);
+__decorate([
+    property()
+], TooltipElement.prototype, "okText", void 0);
+__decorate([
+    property()
+], TooltipElement.prototype, "cancelText", void 0);
+TooltipElement = __decorate([
+    customElement('hy-tooltip')
+], TooltipElement);
+export { TooltipElement };
+//# sourceMappingURL=tooltips.component.js.map

package/tooltips.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltips.component.js","sourceRoot":"","sources":["../../../src/components/tooltips/tooltips.component.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport {html, LitElement, nothing, PropertyValueMap} from 'lit';\nimport {customElement, property, state} from 'lit/decorators.js';\nimport {styles} from './tooltips.style.js';\nimport '../button/hy-button.component.js';\nimport {EMPTY_STRING, TooltipAlignment, TooltipPosition} from './tooltips.constant.js';\n@customElement('hy-tooltip')\nexport class TooltipElement extends LitElement {\n  static override styles = styles;\n\n  @property({reflect: true})\n  position = TooltipPosition.Bottom;\n\n  @property({reflect: true})\n  alignement = TooltipAlignment.Center;\n\n  @state()\n  target!: Element;\n  @property({reflect: true, type: Boolean})\n  show = false;\n  @property()\n  isPopConfirm = false;\n  @property()\n  popConfirmTitle = '';\n  @property()\n  popConfirmDescription = '';\n  @property()\n  okText = 'Yes';\n  @property()\n  cancelText = 'No';\n\n  horizontalOffset = 10;\n  verticalOffset = 10;\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.target = this.previousElementSibling!;\n    if (!this.isPopConfirm) {\n      this.target.addEventListener('mouseover', this.onMouseOver);\n      this.target.addEventListener('mouseleave', this.onMouseLeave);\n    } else {\n      document.addEventListener('scroll', this.calculatePosition);\n      this.target.addEventListener('click', this.onClick);\n      document.addEventListener('click', this.onClickOutside);\n    }\n  }\n\n  private onMouseOver = () => {\n    this.show = true;\n  };\n\n  private onMouseLeave = () => {\n    this.show = false;\n    this.initStyles();\n  };\n\n  private onClick = () => {\n    this.show = !this.show;\n  };\n\n  private initStyles() {\n    this.style.top = EMPTY_STRING;\n    this.style.left = EMPTY_STRING;\n    this.style.width = EMPTY_STRING;\n    this.classList.remove(...this.classList.values());\n  }\n\n  override updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {\n    if (this.show) this.calculatePosition();\n  }\n\n  private calculatePosition = () => {\n    this.initStyles();\n\n    this.style.width = `${this.clientWidth}px`;\n    if (this.position == TooltipPosition.Bottom || this.position == TooltipPosition.Top) {\n      this.calculateYposition();\n      this.calculateYalignement();\n    } else {\n      this.calculateXposition();\n      this.calculateXalignement();\n    }\n  };\n  private calculateYposition = () => {\n    const targetRect = this.target.getBoundingClientRect();\n    const targetWithTopSpaceHeight = targetRect.bottom;\n    const topAvailableSpace = targetRect.top;\n    const totalViewPortHeight = window.visualViewport!.height;\n    const tooltipHeight = this.clientHeight;\n    const isAvailableBottomSpace = tooltipHeight + this.verticalOffset < totalViewPortHeight - targetWithTopSpaceHeight;\n    const isAvailableTopSpace = tooltipHeight + this.verticalOffset < topAvailableSpace;\n\n    if (this.position == TooltipPosition.Bottom) {\n      if (isAvailableBottomSpace || !isAvailableTopSpace) {\n        this.classList.add('bottom-position');\n        this.style.top = `${targetWithTopSpaceHeight + this.verticalOffset}px`;\n      } else {\n        this.classList.add('top-position');\n        this.style.top = `${topAvailableSpace - tooltipHeight - this.verticalOffset}px`;\n      }\n    } else {\n      if (isAvailableTopSpace || !isAvailableBottomSpace) {\n        this.classList.add('top-position');\n        this.style.top = `${topAvailableSpace - tooltipHeight - this.verticalOffset}px`;\n      } else {\n        this.classList.add('bottom-position');\n        this.style.top = `${targetWithTopSpaceHeight + this.verticalOffset}px`;\n      }\n    }\n  };\n  private calculateYalignement = () => {\n    const targetRect = this.target.getBoundingClientRect();\n    const leftSpaceAndTargetWidth = targetRect.right;\n    const targetWidth = targetRect.width;\n    const leftSpace = targetRect.left;\n    const tooltipWidth = this.clientWidth;\n    const leftSpaceAndHalfOfTargetWidth = leftSpace + targetWidth / 2;\n    const totalViewPortWidth = window.visualViewport!.width;\n    const rightSpaceAndHalfOfTargetWidth = totalViewPortWidth - leftSpaceAndTargetWidth + targetWidth / 2;\n\n    if (this.alignement == TooltipAlignment.Start) {\n      const canBeAtStart = tooltipWidth + leftSpace < totalViewPortWidth;\n      if (canBeAtStart) {\n        this.classList.add('alignement-start');\n        this.style.left = `${leftSpace - this.horizontalOffset}px`;\n      } else {\n        this.classList.add('alignement-end');\n        this.style.left = `${leftSpace - tooltipWidth + this.horizontalOffset}px`;\n      }\n    } else if (this.alignement == TooltipAlignment.End) {\n      const canBeAtEnd = tooltipWidth < leftSpace;\n      if (canBeAtEnd) {\n        this.classList.add('alignement-end');\n        this.style.left = `${leftSpace - tooltipWidth + this.horizontalOffset}px`;\n      } else {\n        this.classList.add('alignement-start');\n        this.style.left = `${leftSpace - this.horizontalOffset}px`;\n      }\n    } else {\n      const canBeCentered =\n        (tooltipWidth / 2 < leftSpaceAndHalfOfTargetWidth && tooltipWidth / 2 < rightSpaceAndHalfOfTargetWidth) ||\n        (tooltipWidth > leftSpaceAndHalfOfTargetWidth && tooltipWidth > rightSpaceAndHalfOfTargetWidth);\n      const canBeAtEnd = tooltipWidth < leftSpaceAndHalfOfTargetWidth;\n      if (canBeCentered) {\n        this.classList.add('alignement-center');\n        this.style.left = `${leftSpace - tooltipWidth / 2 + targetWidth / 2}px`;\n      } else if (canBeAtEnd) {\n        this.classList.add('alignement-end');\n        this.style.left = `${leftSpace - tooltipWidth + this.horizontalOffset}px`;\n      } else {\n        this.classList.add('alignement-start');\n        this.style.left = `${leftSpace - this.horizontalOffset}px`;\n      }\n    }\n  };\n  private calculateXposition = () => {\n    const targetRect = this.target.getBoundingClientRect();\n    const leftSpace = targetRect.left;\n    const leftSpaceAndTargetWidth = targetRect.right;\n    const totalViewPortWidth = window.visualViewport!.width;\n    const tooltipWidth = this.clientWidth;\n    const isAvailableRightSpace = tooltipWidth + this.horizontalOffset < totalViewPortWidth - leftSpaceAndTargetWidth;\n    const isAvailableLeftSpace = tooltipWidth + this.horizontalOffset < leftSpace;\n\n    if (this.position == TooltipPosition.Right) {\n      if (isAvailableRightSpace || !isAvailableLeftSpace) {\n        this.classList.add('right-position');\n        this.style.left = `${leftSpaceAndTargetWidth + this.horizontalOffset}px`;\n      } else {\n        this.classList.add('left-position');\n        this.style.left = `${leftSpace - tooltipWidth - this.horizontalOffset}px`;\n      }\n    } else {\n      if (isAvailableLeftSpace || !isAvailableRightSpace) {\n        this.classList.add('left-position');\n        this.style.left = `${leftSpace - tooltipWidth - this.horizontalOffset}px`;\n      } else {\n        this.classList.add('right-position');\n        this.style.left = `${leftSpaceAndTargetWidth + this.horizontalOffset}px`;\n      }\n    }\n  };\n  private calculateXalignement = () => {\n    const targetRect = this.target.getBoundingClientRect();\n    const topSpace = targetRect.top;\n    const targetHeight = targetRect.height;\n    const targetWithTopSpaceHeight = targetRect.bottom;\n    const tooltipHeight = this.clientHeight;\n    const totalViewPortHeight = window.visualViewport!.height;\n    const bottomSpace = totalViewPortHeight - targetWithTopSpaceHeight;\n\n    if (this.alignement == TooltipAlignment.End) {\n      const canBeAtEnd = tooltipHeight < topSpace;\n      if (canBeAtEnd) {\n        this.classList.add('alignement-end');\n        this.style.top = `${targetWithTopSpaceHeight - tooltipHeight}px`;\n      } else {\n        this.classList.add('alignement-start');\n        this.style.top = `${topSpace - targetHeight / 4}px`;\n      }\n    } else if (this.alignement == TooltipAlignment.Start) {\n      const canBeAtStart = tooltipHeight < totalViewPortHeight - targetWithTopSpaceHeight;\n      if (canBeAtStart) {\n        this.classList.add('alignement-start');\n        this.style.top = `${topSpace - targetHeight / 4}px`;\n      } else {\n        this.classList.add('alignement-end');\n        this.style.top = `${targetWithTopSpaceHeight - tooltipHeight}px`;\n      }\n    } else {\n      const canBeCentered =\n        (tooltipHeight / 2 < topSpace && tooltipHeight / 2 < bottomSpace) ||\n        (tooltipHeight > topSpace && tooltipHeight > bottomSpace);\n      const canBeAtEnd = tooltipHeight < topSpace;\n      if (canBeCentered) {\n        this.classList.add('alignement-center');\n        this.style.top = `${topSpace + targetHeight / 2 - tooltipHeight / 2}px`;\n      } else if (canBeAtEnd) {\n        this.classList.add('alignement-end');\n        this.style.top = `${targetWithTopSpaceHeight - tooltipHeight}px`;\n      } else {\n        this.classList.add('alignement-start');\n        this.style.top = `${topSpace - targetHeight / 4}px`;\n      }\n    }\n  };\n\n  onPopConfirmCancel() {\n    this.dispatchEvent(new CustomEvent('onCancel'));\n    this.show = false;\n    this.initStyles();\n  }\n  onPopConfirmConfirm() {\n    this.dispatchEvent(new CustomEvent('onConfirm'));\n    this.show = false;\n    this.initStyles();\n  }\n  onClickOutside = (onClickEvent: Event) => {\n    const eventPath = onClickEvent.composedPath();\n    const outsideClick = !eventPath.includes(this.target) && !eventPath.includes(this);\n    if (outsideClick) this.show = false;\n  };\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    if (!this.isPopConfirm) {\n      this.target.removeEventListener('mouseover', this.onMouseOver);\n      this.target.removeEventListener('mouseleave', this.onMouseLeave);\n    } else {\n      this.target.removeEventListener('click', this.onClick);\n      document.removeEventListener('scroll', this.calculatePosition);\n    }\n  }\n\n  override render() {\n    return !this.isPopConfirm\n      ? this.show\n        ? html`<slot></slot>`\n        : nothing\n      : this.show\n      ? html`\n          <div class=\"popconfirm-container\">\n            <p class=\"popconfirm-title\">${this.popConfirmTitle}</p>\n            <p class=\"popconfirm-description\">${this.popConfirmDescription}</p>\n            <div class=\"btn-block\">\n              <hy-button .size=${'small'} type=${'primary'} @click=${this.onPopConfirmConfirm}\n                >${this.okText}</hy-button\n              >\n              <hy-button .size=${'small'} type=${'danger'} @click=${this.onPopConfirmCancel}\n                >${this.cancelText}</hy-button\n              >\n            </div>\n          </div>\n        `\n      : nothing;\n  }\n}\n"]}

package/tooltips.constant.d.ts

@@ -0,0 +1,13 @@
+export declare enum TooltipPosition {
+    Top = "top",
+    Bottom = "bottom",
+    Right = "right",
+    Left = "left"
+}
+export declare enum TooltipAlignment {
+    Start = "start",
+    Center = "center",
+    End = "end"
+}
+export declare const EMPTY_STRING = "";
+//# sourceMappingURL=tooltips.constant.d.ts.map

package/tooltips.constant.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltips.constant.d.ts","sourceRoot":"","sources":["../../../src/components/tooltips/tooltips.constant.ts"],"names":[],"mappings":"AAAA,oBAAY,eAAe;IACzB,GAAG,QAAQ;IACX,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,IAAI,SAAS;CACd;AAED,oBAAY,gBAAgB;IAC1B,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,GAAG,QAAQ;CACZ;AAGD,eAAO,MAAM,YAAY,KAAK,CAAC"}

package/tooltips.constant.js

@@ -0,0 +1,15 @@
+export var TooltipPosition;
+(function (TooltipPosition) {
+    TooltipPosition["Top"] = "top";
+    TooltipPosition["Bottom"] = "bottom";
+    TooltipPosition["Right"] = "right";
+    TooltipPosition["Left"] = "left";
+})(TooltipPosition || (TooltipPosition = {}));
+export var TooltipAlignment;
+(function (TooltipAlignment) {
+    TooltipAlignment["Start"] = "start";
+    TooltipAlignment["Center"] = "center";
+    TooltipAlignment["End"] = "end";
+})(TooltipAlignment || (TooltipAlignment = {}));
+export const EMPTY_STRING = '';
+//# sourceMappingURL=tooltips.constant.js.map

package/tooltips.constant.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltips.constant.js","sourceRoot":"","sources":["../../../src/components/tooltips/tooltips.constant.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,eAKX;AALD,WAAY,eAAe;IACzB,8BAAW,CAAA;IACX,oCAAiB,CAAA;IACjB,kCAAe,CAAA;IACf,gCAAa,CAAA;AACf,CAAC,EALW,eAAe,KAAf,eAAe,QAK1B;AAED,MAAM,CAAN,IAAY,gBAIX;AAJD,WAAY,gBAAgB;IAC1B,mCAAe,CAAA;IACf,qCAAiB,CAAA;IACjB,+BAAW,CAAA;AACb,CAAC,EAJW,gBAAgB,KAAhB,gBAAgB,QAI3B;AAGD,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,CAAC","sourcesContent":["export enum TooltipPosition {\n  Top = 'top',\n  Bottom = 'bottom',\n  Right = 'right',\n  Left = 'left',\n}\n\nexport enum TooltipAlignment {\n  Start = 'start',\n  Center = 'center',\n  End = 'end',\n}\n\n\nexport const EMPTY_STRING = '';"]}

package/tooltips.style.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult[];
+//# sourceMappingURL=tooltips.style.d.ts.map

package/tooltips.style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltips.style.d.ts","sourceRoot":"","sources":["../../../src/components/tooltips/tooltips.style.ts"],"names":[],"mappings":"AAoGA,eAAO,MAAM,MAAM,2BAAkC,CAAC"}

package/tooltips.style.js

@@ -0,0 +1,101 @@
+import { css } from 'lit';
+import { styleVariables } from './tooltips.variables.js';
+const tooltipStyles = css `
+  :host([show]) {
+    background-color: var(--hybrid-tooltip-background-color);
+    color: var(--hybrid-tooltip-text-color);
+    position: fixed;
+    padding: 5px;
+    text-align: center;
+    opacity: 0;
+    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(--hybrid-tooltip-background-color);
+    top: 100%;
+  }
+  :host(.left-position)::after {
+    border-left-color: var(--hybrid-tooltip-background-color);
+    left: 100%;
+  }
+
+  :host(.right-position)::after {
+    border-right-color: var(--hybrid-tooltip-background-color);
+    right: 100%;
+  }
+  :host(.bottom-position)::after {
+    border-bottom-color: var(--hybrid-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;
+  }
+`;
+export const styles = [tooltipStyles, styleVariables];
+//# sourceMappingURL=tooltips.style.js.map

package/tooltips.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltips.style.js","sourceRoot":"","sources":["../../../src/components/tooltips/tooltips.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,OAAO,EAAC,cAAc,EAAC,MAAM,yBAAyB,CAAC;AAEvD,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgGxB,CAAC;AACF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,aAAa,EAAE,cAAc,CAAC,CAAC","sourcesContent":["import {css} from 'lit';\nimport {styleVariables} from './tooltips.variables.js';\n\nconst tooltipStyles = css`\n  :host([show]) {\n    background-color: var(--hybrid-tooltip-background-color);\n    color: var(--hybrid-tooltip-text-color);\n    position: fixed;\n    padding: 5px;\n    text-align: center;\n    opacity: 0;\n    border-radius: 4px;\n    animation-name: show-animation;\n    animation-duration: 0.4s;\n    animation-fill-mode: forwards;\n  }\n\n  .popconfirm-container {\n    display: flex;\n    flex-direction: column;\n  }\n  .btn-block {\n    display: flex;\n    justify-content: end;\n    gap: 10px;\n    margin: 10px;\n  }\n\n  .popconfirm-description,\n  .popconfirm-title {\n    margin: 5px;\n    text-align: left;\n  }\n  .popconfirm-title {\n    font-weight: bold;\n  }\n\n  @keyframes show-animation {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n\n  :host::after {\n    content: '';\n    height: 0;\n    width: 0;\n    position: absolute;\n    border: 5px solid transparent;\n  }\n  :host(.top-position)::after {\n    border-top-color: var(--hybrid-tooltip-background-color);\n    top: 100%;\n  }\n  :host(.left-position)::after {\n    border-left-color: var(--hybrid-tooltip-background-color);\n    left: 100%;\n  }\n\n  :host(.right-position)::after {\n    border-right-color: var(--hybrid-tooltip-background-color);\n    right: 100%;\n  }\n  :host(.bottom-position)::after {\n    border-bottom-color: var(--hybrid-tooltip-background-color);\n    bottom: 100%;\n  }\n  :host(.alignement-center.top-position)::after,\n  :host(.alignement-center.bottom-position)::after {\n    right: 50%;\n    transform: translate(50%);\n  }\n\n  :host(.alignement-start.top-position)::after,\n  :host(.alignement-start.bottom-position)::after {\n    left: 4%;\n  }\n  :host(.top-position.alignement-end)::after,\n  :host(.alignement-end.bottom-position)::after {\n    right: 4%;\n  }\n\n  :host(.alignement-center.left-position)::after,\n  :host(.alignement-center.right-position)::after {\n    top: 50%;\n    transform: translate(0%, -50%);\n  }\n\n  :host(.alignement-start.left-position)::after,\n  :host(.alignement-start.right-position)::after {\n    top: 5px;\n  }\n  :host(.alignement-end.left-position)::after,\n  :host(.alignement-end.right-position)::after {\n    bottom: 5px;\n  }\n`;\nexport const styles = [tooltipStyles, styleVariables];\n"]}

package/tooltips.variables.d.ts

@@ -0,0 +1,2 @@
+export declare const styleVariables: import("lit").CSSResult;
+//# sourceMappingURL=tooltips.variables.d.ts.map

package/tooltips.variables.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltips.variables.d.ts","sourceRoot":"","sources":["../../../src/components/tooltips/tooltips.variables.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,yBAW1B,CAAC"}

package/tooltips.variables.js

@@ -0,0 +1,14 @@
+import { css } from 'lit';
+export const styleVariables = css `
+  :host {
+    --hybrid-tooltip-background-color: #393939;
+    --hybrid-tooltip-text-color: #ffffff;
+  }
+  @media (prefers-color-scheme: dark) {
+    :host {
+      --hybrid-tooltip-background-color: #f4f4f4;
+      --hybrid-tooltip-text-color: #161616;
+    }
+  }
+`;
+//# sourceMappingURL=tooltips.variables.js.map

package/tooltips.variables.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltips.variables.js","sourceRoot":"","sources":["../../../src/components/tooltips/tooltips.variables.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;CAWhC,CAAC","sourcesContent":["import {css} from 'lit';\n\nexport const styleVariables = css`\n  :host {\n    --hybrid-tooltip-background-color: #393939;\n    --hybrid-tooltip-text-color: #ffffff;\n  }\n  @media (prefers-color-scheme: dark) {\n    :host {\n      --hybrid-tooltip-background-color: #f4f4f4;\n      --hybrid-tooltip-text-color: #161616;\n    }\n  }\n`;\n"]}