@nuralyui/modal 0.0.1

package/demo/modal-demo.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+import '../modal.component';
+export declare class ElMeenuElement extends LitElement {
+    isOpen: boolean;
+    modal1: boolean;
+    modal2: boolean;
+    modal1_1: boolean;
+    protected render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'hy-modals-demo': ElMeenuElement;
+    }
+}
+//# sourceMappingURL=modal-demo.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"modal-demo.d.ts","sourceRoot":"","sources":["../../../../src/components/modal/demo/modal-demo.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AAEH,OAAO,EAAC,UAAU,EAAO,MAAM,KAAK,CAAC;AAGrC,OAAO,oBAAoB,CAAC;AAE5B,qBACa,cAAe,SAAQ,UAAU;IAE5C,MAAM,UAAQ;IAEd,MAAM,UAAS;IAEf,MAAM,UAAS;IAGf,QAAQ,UAAS;cAEE,MAAM;CA8D1B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,cAAc,CAAC;KAClC;CACF"}

package/demo/modal-demo.js

@@ -0,0 +1,104 @@
+/* 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, html } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import '../modal.component';
+let ElMeenuElement = class ElMeenuElement extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.isOpen = true;
+        this.modal1 = false;
+        this.modal2 = false;
+        this.modal1_1 = false;
+    }
+    render() {
+        return html `
+      <div id="overlay-container"></div>
+      <button
+        @click=${() => {
+            this.modal1 = !this.modal1;
+        }}
+      >
+        Toggle Modale</button
+      >qsd
+      <modal-component label="Modal Title" ?isOpen=${this.modal1}>
+        <p>This is the content of the modal.</p>
+        <div slot="footer">
+          <button
+            @click=${() => {
+            this.modal2 = !this.modal2;
+        }}
+          >
+            Custom Action
+          </button>
+        </div>
+
+        <modal-component ?isOpen=${this.modal2} label="Modal Title 2">
+          <div slot="footer">
+            <h2>Modal Title</h2>
+            <p>This is the content of the modal.</p>
+            <button
+              @click=${() => {
+            this.modal2 = !this.modal2;
+        }}
+            >
+              Close this modal
+            </button>
+          </div>
+        </modal-component>
+      </modal-component>
+
+      <button
+        @click=${() => {
+            this.modal1_1 = !this.modal1_1;
+        }}
+      >
+        Toggle Modale</button
+      >qsd
+      <modal-component ?isOpen=${this.modal1_1}>
+        <h2>Modal Title</h2>
+        <p>This is the content of the modal.lmjqsdmlqjsdlmjqsdmljqsdlmqjsdqs</p>
+        <button
+          @click=${() => {
+            this.modal2 = !this.modal2;
+        }}
+        >
+          Custom Action
+        </button>
+        <modal-component ?isOpen=${this.modal2}>
+          <h2>Modal Title</h2>
+          <p>This is the content of the modal.</p>
+          <button>Custom Action</button>
+        </modal-component>
+      </modal-component>
+    `;
+    }
+};
+__decorate([
+    state()
+], ElMeenuElement.prototype, "isOpen", void 0);
+__decorate([
+    state()
+], ElMeenuElement.prototype, "modal1", void 0);
+__decorate([
+    state()
+], ElMeenuElement.prototype, "modal2", void 0);
+__decorate([
+    state()
+], ElMeenuElement.prototype, "modal1_1", void 0);
+ElMeenuElement = __decorate([
+    customElement('hy-modals-demo')
+], ElMeenuElement);
+export { ElMeenuElement };
+//# sourceMappingURL=modal-demo.js.map

package/demo/modal-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal-demo.js","sourceRoot":"","sources":["../../../../src/components/modal/demo/modal-demo.ts"],"names":[],"mappings":"AAAA,uDAAuD;AACvD,uDAAuD;AACvD;;;;GAIG;;;;;;;AAEH,OAAO,EAAC,UAAU,EAAE,IAAI,EAAC,MAAM,KAAK,CAAC;AACrC,OAAO,EAAC,aAAa,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAEvD,OAAO,oBAAoB,CAAC;AAG5B,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,UAAU;IAA9C;;QAEE,WAAM,GAAG,IAAI,CAAC;QAEd,WAAM,GAAG,KAAK,CAAC;QAEf,WAAM,GAAG,KAAK,CAAC;QAGf,aAAQ,GAAG,KAAK,CAAC;IAgEnB,CAAC;IA9DoB,MAAM;QACvB,OAAO,IAAI,CAAA;;;iBAGE,GAAG,EAAE;YACZ,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;QAC7B,CAAC;;;;qDAI4C,IAAI,CAAC,MAAM;;;;qBAI3C,GAAG,EAAE;YACZ,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;QAC7B,CAAC;;;;;;mCAMsB,IAAI,CAAC,MAAM;;;;;uBAKvB,GAAG,EAAE;YACZ,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;QAC7B,CAAC;;;;;;;;;iBASE,GAAG,EAAE;YACZ,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QACjC,CAAC;;;;iCAIwB,IAAI,CAAC,QAAQ;;;;mBAI3B,GAAG,EAAE;YACZ,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;QAC7B,CAAC;;;;mCAIwB,IAAI,CAAC,MAAM;;;;;;KAMzC,CAAC;IACJ,CAAC;CACF,CAAA;AAvEC;IADC,KAAK,EAAE;8CACM;AAEd;IADC,KAAK,EAAE;8CACO;AAEf;IADC,KAAK,EAAE;8CACO;AAGf;IADC,KAAK,EAAE;gDACS;AATN,cAAc;IAD1B,aAAa,CAAC,gBAAgB,CAAC;GACnB,cAAc,CAyE1B;SAzEY,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, html} from 'lit';\nimport {customElement, state} from 'lit/decorators.js';\n\nimport '../modal.component';\n\n@customElement('hy-modals-demo')\nexport class ElMeenuElement extends LitElement {\n  @state()\n  isOpen = true;\n  @state()\n  modal1 = false;\n  @state()\n  modal2 = false;\n\n  @state()\n  modal1_1 = false;\n\n  protected override render() {\n    return html`\n      <div id=\"overlay-container\"></div>\n      <button\n        @click=${() => {\n          this.modal1 = !this.modal1;\n        }}\n      >\n        Toggle Modale</button\n      >qsd\n      <modal-component label=\"Modal Title\" ?isOpen=${this.modal1}>\n        <p>This is the content of the modal.</p>\n        <div slot=\"footer\">\n          <button\n            @click=${() => {\n              this.modal2 = !this.modal2;\n            }}\n          >\n            Custom Action\n          </button>\n        </div>\n\n        <modal-component ?isOpen=${this.modal2} label=\"Modal Title 2\">\n          <div slot=\"footer\">\n            <h2>Modal Title</h2>\n            <p>This is the content of the modal.</p>\n            <button\n              @click=${() => {\n                this.modal2 = !this.modal2;\n              }}\n            >\n              Close this modal\n            </button>\n          </div>\n        </modal-component>\n      </modal-component>\n\n      <button\n        @click=${() => {\n          this.modal1_1 = !this.modal1_1;\n        }}\n      >\n        Toggle Modale</button\n      >qsd\n      <modal-component ?isOpen=${this.modal1_1}>\n        <h2>Modal Title</h2>\n        <p>This is the content of the modal.lmjqsdmlqjsdlmjqsdmljqsdlmqjsdqs</p>\n        <button\n          @click=${() => {\n            this.modal2 = !this.modal2;\n          }}\n        >\n          Custom Action\n        </button>\n        <modal-component ?isOpen=${this.modal2}>\n          <h2>Modal Title</h2>\n          <p>This is the content of the modal.</p>\n          <button>Custom Action</button>\n        </modal-component>\n      </modal-component>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hy-modals-demo': ElMeenuElement;\n  }\n}\n"]}

package/index.d.ts

@@ -0,0 +1,2 @@
+export * from './modal.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/modal/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC"}

package/index.js

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

package/index.js.map

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

package/modal.component.d.ts

@@ -0,0 +1,24 @@
+import { LitElement } from 'lit';
+export declare class ModalComponent extends LitElement {
+    static styles: import("lit").CSSResult;
+    isOpen: boolean;
+    label: string;
+    private offsetX;
+    private offsetY;
+    private isDragging;
+    private initialX;
+    private initialY;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private startDrag;
+    private drag;
+    private handleKeyDown;
+    private handleOutsideClick;
+    private isChildDialog;
+    closeModal(): void;
+    private adjustDialogPosition;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    private stopDrag;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=modal.component.d.ts.map

package/modal.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.component.d.ts","sourceRoot":"","sources":["../../../src/components/modal/modal.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAY,UAAU,EAAC,MAAM,KAAK,CAAC;AAI1C,qBAAa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,MAAM,0BA0DpB;IAGF,MAAM,EAAG,OAAO,CAAC;IAGjB,KAAK,SAAM;IAGX,OAAO,CAAC,OAAO,CAAK;IAGpB,OAAO,CAAC,OAAO,CAAK;IAEpB,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,QAAQ,CAAK;IACrB,OAAO,CAAC,QAAQ,CAAK;IAEZ,iBAAiB;IASjB,oBAAoB;IAS7B,OAAO,CAAC,SAAS;IASjB,OAAO,CAAC,IAAI;IASZ,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,aAAa;IAWrB,UAAU;IASV,OAAO,CAAC,oBAAoB;IAcnB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC;IAY1E,OAAO,CAAC,QAAQ;IAIP,MAAM;CAwBhB"}

package/modal.component.js

@@ -0,0 +1,202 @@
+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 { css, html, LitElement } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+export class ModalComponent extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.label = '';
+        this.offsetX = 0;
+        this.offsetY = 0;
+        this.isDragging = false;
+        this.initialX = 0;
+        this.initialY = 0;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // this.addEventListener('mousedown', this.startDrag);
+        document.addEventListener('mousemove', this.drag.bind(this));
+        // this.addEventListener('mouseup', this.stopDrag);
+        document.addEventListener('keydown', this.handleKeyDown.bind(this));
+        //  document.addEventListener('click', this.handleOutsideClick.bind(this));
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        // this.removeEventListener('mousedown', this.startDrag);
+        document.removeEventListener('mousemove', this.drag);
+        // this.removeEventListener('mouseup', this.stopDrag);
+        document.removeEventListener('keydown', this.handleKeyDown.bind(this));
+        document.removeEventListener('click', this.handleOutsideClick.bind(this));
+    }
+    startDrag(event) {
+        if (event.target instanceof HTMLElement) {
+            this.isDragging = true;
+            this.initialX = event.clientX - this.offsetX;
+            this.initialY = event.clientY - this.offsetY;
+            event.preventDefault();
+        }
+    }
+    drag(event) {
+        if (this.isDragging) {
+            this.offsetX = event.clientX - this.initialX;
+            this.offsetY = event.clientY - this.initialY;
+            this.style.transform = `translate(${this.offsetX}px, ${this.offsetY}px)`;
+            event.preventDefault();
+        }
+    }
+    handleKeyDown(event) {
+        if (event.key === 'Escape') {
+            this.closeModal();
+            event.preventDefault();
+        }
+    }
+    handleOutsideClick(event) {
+        if (this.isOpen && !this.isChildDialog(event.target)) {
+            this.closeModal();
+        }
+    }
+    isChildDialog(target) {
+        let element = target.parentElement;
+        while (element !== null) {
+            if (element.tagName === 'DIALOG') {
+                return true;
+            }
+            element = element.parentElement;
+        }
+        return false;
+    }
+    closeModal() {
+        this.isOpen = false;
+        this.offsetX = 0;
+        this.offsetY = 0;
+        this.style.transform = 'none';
+        this.dispatchEvent(new CustomEvent('close'));
+    }
+    adjustDialogPosition() {
+        var _a;
+        if (this.isOpen) {
+            const dialog = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.modal');
+            if (dialog) {
+                const contentHeight = dialog.clientHeight;
+                const windowHeight = window.innerHeight;
+                const dialogHeight = Math.min(contentHeight + 40, windowHeight - 40);
+                const topPosition = Math.max((windowHeight - dialogHeight) / 2, 0);
+                dialog.style.top = `${topPosition}px`;
+            }
+        }
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('isOpen')) {
+            if (this.isOpen) {
+                // The dialog has been opened
+                this.adjustDialogPosition();
+            }
+        }
+    }
+    stopDrag() {
+        this.isDragging = false;
+    }
+    render() {
+        const backdropStyles = {
+            display: this.isOpen ? 'block' : 'none',
+        };
+        const modalStyles = {
+            transform: `translate(${this.offsetX}px, ${this.offsetY}px)`,
+        };
+        return html `
+      <div class="backdrop" style=${styleMap(backdropStyles)}></div>
+
+      <dialog class="modal" ?open="${this.isOpen}" style=${styleMap(modalStyles)}>
+        <hy-icon
+          class="close-icon"
+          name="window-close"
+          style="float: right;"
+          @click=${() => (this.closeModal())}
+        ></hy-icon>
+        <h2 class="dialog-label" @mousedown=${this.startDrag} @mouseup=${this.stopDrag}>${this.label}</h2>
+        <slot></slot>
+        <slot name="footer"></slot>
+      </dialog>
+    `;
+    }
+}
+ModalComponent.styles = css `
+  :host {
+    font-size: 16px;
+    }
+    .modal {
+      position: fixed;
+      z-index: 9999;
+      background-color: #ffffff;
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
+    }
+
+    dialog {
+      border: 0;
+      box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12),
+        0 9px 28px 8px rgba(0, 0, 0, 0.05);
+      min-width: 400px;
+      min-height: 200px;
+    }
+
+    .dialog-label {
+      cursor: move;
+    }
+
+    .backdrop {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0, 0, 0, 0.3);
+      z-index: 9998;
+    }
+
+    .close-icon {
+      cursor: pointer;
+    }
+    ::slotted([slot='footer']) {
+      /* Styles applied specifically to slotted elements with slot="custom-slot" */
+      bottom: 0;
+      position: absolute;
+      text-align: end;
+      margin-bottom: 10px;
+      width : 93%;
+    }
+
+    ::slotted([slot='content']) {
+      padding: 0px 24px 20px 24px;
+    }
+    @media (prefers-color-scheme: dark) {
+      .modal {
+        background-color: rgb(74, 74, 74);
+        color: #ffffff;
+      } 
+      .backdrop {
+        background-color: rgba(0, 0, 0, 0.3);
+      }
+    }
+
+  `;
+__decorate([
+    property({ type: Boolean })
+], ModalComponent.prototype, "isOpen", void 0);
+__decorate([
+    property({ type: String })
+], ModalComponent.prototype, "label", void 0);
+__decorate([
+    state()
+], ModalComponent.prototype, "offsetX", void 0);
+__decorate([
+    state()
+], ModalComponent.prototype, "offsetY", void 0);
+customElements.define('modal-component', ModalComponent);
+//# sourceMappingURL=modal.component.js.map

package/modal.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.component.js","sourceRoot":"","sources":["../../../src/components/modal/modal.component.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport {css, html, LitElement} from 'lit';\nimport {property, state} from 'lit/decorators.js';\nimport {styleMap} from 'lit/directives/style-map.js';\n\nexport class ModalComponent extends LitElement {\n  static override styles = css`\n  :host {\n    font-size: 16px;\n    }\n    .modal {\n      position: fixed;\n      z-index: 9999;\n      background-color: #ffffff;\n      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);\n    }\n\n    dialog {\n      border: 0;\n      box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12),\n        0 9px 28px 8px rgba(0, 0, 0, 0.05);\n      min-width: 400px;\n      min-height: 200px;\n    }\n\n    .dialog-label {\n      cursor: move;\n    }\n\n    .backdrop {\n      position: fixed;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      background-color: rgba(0, 0, 0, 0.3);\n      z-index: 9998;\n    }\n\n    .close-icon {\n      cursor: pointer;\n    }\n    ::slotted([slot='footer']) {\n      /* Styles applied specifically to slotted elements with slot=\"custom-slot\" */\n      bottom: 0;\n      position: absolute;\n      text-align: end;\n      margin-bottom: 10px;\n      width : 93%;\n    }\n\n    ::slotted([slot='content']) {\n      padding: 0px 24px 20px 24px;\n    }\n    @media (prefers-color-scheme: dark) {\n      .modal {\n        background-color: rgb(74, 74, 74);\n        color: #ffffff;\n      } \n      .backdrop {\n        background-color: rgba(0, 0, 0, 0.3);\n      }\n    }\n\n  `;\n\n  @property({type: Boolean})\n  isOpen!: boolean;\n\n  @property({type: String})\n  label = '';\n\n  @state()\n  private offsetX = 0;\n\n  @state()\n  private offsetY = 0;\n\n  private isDragging = false;\n  private initialX = 0;\n  private initialY = 0;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    // this.addEventListener('mousedown', this.startDrag);\n    document.addEventListener('mousemove', this.drag.bind(this));\n    // this.addEventListener('mouseup', this.stopDrag);\n    document.addEventListener('keydown', this.handleKeyDown.bind(this));\n    //  document.addEventListener('click', this.handleOutsideClick.bind(this));\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    // this.removeEventListener('mousedown', this.startDrag);\n    document.removeEventListener('mousemove', this.drag);\n    // this.removeEventListener('mouseup', this.stopDrag);\n    document.removeEventListener('keydown', this.handleKeyDown.bind(this));\n    document.removeEventListener('click', this.handleOutsideClick.bind(this));\n  }\n\n  private startDrag(event: MouseEvent) {\n    if (event.target instanceof HTMLElement) {\n      this.isDragging = true;\n      this.initialX = event.clientX - this.offsetX;\n      this.initialY = event.clientY - this.offsetY;\n      event.preventDefault();\n    }\n  }\n\n  private drag(event: MouseEvent) {\n    if (this.isDragging) {\n      this.offsetX = event.clientX - this.initialX;\n      this.offsetY = event.clientY - this.initialY;\n      this.style.transform = `translate(${this.offsetX}px, ${this.offsetY}px)`;\n      event.preventDefault();\n    }\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Escape') {\n      this.closeModal();\n      event.preventDefault();\n    }\n  }\n\n  private handleOutsideClick(event: MouseEvent) {\n    if (this.isOpen && !this.isChildDialog(event.target as HTMLElement)) {\n      this.closeModal();\n\n    }\n  }\n\n  private isChildDialog(target: HTMLElement): boolean {\n    let element = target.parentElement;\n    while (element !== null) {\n      if (element.tagName === 'DIALOG') {\n        return true;\n      }\n      element = element.parentElement;\n    }\n    return false;\n  }\n\n  closeModal() {\n    this.isOpen = false;\n    this.offsetX = 0;\n    this.offsetY = 0;\n    this.style.transform = 'none';\n    this.dispatchEvent(new CustomEvent('close'));\n\n  }\n\n  private adjustDialogPosition() {\n    if (this.isOpen) {\n      const dialog = this.shadowRoot?.querySelector('.modal') as HTMLElement;\n      if (dialog) {\n\n          const contentHeight = dialog.clientHeight;\n          const windowHeight = window.innerHeight;\n          const dialogHeight = Math.min(contentHeight + 40, windowHeight - 40);\n\n          const topPosition = Math.max((windowHeight - dialogHeight) / 2, 0);\n          dialog.style.top = `${topPosition}px`;\n      }\n    }\n  }\n  override updated(changedProperties: Map<string | number | symbol, unknown>) {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('isOpen')) {\n      if (this.isOpen) {\n        // The dialog has been opened\n        this.adjustDialogPosition();\n      }\n\n    }\n  }\n\n  private stopDrag() {\n    this.isDragging = false;\n  }\n\n  override render() {\n    const backdropStyles = {\n      display: this.isOpen ? 'block' : 'none',\n    };\n    const modalStyles = {\n      transform: `translate(${this.offsetX}px, ${this.offsetY}px)`,\n    };\n\n    return html`\n      <div class=\"backdrop\" style=${styleMap(backdropStyles)}></div>\n\n      <dialog class=\"modal\" ?open=\"${this.isOpen}\" style=${styleMap(modalStyles)}>\n        <hy-icon\n          class=\"close-icon\"\n          name=\"window-close\"\n          style=\"float: right;\"\n          @click=${() => (this.closeModal())}\n        ></hy-icon>\n        <h2 class=\"dialog-label\" @mousedown=${this.startDrag} @mouseup=${this.stopDrag}>${this.label}</h2>\n        <slot></slot>\n        <slot name=\"footer\"></slot>\n      </dialog>\n    `;\n  }\n}\n\ncustomElements.define('modal-component', ModalComponent);\n"]}

package/package.json

@@ -0,0 +1,15 @@
+{
+    "name": "@nuralyui/modal",
+    "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,3 @@
+import { ModalComponent } from './modal.component.js';
+export declare const HyInput: import("@lit-labs/react").ReactWebComponent<ModalComponent, {}>;
+//# sourceMappingURL=react.d.ts.map

package/react.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/components/modal/react.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,cAAc,EAAC,MAAM,sBAAsB,CAAC;AACpD,eAAO,MAAM,OAAO,iEAOlB,CAAC"}

package/react.js

@@ -0,0 +1,12 @@
+import { createComponent } from '@lit-labs/react';
+import * as React from 'react';
+import { ModalComponent } from './modal.component.js';
+export const HyInput = createComponent({
+    tagName: 'hy-modal',
+    elementClass: ModalComponent,
+    react: React,
+    events: {
+    //valueChange: 'valueChange',
+    },
+});
+//# sourceMappingURL=react.js.map

package/react.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/modal/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,eAAe,EAAC,MAAM,iBAAiB,CAAC;AAChD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,cAAc,EAAC,MAAM,sBAAsB,CAAC;AACpD,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC;IACrC,OAAO,EAAE,UAAU;IACnB,YAAY,EAAE,cAAc;IAC5B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;IACN,6BAA6B;KAC9B;CACF,CAAC,CAAC","sourcesContent":["import {createComponent} from '@lit-labs/react';\nimport * as React from 'react';\nimport {ModalComponent} from './modal.component.js';\nexport const HyInput = createComponent({\n  tagName: 'hy-modal',\n  elementClass: ModalComponent,\n  react: React,\n  events: {\n    //valueChange: 'valueChange',\n  },\n});\n"]}