@sixbell-telco/sdk
Version:
A collection of reusable components designed for use in Sixbell Telco Angular projects
1 lines • 3.31 kB
Source Map (JSON)
{"version":3,"file":"sixbell-telco-sdk-directives-click-outside.mjs","sources":["../../../projects/sdk/directives/click-outside/src/click-outside.directive.ts","../../../projects/sdk/directives/click-outside/sixbell-telco-sdk-directives-click-outside.ts"],"sourcesContent":["import { Directive, ElementRef, HostListener, output } from '@angular/core';\n\n/**\n * Directive that detects clicks outside of an element and emits an event when they occur.\n *\n * This directive is useful for implementing dismissible UI components like dropdowns,\n * modals, and popups that should close when a user clicks outside of them.\n *\n * @example\n * ```html\n * <!-- Basic usage -->\n * <div stClickOutside (outsideClick)=\"closeDropdown()\">\n * Dropdown content\n * </div>\n *\n * <!-- With conditional behavior -->\n * <div stClickOutside (outsideClick)=\"isOpen ? closeDropdown() : null\">\n * Dropdown content that only closes when open\n * </div>\n * ```\n *\n * @usageNotes\n * The directive emits the `outsideClick` event when a click occurs outside\n * the element it's attached to. It does not automatically hide or modify\n * the element - you need to handle that in your component logic.\n *\n * Common use cases include:\n * - Closing dropdowns when clicking elsewhere on the page\n * - Dismissing modals when clicking outside the modal content\n * - Hiding tooltips or popovers when clicking outside\n *\n * @publicApi\n */\n@Directive({\n\tselector: '[stClickOutside]',\n\tstandalone: true,\n})\nexport class ClickOutsideDirective {\n\t/**\n\t * Event emitted when a click occurs outside the element.\n\t *\n\t * @example\n\t * ```html\n\t * <div stClickOutside (outsideClick)=\"handleOutsideClick()\">...</div>\n\t * ```\n\t */\n\toutsideClick = output<void>();\n\n\tconstructor(private elementRef: ElementRef) {}\n\n\t/**\n\t * Listens for clicks on the document and determines if they occurred\n\t * outside the element this directive is attached to.\n\t *\n\t * @param event The mouse event from the document click\n\t */\n\t@HostListener('document:click', ['$event'])\n\tclickedOutside(event: MouseEvent) {\n\t\tconst clickedInside = this.elementRef.nativeElement.contains(event.target);\n\t\tif (!clickedInside) {\n\t\t\tthis.outsideClick.emit();\n\t\t}\n\t}\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BG;MAKU,qBAAqB,CAAA;AAWb,IAAA,UAAA;AAVpB;;;;;;;AAOG;IACH,YAAY,GAAG,MAAM,EAAQ;AAE7B,IAAA,WAAA,CAAoB,UAAsB,EAAA;QAAtB,IAAU,CAAA,UAAA,GAAV,UAAU;;AAE9B;;;;;AAKG;AAEH,IAAA,cAAc,CAAC,KAAiB,EAAA;AAC/B,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC;QAC1E,IAAI,CAAC,aAAa,EAAE;AACnB,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE;;;uGAvBd,qBAAqB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAArB,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,OAAA,EAAA,EAAA,YAAA,EAAA,cAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,gBAAA,EAAA,wBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAArB,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAJjC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACV,oBAAA,QAAQ,EAAE,kBAAkB;AAC5B,oBAAA,UAAU,EAAE,IAAI;AAChB,iBAAA;+EAqBA,cAAc,EAAA,CAAA;sBADb,YAAY;uBAAC,gBAAgB,EAAE,CAAC,QAAQ,CAAC;;;ACxD3C;;AAEG;;;;"}