'use strict';

var index = require('./index-Dc5gCGlQ.js');
var index$1 = require('./index-CVw4GUo6.js');
require('./_commonjsHelpers-CFO10eej.js');

const actionListItemCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.action-list-item{display:flex;align-items:center;padding:8px 16px;background:#FFFFFF;transition:background-color 0.2s ease;cursor:default}.action-list-item--clickable{cursor:pointer}.action-list-item--clickable:hover:not(.action-list-item--disabled){background:#F7F7F7}.action-list-item--clickable:focus:not(.action-list-item--disabled){outline:none;background:#F7F7F7}.action-list-item--clickable:active:not(.action-list-item--disabled){background:#EEEDED}.action-list-item--disabled ::slotted(ifx-icon){color:#BFBBBB}.action-list-item--disabled ::slotted(*) ifx-icon{color:#BFBBBB}.action-list-item__leading{display:flex;align-items:center;justify-content:center;margin-right:16px;flex-shrink:0}.action-list-item__content{flex:1;min-width:0}.action-list-item__title{font-weight:600;font-size:1rem;line-height:1.5rem;color:#1D1D1D;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-list-item--disabled .action-list-item__title{color:#BFBBBB}.action-list-item__description{font-size:0.875rem;line-height:1.25rem;color:#575352;margin-top:2px}.action-list-item--disabled .action-list-item__description{color:#BFBBBB}.action-list-item__trailing{display:flex;align-items:center;justify-content:center;margin-left:16px;flex-shrink:0;gap:16px}";

const ActionListItem = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.ifxActionListItemClick = index.createEvent(this, "ifxActionListItemClick", 7);
        /**
         * Target for the link navigation
         * @default '_self'
         */
        this.target = '_self';
        /**
         * Controls whether the item is disabled
         * @default false
         */
        this.disabled = false;
        this.handleMainClick = (event) => {
            var _a, _b;
            if (this.disabled) {
                event.preventDefault();
                event.stopPropagation();
                return;
            }
            // Check if clicked element is inside leading or trailing areas
            const leadingElement = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.action-list-item__leading');
            const trailingElement = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.action-list-item__trailing');
            if ((leadingElement === null || leadingElement === void 0 ? void 0 : leadingElement.contains(event.target)) || (trailingElement === null || trailingElement === void 0 ? void 0 : trailingElement.contains(event.target))) {
                return; // Don't trigger main click if clicking on leading/trailing areas
            }
            // Always emit main event when clicking on content area (text), regardless of interactive elements
            this.ifxActionListItemClick.emit({
                value: this.value,
                href: this.href,
                target: this.target,
                component: this,
            });
            // If href is provided, automatically navigate (Link mode)
            // If no href is provided, only the event is emitted (Event mode)
            if (this.href) {
                if (this.target === '_blank') {
                    window.open(this.href, this.target);
                }
                else {
                    window.location.href = this.href;
                }
            }
        };
        this.handleLeadingClick = (event) => {
            if (this.disabled) {
                event.preventDefault();
                event.stopPropagation();
                return;
            }
            const target = event.target;
            // Check if the clicked element or any of its parents is an interactive component
            let currentElement = target;
            while (currentElement && currentElement !== this.host) {
                if (this.isInteractiveElement(currentElement)) {
                    // Interactive element clicked - stop propagation to prevent main event
                    event.stopPropagation();
                    return;
                }
                currentElement = currentElement.parentElement;
            }
            // Non-interactive element clicked - trigger main action
            event.stopPropagation();
            this.ifxActionListItemClick.emit({
                value: this.value,
                href: this.href,
                target: this.target,
                component: this,
            });
            // If href is provided, automatically navigate
            if (this.href) {
                if (this.target === '_blank') {
                    window.open(this.href, this.target);
                }
                else {
                    window.location.href = this.href;
                }
            }
        };
        this.handleTrailingClick = (event) => {
            if (this.disabled) {
                event.preventDefault();
                event.stopPropagation();
                return;
            }
            const target = event.target;
            // Check if the clicked element or any of its parents is an interactive component
            let currentElement = target;
            while (currentElement && currentElement !== this.host) {
                if (this.isInteractiveElement(currentElement)) {
                    // Interactive element clicked - stop propagation to prevent main event
                    event.stopPropagation();
                    return;
                }
                currentElement = currentElement.parentElement;
            }
            // Non-interactive element clicked - trigger main action
            event.stopPropagation();
            this.ifxActionListItemClick.emit({
                value: this.value,
                href: this.href,
                target: this.target,
                component: this,
            });
            // If href is provided, automatically navigate
            if (this.href) {
                if (this.target === '_blank') {
                    window.open(this.href, this.target);
                }
                else {
                    window.location.href = this.href;
                }
            }
        };
        this.isInteractiveElement = (element) => {
            // Get the tag name, handling both custom elements and standard HTML
            const tagName = element.tagName.toUpperCase();
            // List of Infineon components that should block main event
            const interactiveInfineonComponents = [
                'IFX-BUTTON',
                'IFX-CHECKBOX',
                'IFX-SWITCH'
            ];
            // Check if it's an interactive Infineon component
            return interactiveInfineonComponents.includes(tagName);
        };
        this.handleMainKeyDown = (event) => {
            if (this.disabled)
                return;
            if (event.key === 'Enter' || event.key === ' ') {
                event.preventDefault();
                // Always trigger main action via keyboard, regardless of interactive elements
                this.handleMainClick(event);
            }
        };
        this.handleLeadingKeyDown = (event) => {
            var _a;
            if (this.disabled)
                return;
            if (event.key === 'Enter' || event.key === ' ') {
                event.preventDefault();
                const leadingSlot = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="leading"]');
                const assignedElements = (leadingSlot === null || leadingSlot === void 0 ? void 0 : leadingSlot.assignedElements()) || [];
                // Find first interactive element and activate it
                const firstInteractive = assignedElements.find(el => this.isInteractiveElement(el));
                if (firstInteractive) {
                    firstInteractive.focus();
                    firstInteractive.click();
                }
            }
        };
        this.handleTrailingKeyDown = (event) => {
            var _a;
            if (this.disabled)
                return;
            if (event.key === 'Enter' || event.key === ' ') {
                event.preventDefault();
                const trailingSlot = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="trailing"]');
                const assignedElements = (trailingSlot === null || trailingSlot === void 0 ? void 0 : trailingSlot.assignedElements()) || [];
                // Find first interactive element and activate it
                const firstInteractive = assignedElements.find(el => this.isInteractiveElement(el));
                if (firstInteractive) {
                    firstInteractive.focus();
                    firstInteractive.click();
                }
            }
        };
        this.updateSlotElementsDisabledState = () => {
            // Only handle interactive components that should be disabled
            const interactiveComponents = ['ifx-checkbox', 'ifx-switch', 'ifx-button'];
            // Get all slotted elements
            const slots = this.host.querySelectorAll('[slot]');
            slots.forEach(slottedElement => {
                // Check if the slotted element itself is an interactive component
                if (interactiveComponents.includes(slottedElement.tagName.toLowerCase())) {
                    this.setElementDisabledState(slottedElement);
                }
                // Also check for nested interactive components within the slotted element
                interactiveComponents.forEach(componentTag => {
                    const nestedElements = slottedElement.querySelectorAll(componentTag);
                    nestedElements.forEach(nestedElement => {
                        this.setElementDisabledState(nestedElement);
                    });
                });
            });
        };
        this.setElementDisabledState = (element) => {
            if (this.disabled) {
                element.setAttribute('disabled', 'true');
            }
            else {
                element.removeAttribute('disabled');
            }
        };
    }
    onDisabledChange() {
        // Update interactive elements when disabled state changes
        this.updateSlotElementsDisabledState();
    }
    hasSlotContent(slotName) {
        const slot = this.host.querySelector(`[slot="${slotName}"]`);
        return !!slot;
    }
    componentDidLoad() {
        // Apply disabled state to interactive elements in slots
        this.updateSlotElementsDisabledState();
    }
    componentDidUpdate() {
        // Apply disabled state to interactive elements in slots when disabled prop changes
        this.updateSlotElementsDisabledState();
    }
    render() {
        const isClickable = !this.disabled && (this.href || this.value);
        const ariaLabel = this.itemAriaLabel || `${this.itemTitle}${this.description ? ` - ${this.description}` : ''}`;
        const hasLeadingContent = this.hasSlotContent('leading');
        const hasTrailingContent = this.hasSlotContent('trailing');
        return (index.h("div", { key: 'afc03036455ceb23a99e893ebdc36c052fcc2e64', class: index$1.classNames('action-list-item', this.disabled && 'action-list-item--disabled', isClickable && 'action-list-item--clickable'), role: "listitem", tabIndex: isClickable ? 0 : -1, "aria-label": ariaLabel, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.handleMainClick, onKeyDown: this.handleMainKeyDown }, hasLeadingContent && (index.h("div", { key: 'fbc09a625f124bdcf9137cde295838592925cc93', class: "action-list-item__leading", onClick: this.handleLeadingClick, onKeyDown: this.handleLeadingKeyDown }, index.h("slot", { key: '915fb5467635e391ca3713def64ee031095e784d', name: "leading" }))), index.h("div", { key: '589bd17dcd1f2de8ac7ac1c86db677c9b8eac35e', class: "action-list-item__content" }, index.h("div", { key: '4b0ac3d7e1439cbe8682f9d14411acc4683b2ffe', class: "action-list-item__title" }, this.itemTitle), this.description && (index.h("div", { key: 'e5a0481505f637db1f7672fca5e1800a934d4270', class: "action-list-item__description" }, this.description))), hasTrailingContent && (index.h("div", { key: 'c855aff75b5e1ddba37456c2225f46be3ae17429', class: "action-list-item__trailing", onClick: this.handleTrailingClick, onKeyDown: this.handleTrailingKeyDown }, index.h("slot", { key: '68ff1e04f0bdf90894fa729619c7b7a6f896bad8', name: "trailing" })))));
    }
    get host() { return index.getElement(this); }
    static get watchers() { return {
        "disabled": ["onDisabledChange"]
    }; }
};
ActionListItem.style = actionListItemCss;

exports.ifx_action_list_item = ActionListItem;
//# sourceMappingURL=ifx-action-list-item.entry.cjs.js.map

//# sourceMappingURL=ifx-action-list-item.cjs.entry.js.map