// import { Host, State } from '@stencil/core';
// import { Component, Element, Fragment, Prop, h } from '@stencil/core';
// @Component({
//   tag: 'dga-action-menu',
//   styleUrl: 'dga-action-menu.scss',
//   shadow: true,
// })
// export class DgaActionMenu {
//   @Prop({mutable: true , reflect: true}) open: boolean = false;
//   @Prop() onClose: () => void = () => {};
//   @Element() el!: HTMLElement;
//   @State() isMenuOpen: boolean = false; // State to control menu visibility
//   toggleMenu = () => {
//     this.isMenuOpen = !this.isMenuOpen;
//     if (this.isMenuOpen) {
//       document.addEventListener('click', this.handleOutsideClick);
//     } else {
//       document.removeEventListener('click', this.handleOutsideClick);
//     }
//   };
//   closeMenu = () => {
//     this.isMenuOpen = false;
//     document.removeEventListener('click', this.handleOutsideClick);
//   };
//   handleOutsideClick = (event: Event) => {
//     const target = event.target as HTMLElement;
//     if (!this.el.contains(target)) {
//       // this.closeMenu();
//       this.onClose()
//     }
//   };
//   componentDidLoad() {
//     // Add event listener to handle clicks outside the menu
//     document.addEventListener('click', this.handleClickOutside);
//   }
//   disconnectedCallback() {
//     // Cleanup event listener when the component is destroyed
//     document.removeEventListener('click', this.handleClickOutside);
//   }
//   // Method to detect outside click
//   private handleClickOutside = (event: MouseEvent): void => {
//     this.onClose();
//   };
//   componentWillLoad() {
//     this.el.childNodes.forEach(item => {
//       const el = item as HTMLElement;
//       if (el.tagName === 'DGA-MENU-LIST' && el.attributes.getNamedItem('slot') === null) {
//         el.setAttribute('slot', 'menu');
//       }
//     });
//   }
//   render() {
//     return (
//       <Host dir={document.documentElement.getAttribute('dir')}>
//         <div style={{ position: 'relative' }}>
//             <slot name='trigger'  />
//           {this.open && <div class="dga-breadcrumb-dropdown">
//             <slot name='menu' />
//           </div>}
//         </div>
//       </Host>
//     );
//   }
// }
import { Host, h } from "@stencil/core";
export class DgaActionMenu {
    constructor() {
        this.open = false;
        this.onClose = () => { };
        this.placement = 'right'; // Default placement, can be changed to 'top-start', 'top-end', etc.
        this.handleOutsideClick = (event) => {
            const target = event.target;
            if (!this.el.contains(target)) {
                this.open = false;
                this.onClose();
                document.removeEventListener('click', this.handleOutsideClick);
                console.log('Clicked outside, menu closed.');
            }
        };
        this.watchOpenChange = () => {
            if (this.open) {
                document.addEventListener('click', this.handleOutsideClick);
            }
            else {
                document.removeEventListener('click', this.handleOutsideClick);
            }
        };
    }
    componentWillLoad() {
        // Assign slot to DGA-MENU-LIST if not provided
        this.el.childNodes.forEach(item => {
            const el = item;
            if (el.tagName === 'DGA-MENU-LIST' && el.getAttribute('slot') === null) {
                el.setAttribute('slot', 'menu');
            }
        });
    }
    componentWillUpdate() {
        this.watchOpenChange();
    }
    disconnectedCallback() {
        document.removeEventListener('click', this.handleOutsideClick);
    }
    getPlacementStyle() {
        const style = {
            position: 'absolute',
        };
        const placement = this.placement;
        if (placement.startsWith('top')) {
            style.bottom = '100%';
        }
        else if (placement.startsWith('bottom')) {
            style.top = '100%';
        }
        else if (placement.startsWith('left')) {
            style.right = '100%';
        }
        else if (placement.startsWith('right')) {
            style.left = '100%';
        }
        if (placement.endsWith('start')) {
            if (placement.startsWith('top') || placement.startsWith('bottom')) {
                style.left = '0';
            }
            else {
                style.top = '0';
            }
        }
        else if (placement.endsWith('end')) {
            if (placement.startsWith('top') || placement.startsWith('bottom')) {
                style.right = '0';
            }
            else {
                style.bottom = '0';
            }
        }
        else {
            // centered alignment
            if (placement.startsWith('top') || placement.startsWith('bottom')) {
                style.left = '50%';
                style.transform = 'translateX(-50%)';
            }
            else {
                style.top = '50%';
                style.transform = 'translateY(-50%)';
            }
        }
        return style;
    }
    render() {
        return (h(Host, { key: 'fee18b99edbe6dd4a80bca994de014d2c2ba042e', dir: document.documentElement.getAttribute('dir') }, h("div", { key: '067c68696becc616e2ba49566a94af4ff39beea9', style: { position: 'relative' } }, h("slot", { key: 'da82d7b9c8543bdb41596af67f8278b0c84b6991', name: "trigger" }), this.open && (h("div", { key: '885fe2dee74c3cd5cafc83033d247816a379ad3f', class: "dga-breadcrumb-dropdown", style: this.getPlacementStyle() }, h("slot", { key: '68c5d542bed0556bb354f26f069e56e804ef8520', name: "menu" }))))));
    }
    static get is() { return "dga-action-menu"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["dga-action-menu.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["dga-action-menu.css"]
        };
    }
    static get properties() {
        return {
            "open": {
                "type": "boolean",
                "attribute": "open",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "defaultValue": "false"
            },
            "onClose": {
                "type": "unknown",
                "attribute": "on-close",
                "mutable": false,
                "complexType": {
                    "original": "() => void",
                    "resolved": "() => void",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "() => {}"
            },
            "placement": {
                "type": "string",
                "attribute": "placement",
                "mutable": false,
                "complexType": {
                    "original": "| 'bottom-end'\n  | 'bottom-start'\n  | 'bottom'\n  | 'left-end'\n  | 'left-start'\n  | 'left'\n  | 'right-end'\n  | 'right-start'\n  | 'right'\n  | 'top-end'\n  | 'top-start'\n  | 'top'",
                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'right'"
            }
        };
    }
    static get elementRef() { return "el"; }
}
