@sixbell-telco/sdk/fesm2022/sixbell-telco-sdk-directives-click-outside.mjs

A collection of reusable components designed for use in Sixbell Telco Angular projects

import * as i0 from '@angular/core';
import { output, HostListener, Directive } from '@angular/core';

/**
 * Directive that detects clicks outside of an element and emits an event when they occur.
 *
 * This directive is useful for implementing dismissible UI components like dropdowns,
 * modals, and popups that should close when a user clicks outside of them.
 *
 * @example
 * ```html
 * <!-- Basic usage -->
 * <div stClickOutside (outsideClick)="closeDropdown()">
 *   Dropdown content
 * </div>
 *
 * <!-- With conditional behavior -->
 * <div stClickOutside (outsideClick)="isOpen ? closeDropdown() : null">
 *   Dropdown content that only closes when open
 * </div>
 * ```
 *
 * @usageNotes
 * The directive emits the `outsideClick` event when a click occurs outside
 * the element it's attached to. It does not automatically hide or modify
 * the element - you need to handle that in your component logic.
 *
 * Common use cases include:
 * - Closing dropdowns when clicking elsewhere on the page
 * - Dismissing modals when clicking outside the modal content
 * - Hiding tooltips or popovers when clicking outside
 *
 * @publicApi
 */
class ClickOutsideDirective {
    elementRef;
    /**
     * Event emitted when a click occurs outside the element.
     *
     * @example
     * ```html
     * <div stClickOutside (outsideClick)="handleOutsideClick()">...</div>
     * ```
     */
    outsideClick = output();
    constructor(elementRef) {
        this.elementRef = elementRef;
    }
    /**
     * Listens for clicks on the document and determines if they occurred
     * outside the element this directive is attached to.
     *
     * @param event The mouse event from the document click
     */
    clickedOutside(event) {
        const clickedInside = this.elementRef.nativeElement.contains(event.target);
        if (!clickedInside) {
            this.outsideClick.emit();
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.0", type: ClickOutsideDirective, isStandalone: true, selector: "[stClickOutside]", outputs: { outsideClick: "outsideClick" }, host: { listeners: { "document:click": "clickedOutside($event)" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ClickOutsideDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[stClickOutside]',
                    standalone: true,
                }]
        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { clickedOutside: [{
                type: HostListener,
                args: ['document:click', ['$event']]
            }] } });

/**
 * Generated bundle index. Do not edit.
 */

export { ClickOutsideDirective };
//# sourceMappingURL=sixbell-telco-sdk-directives-click-outside.mjs.map