cax-design-system 1.0.0

package/fesm2022/cax-design-system-overlay.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cax-design-system-overlay.mjs","sources":["../../src/app/components/overlay/overlay.ts","../../src/app/components/overlay/overlay.html","../../src/app/components/overlay/overlay.module.ts","../../src/app/components/overlay/cax-design-system-overlay.ts"],"sourcesContent":["import { animate, animation, AnimationEvent, style, transition, trigger, useAnimation } from '@angular/animations';\nimport { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common';\nimport {\n    AfterContentInit,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ContentChildren,\n    ElementRef,\n    EventEmitter,\n    forwardRef,\n    Inject,\n    Input,\n    NgZone,\n    OnDestroy,\n    Output,\n    PLATFORM_ID,\n    QueryList,\n    Renderer2,\n    TemplateRef,\n    ViewChild,\n    ViewEncapsulation\n} from '@angular/core';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { OverlayModeType, OverlayOnBeforeHideEvent, OverlayOnBeforeShowEvent, OverlayOnHideEvent, OverlayOnShowEvent, OverlayOptions, OverlayService, caxConfig, CaxTemplate, ResponsiveOverlayOptions, SharedModule } from 'cax-design-system/api';\nimport { ConnectedOverlayScrollHandler, DomHandler } from 'cax-design-system/dom';\nimport { ObjectUtils, ZIndexUtils } from 'cax-design-system/utils';\nimport { VoidListener } from 'cax-design-system/ts-helpers';\n\nexport const OVERLAY_VALUE_ACCESSOR: any = {\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => Overlay),\n    multi: true\n};\n\nconst showOverlayContentAnimation = animation([style({ transform: '{{transform}}', opacity: 0 }), animate('{{showTransitionParams}}')]);\n\nconst hideOverlayContentAnimation = animation([animate('{{hideTransitionParams}}', style({ transform: '{{transform}}', opacity: 0 }))]);\n/**\n * This API allows overlay components to be controlled from the caxConfig. In this way, all overlay components in the application can have the same behavior.\n * @group Components\n */\n@Component({\n    selector: 'cax-overlay',\n    templateUrl: './overlay.html',\n    animations: [trigger('overlayContentAnimation', [transition(':enter', [useAnimation(showOverlayContentAnimation)]), transition(':leave', [useAnimation(hideOverlayContentAnimation)])])],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    providers: [OVERLAY_VALUE_ACCESSOR],\n    styleUrls: ['./overlay.scss'],\n    standalone: true,\n    imports: [CommonModule, SharedModule],\n    host: {\n        class: 'cax-element'\n    }\n})\nexport class Overlay implements AfterContentInit, OnDestroy {\n    /**\n     * The visible property is an input that determines the visibility of the component.\n     * @defaultValue false\n     * @group Props\n     */\n    @Input() get visible(): boolean {\n        return this._visible;\n    }\n    set visible(value: boolean) {\n        this._visible = value;\n\n        if (this._visible && !this.modalVisible) {\n            this.modalVisible = true;\n        }\n    }\n    /**\n     * The mode property is an input that determines the overlay mode type or string.\n     * @defaultValue null\n     * @group Props\n     */\n    @Input() get mode(): OverlayModeType | string {\n        return this._mode || this.overlayOptions?.mode;\n    }\n    set mode(value: OverlayModeType | string) {\n        this._mode = value;\n    }\n    /**\n     * The style property is an input that determines the style object for the component.\n     * @defaultValue null\n     * @group Props\n     */\n    @Input() get style(): { [klass: string]: any } | null | undefined {\n        return ObjectUtils.merge(this._style, this.modal ? this.overlayResponsiveOptions?.style : this.overlayOptions?.style);\n    }\n    set style(value: { [klass: string]: any } | null | undefined) {\n        this._style = value;\n    }\n    /**\n     * The styleClass property is an input that determines the CSS class(es) for the component.\n     * @defaultValue null\n     * @group Props\n     */\n    @Input() get styleClass(): string {\n        return ObjectUtils.merge(this._styleClass, this.modal ? this.overlayResponsiveOptions?.styleClass : this.overlayOptions?.styleClass);\n    }\n    set styleClass(value: string) {\n        this._styleClass = value;\n    }\n    /**\n     * The contentStyle property is an input that determines the style object for the content of the component.\n     * @defaultValue null\n     * @group Props\n     */\n    @Input() get contentStyle(): { [klass: string]: any } | null | undefined {\n        return ObjectUtils.merge(this._contentStyle, this.modal ? this.overlayResponsiveOptions?.contentStyle : this.overlayOptions?.contentStyle);\n    }\n    set contentStyle(value: { [klass: string]: any } | null | undefined) {\n        this._contentStyle = value;\n    }\n    /**\n     * The contentStyleClass property is an input that determines the CSS class(es) for the content of the component.\n     * @defaultValue null\n     * @group Props\n     */\n    @Input() get contentStyleClass(): string {\n        return ObjectUtils.merge(this._contentStyleClass, this.modal ? this.overlayResponsiveOptions?.contentStyleClass : this.overlayOptions?.contentStyleClass);\n    }\n    set contentStyleClass(value: string) {\n        this._contentStyleClass = value;\n    }\n    /**\n     * The target property is an input that specifies the target element or selector for the component.\n     * @defaultValue null\n     * @group Props\n     */\n    @Input() get target(): string | null | undefined {\n        const value = this._target || this.overlayOptions?.target;\n        return value === undefined ? '@prev' : value;\n    }\n    set target(value: string | null | undefined) {\n        this._target = value;\n    }\n    /**\n     * Overlay can be mounted into its location, body or DOM element instance using this option.\n     * @defaultValue null\n     * @group Props\n     */\n    @Input() get appendTo(): 'body' | HTMLElement | undefined {\n        return this._appendTo || this.overlayOptions?.appendTo;\n    }\n    set appendTo(value: 'body' | HTMLElement | undefined) {\n        this._appendTo = value;\n    }\n    /**\n     * The autoZIndex determines whether to automatically manage layering. Its default value is 'false'.\n     * @defaultValue false\n     * @group Props\n     */\n    @Input() get autoZIndex(): boolean {\n        const value = this._autoZIndex || this.overlayOptions?.autoZIndex;\n        return value === undefined ? true : value;\n    }\n    set autoZIndex(value: boolean) {\n        this._autoZIndex = value;\n    }\n    /**\n     * The baseZIndex is base zIndex value to use in layering.\n     * @defaultValue null\n     * @group Props\n     */\n    @Input() get baseZIndex(): number {\n        const value = this._baseZIndex || this.overlayOptions?.baseZIndex;\n        return value === undefined ? 0 : value;\n    }\n    set baseZIndex(value: number) {\n        this._baseZIndex = value;\n    }\n    /**\n     * Transition options of the show or hide animation.\n     * @defaultValue .12s cubic-bezier(0, 0, 0.2, 1)\n     * @group Props\n     */\n    @Input() get showTransitionOptions(): string {\n        const value = this._showTransitionOptions || this.overlayOptions?.showTransitionOptions;\n        return value === undefined ? '.12s cubic-bezier(0, 0, 0.2, 1)' : value;\n    }\n    set showTransitionOptions(value: string) {\n        this._showTransitionOptions = value;\n    }\n    /**\n     * The hideTransitionOptions property is an input that determines the CSS transition options for hiding the component.\n     * @defaultValue .1s linear\n     * @group Props\n     */\n    @Input() get hideTransitionOptions(): string {\n        const value = this._hideTransitionOptions || this.overlayOptions?.hideTransitionOptions;\n        return value === undefined ? '.1s linear' : value;\n    }\n    set hideTransitionOptions(value: string) {\n        this._hideTransitionOptions = value;\n    }\n    /**\n     * The listener property is an input that specifies the listener object for the component.\n     * @defaultValue null\n     * @group Props\n     */\n    @Input() get listener(): any {\n        return this._listener || this.overlayOptions?.listener;\n    }\n    set listener(value: any) {\n        this._listener = value;\n    }\n    /**\n     * It is the option used to determine in which mode it should appear according to the given media or breakpoint.\n     * @defaultValue null\n     * @group Props\n     */\n    @Input() get responsive(): ResponsiveOverlayOptions | undefined {\n        return this._responsive || this.overlayOptions?.responsive;\n    }\n    set responsive(val: ResponsiveOverlayOptions | undefined) {\n        this._responsive = val;\n    }\n    /**\n     * The options property is an input that specifies the overlay options for the component.\n     * @defaultValue null\n     * @group Props\n     */\n    @Input() get options(): OverlayOptions | undefined {\n        return this._options;\n    }\n    set options(val: OverlayOptions | undefined) {\n        this._options = val;\n    }\n    /**\n     * This EventEmitter is used to notify changes in the visibility state of a component.\n     * @param {Boolean} boolean - Value of visibility as boolean.\n     * @group Emits\n     */\n    @Output() visibleChange: EventEmitter<boolean> = new EventEmitter<boolean>();\n    /**\n     * Callback to invoke before the overlay is shown.\n     * @param {OverlayOnBeforeShowEvent} event - Custom overlay before show event.\n     * @group Emits\n     */\n    @Output() onBeforeShow: EventEmitter<OverlayOnBeforeShowEvent> = new EventEmitter<OverlayOnBeforeShowEvent>();\n    /**\n     * Callback to invoke when the overlay is shown.\n     * @param {OverlayOnShowEvent} event - Custom overlay show event.\n     * @group Emits\n     */\n    @Output() onShow: EventEmitter<OverlayOnShowEvent> = new EventEmitter<OverlayOnShowEvent>();\n    /**\n     * Callback to invoke before the overlay is hidden.\n     * @param {OverlayOnBeforeHideEvent} event - Custom overlay before hide event.\n     * @group Emits\n     */\n    @Output() onBeforeHide: EventEmitter<OverlayOnBeforeHideEvent> = new EventEmitter<OverlayOnBeforeHideEvent>();\n    /**\n     * Callback to invoke when the overlay is hidden\n     * @param {OverlayOnHideEvent} event - Custom hide event.\n     * @group Emits\n     */\n    @Output() onHide: EventEmitter<OverlayOnHideEvent> = new EventEmitter<OverlayOnHideEvent>();\n    /**\n     * Callback to invoke when the animation is started.\n     * @param {AnimationEvent} event - Animation event.\n     * @group Emits\n     */\n    @Output() onAnimationStart: EventEmitter<AnimationEvent> = new EventEmitter<AnimationEvent>();\n    /**\n     * Callback to invoke when the animation is done.\n     * @param {AnimationEvent} event - Animation event.\n     * @group Emits\n     */\n    @Output() onAnimationDone: EventEmitter<AnimationEvent> = new EventEmitter<AnimationEvent>();\n\n    @ContentChildren(CaxTemplate) templates: QueryList<any> | undefined;\n\n    @ViewChild('overlay') overlayViewChild: ElementRef | undefined;\n\n    @ViewChild('content') contentViewChild: ElementRef | undefined;\n\n    contentTemplate: TemplateRef<any> | undefined;\n\n    _visible: boolean = false;\n\n    _mode: OverlayModeType | string;\n\n    _style: { [klass: string]: any } | null | undefined;\n\n    _styleClass: string | undefined;\n\n    _contentStyle: { [klass: string]: any } | null | undefined;\n\n    _contentStyleClass: string | undefined;\n\n    _target: any;\n\n    _appendTo: 'body' | HTMLElement | undefined;\n\n    _autoZIndex: boolean | undefined;\n\n    _baseZIndex: number | undefined;\n\n    _showTransitionOptions: string | undefined;\n\n    _hideTransitionOptions: string | undefined;\n\n    _listener: any;\n\n    _responsive: ResponsiveOverlayOptions | undefined;\n\n    _options: OverlayOptions | undefined;\n\n    modalVisible: boolean = false;\n\n    isOverlayClicked: boolean = false;\n\n    isOverlayContentClicked: boolean = false;\n\n    scrollHandler: any;\n\n    documentClickListener: any;\n\n    documentResizeListener: any;\n\n    private documentKeyboardListener: VoidListener;\n\n    private window: Window | null;\n\n    protected transformOptions: any = {\n        default: 'scaleY(0.8)',\n        center: 'scale(0.7)',\n        top: 'translate3d(0px, -100%, 0px)',\n        'top-start': 'translate3d(0px, -100%, 0px)',\n        'top-end': 'translate3d(0px, -100%, 0px)',\n        bottom: 'translate3d(0px, 100%, 0px)',\n        'bottom-start': 'translate3d(0px, 100%, 0px)',\n        'bottom-end': 'translate3d(0px, 100%, 0px)',\n        left: 'translate3d(-100%, 0px, 0px)',\n        'left-start': 'translate3d(-100%, 0px, 0px)',\n        'left-end': 'translate3d(-100%, 0px, 0px)',\n        right: 'translate3d(100%, 0px, 0px)',\n        'right-start': 'translate3d(100%, 0px, 0px)',\n        'right-end': 'translate3d(100%, 0px, 0px)'\n    };\n\n    get modal() {\n        if (isPlatformBrowser(this.platformId)) {\n            return this.mode === 'modal' || (this.overlayResponsiveOptions && this.window?.matchMedia(this.overlayResponsiveOptions.media?.replace('@media', '') || `(max-width: ${this.overlayResponsiveOptions.breakpoint})`).matches);\n        }\n    }\n\n    get overlayMode() {\n        return this.mode || (this.modal ? 'modal' : 'overlay');\n    }\n\n    get overlayOptions(): OverlayOptions {\n        return { ...this.config?.overlayOptions, ...this.options }; // TODO: Improve performance\n    }\n\n    get overlayResponsiveOptions(): ResponsiveOverlayOptions {\n        return { ...this.overlayOptions?.responsive, ...this.responsive }; // TODO: Improve performance\n    }\n\n    get overlayResponsiveDirection() {\n        return this.overlayResponsiveOptions?.direction || 'center';\n    }\n\n    get overlayEl() {\n        return this.overlayViewChild?.nativeElement;\n    }\n\n    get contentEl() {\n        return this.contentViewChild?.nativeElement;\n    }\n\n    get targetEl() {\n        return DomHandler.getTargetElement(this.target, this.el?.nativeElement);\n    }\n\n    constructor(\n        @Inject(DOCUMENT) private document: Document,\n        @Inject(PLATFORM_ID) private platformId: any,\n        public el: ElementRef,\n        public renderer: Renderer2,\n        private config: caxConfig,\n        public overlayService: OverlayService,\n        public cd: ChangeDetectorRef,\n        private zone: NgZone\n    ) {\n        this.window = this.document.defaultView;\n    }\n\n    ngAfterContentInit() {\n        this.templates?.forEach((item) => {\n            switch (item.getType()) {\n                case 'content':\n                    this.contentTemplate = item.template;\n                    break;\n                // TODO: new template types may be added.\n                default:\n                    this.contentTemplate = item.template;\n                    break;\n            }\n        });\n    }\n\n    show(overlay?: HTMLElement, isFocus: boolean = false) {\n        this.onVisibleChange(true);\n        this.handleEvents('onShow', { overlay: overlay || this.overlayEl, target: this.targetEl, mode: this.overlayMode });\n\n        isFocus && DomHandler.focus(this.targetEl);\n        this.modal && DomHandler.addClass(this.document?.body, 'cax-overflow-hidden');\n    }\n\n    hide(overlay?: HTMLElement, isFocus: boolean = false) {\n        if (!this.visible) {\n            return;\n        } else {\n            this.onVisibleChange(false);\n            this.handleEvents('onHide', { overlay: overlay || this.overlayEl, target: this.targetEl, mode: this.overlayMode });\n            isFocus && DomHandler.focus(this.targetEl);\n            this.modal && DomHandler.removeClass(this.document?.body, 'cax-overflow-hidden');\n        }\n    }\n\n    alignOverlay() {\n        !this.modal && DomHandler.alignOverlay(this.overlayEl, this.targetEl, this.appendTo);\n    }\n\n    onVisibleChange(visible: boolean) {\n        this._visible = visible;\n        this.visibleChange.emit(visible);\n    }\n\n    onOverlayClick() {\n        this.isOverlayClicked = true;\n    }\n\n    onOverlayContentClick(event: MouseEvent) {\n        this.overlayService.add({\n            originalEvent: event,\n            target: this.targetEl\n        });\n\n        this.isOverlayContentClicked = true;\n    }\n\n    onOverlayContentAnimationStart(event: AnimationEvent) {\n        switch (event.toState) {\n            case 'visible':\n                this.handleEvents('onBeforeShow', { overlay: this.overlayEl, target: this.targetEl, mode: this.overlayMode });\n\n                if (this.autoZIndex) {\n                    ZIndexUtils.set(this.overlayMode, this.overlayEl, this.baseZIndex + this.config?.zIndex[this.overlayMode]);\n                }\n\n                DomHandler.appendOverlay(this.overlayEl, this.appendTo === 'body' ? this.document.body : this.appendTo, this.appendTo);\n                this.alignOverlay();\n\n                break;\n\n            case 'void':\n                this.handleEvents('onBeforeHide', { overlay: this.overlayEl, target: this.targetEl, mode: this.overlayMode });\n\n                this.modal && DomHandler.addClass(this.overlayEl, 'cax-component-overlay-leave');\n\n                break;\n        }\n\n        this.handleEvents('onAnimationStart', event);\n    }\n\n    onOverlayContentAnimationDone(event: AnimationEvent) {\n        const container = this.overlayEl || event.element.parentElement;\n\n        switch (event.toState) {\n            case 'visible':\n                if (this.visible) {\n                    this.show(container, true);\n                }\n                this.bindListeners();\n\n                break;\n\n            case 'void':\n                if (!this.visible) {\n                    this.hide(container, true);\n                    this.modalVisible = false;\n                    this.unbindListeners();\n\n                    DomHandler.appendOverlay(this.overlayEl, this.targetEl, this.appendTo);\n                    ZIndexUtils.clear(container);\n                    this.cd.markForCheck();\n\n                    break;\n                }\n        }\n\n        this.handleEvents('onAnimationDone', event);\n    }\n\n    handleEvents(name: string, params: any) {\n        (this as any)[name].emit(params);\n        this.options && (this.options as any)[name] && (this.options as any)[name](params);\n        this.config?.overlayOptions && (this.config?.overlayOptions as any)[name] && (this.config?.overlayOptions as any)[name](params);\n    }\n\n    bindListeners() {\n        this.unbindListeners();\n        this.bindScrollListener();\n        this.bindDocumentClickListener();\n        this.bindDocumentResizeListener();\n        this.bindDocumentKeyboardListener();\n    }\n\n    unbindListeners() {\n        this.unbindScrollListener();\n        this.unbindDocumentClickListener();\n        this.unbindDocumentResizeListener();\n        this.unbindDocumentKeyboardListener();\n    }\n\n    bindScrollListener() {\n        if (!this.scrollHandler) {\n            this.scrollHandler = new ConnectedOverlayScrollHandler(this.targetEl, (event: any) => {\n                const valid = this.listener ? this.listener(event, { type: 'scroll', mode: this.overlayMode, valid: true }) : true;\n\n                valid && this.hide(event, true);\n            });\n        }\n\n        this.scrollHandler.bindScrollListener();\n    }\n\n    unbindScrollListener() {\n        if (this.scrollHandler) {\n            this.scrollHandler.unbindScrollListener();\n        }\n    }\n\n    bindDocumentClickListener() {\n        if (!this.documentClickListener) {\n            this.documentClickListener = this.renderer.listen(this.document, 'click', (event) => {\n                const isTargetClicked = this.targetEl && (this.targetEl.isSameNode(event.target) || (!this.isOverlayClicked && this.targetEl.contains(event.target)));\n                const isOutsideClicked = !isTargetClicked && !this.isOverlayContentClicked;\n                const valid = this.listener ? this.listener(event, { type: 'outside', mode: this.overlayMode, valid: event.which !== 3 && isOutsideClicked }) : isOutsideClicked;\n\n                valid && this.hide(event);\n                this.isOverlayClicked = this.isOverlayContentClicked = false;\n            });\n        }\n    }\n\n    unbindDocumentClickListener() {\n        if (this.documentClickListener) {\n            this.documentClickListener();\n            this.documentClickListener = null;\n        }\n    }\n\n    bindDocumentResizeListener() {\n        if (!this.documentResizeListener) {\n            this.documentResizeListener = this.renderer.listen(this.window, 'resize', (event) => {\n                const valid = this.listener ? this.listener(event, { type: 'resize', mode: this.overlayMode, valid: !DomHandler.isTouchDevice() }) : !DomHandler.isTouchDevice();\n\n                valid && this.hide(event, true);\n            });\n        }\n    }\n\n    unbindDocumentResizeListener() {\n        if (this.documentResizeListener) {\n            this.documentResizeListener();\n            this.documentResizeListener = null;\n        }\n    }\n\n    bindDocumentKeyboardListener(): void {\n        if (this.documentKeyboardListener) {\n            return;\n        }\n\n        this.zone.runOutsideAngular(() => {\n            this.documentKeyboardListener = this.renderer.listen(this.window, 'keydown', (event) => {\n                if (this.overlayOptions.hideOnEscape === false || event.code !== 'Escape') {\n                    return;\n                }\n\n                const valid = this.listener ? this.listener(event, { type: 'keydown', mode: this.overlayMode, valid: !DomHandler.isTouchDevice() }) : !DomHandler.isTouchDevice();\n\n                if (valid) {\n                    this.zone.run(() => {\n                        this.hide(event, true);\n                    });\n                }\n            });\n        });\n    }\n\n    unbindDocumentKeyboardListener(): void {\n        if (this.documentKeyboardListener) {\n            this.documentKeyboardListener();\n            this.documentKeyboardListener = null;\n        }\n    }\n\n    ngOnDestroy() {\n        this.hide(this.overlayEl, true);\n\n        if (this.overlayEl) {\n            DomHandler.appendOverlay(this.overlayEl, this.targetEl, this.appendTo);\n            ZIndexUtils.clear(this.overlayEl);\n        }\n\n        if (this.scrollHandler) {\n            this.scrollHandler.destroy();\n            this.scrollHandler = null;\n        }\n\n        this.unbindListeners();\n    }\n}\n","<div\r\n    *ngIf=\"modalVisible\"\r\n    #overlay\r\n    [ngStyle]=\"style\"\r\n    [class]=\"styleClass\"\r\n    [ngClass]=\"{\r\n                'cax-overlay cax-component': true,\r\n                'cax-overlay-modal cax-component-overlay cax-component-overlay-enter': modal,\r\n                'cax-overlay-center': modal && overlayResponsiveDirection === 'center',\r\n                'cax-overlay-top': modal && overlayResponsiveDirection === 'top',\r\n                'cax-overlay-top-start': modal && overlayResponsiveDirection === 'top-start',\r\n                'cax-overlay-top-end': modal && overlayResponsiveDirection === 'top-end',\r\n                'cax-overlay-bottom': modal && overlayResponsiveDirection === 'bottom',\r\n                'cax-overlay-bottom-start': modal && overlayResponsiveDirection === 'bottom-start',\r\n                'cax-overlay-bottom-end': modal && overlayResponsiveDirection === 'bottom-end',\r\n                'cax-overlay-left': modal && overlayResponsiveDirection === 'left',\r\n                'cax-overlay-left-start': modal && overlayResponsiveDirection === 'left-start',\r\n                'cax-overlay-left-end': modal && overlayResponsiveDirection === 'left-end',\r\n                'cax-overlay-right': modal && overlayResponsiveDirection === 'right',\r\n                'cax-overlay-right-start': modal && overlayResponsiveDirection === 'right-start',\r\n                'cax-overlay-right-end': modal && overlayResponsiveDirection === 'right-end'\r\n            }\"\r\n    (click)=\"onOverlayClick()\"\r\n>\r\n    <div\r\n        *ngIf=\"visible\"\r\n        #content\r\n        [ngStyle]=\"contentStyle\"\r\n        [class]=\"contentStyleClass\"\r\n        [ngClass]=\"'cax-overlay-content'\"\r\n        (click)=\"onOverlayContentClick($event)\"\r\n        [@overlayContentAnimation]=\"{ value: 'visible', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions, transform: transformOptions[modal ? overlayResponsiveDirection : 'default'] } }\"\r\n        (@overlayContentAnimation.start)=\"onOverlayContentAnimationStart($event)\"\r\n        (@overlayContentAnimation.done)=\"onOverlayContentAnimationDone($event)\"\r\n    >\r\n        <ng-content></ng-content>\r\n        <ng-container *ngTemplateOutlet=\"contentTemplate; context: { $implicit: { mode: overlayMode } }\"></ng-container>\r\n    </div>\r\n</div>\r\n","import { NgModule } from '@angular/core';\nimport { SharedModule } from 'cax-design-system/api';\nimport { Overlay } from './overlay';\n\n@NgModule({\n    imports: [Overlay, SharedModule],\n    exports: [Overlay, SharedModule]\n})\nexport class OverlayModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;;;;;;AA6Ba,MAAA,sBAAsB,GAAQ;AACvC,IAAA,OAAO,EAAE,iBAAiB;AAC1B,IAAA,WAAW,EAAE,UAAU,CAAC,MAAM,OAAO,CAAC;AACtC,IAAA,KAAK,EAAE,IAAI;EACb;AAEF,MAAM,2BAA2B,GAAG,SAAS,CAAC,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,OAAO,CAAC,0BAA0B,CAAC,CAAC,CAAC,CAAC;AAExI,MAAM,2BAA2B,GAAG,SAAS,CAAC,CAAC,OAAO,CAAC,0BAA0B,EAAE,KAAK,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;AACxI;;;AAGG;MAeU,OAAO,CAAA;AAoUc,IAAA,QAAA,CAAA;AACG,IAAA,UAAA,CAAA;AACtB,IAAA,EAAA,CAAA;AACA,IAAA,QAAA,CAAA;AACC,IAAA,MAAA,CAAA;AACD,IAAA,cAAA,CAAA;AACA,IAAA,EAAA,CAAA;AACC,IAAA,IAAA,CAAA;AA1UZ;;;;AAIG;AACH,IAAA,IAAa,OAAO,GAAA;QAChB,OAAO,IAAI,CAAC,QAAQ,CAAC;KACxB;IACD,IAAI,OAAO,CAAC,KAAc,EAAA;AACtB,QAAA,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QAEtB,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;AACrC,YAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;SAC5B;KACJ;AACD;;;;AAIG;AACH,IAAA,IAAa,IAAI,GAAA;QACb,OAAO,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC;KAClD;IACD,IAAI,IAAI,CAAC,KAA+B,EAAA;AACpC,QAAA,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;KACtB;AACD;;;;AAIG;AACH,IAAA,IAAa,KAAK,GAAA;AACd,QAAA,OAAO,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,wBAAwB,EAAE,KAAK,GAAG,IAAI,CAAC,cAAc,EAAE,KAAK,CAAC,CAAC;KACzH;IACD,IAAI,KAAK,CAAC,KAAkD,EAAA;AACxD,QAAA,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;KACvB;AACD;;;;AAIG;AACH,IAAA,IAAa,UAAU,GAAA;AACnB,QAAA,OAAO,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,wBAAwB,EAAE,UAAU,GAAG,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC;KACxI;IACD,IAAI,UAAU,CAAC,KAAa,EAAA;AACxB,QAAA,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;KAC5B;AACD;;;;AAIG;AACH,IAAA,IAAa,YAAY,GAAA;AACrB,QAAA,OAAO,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,wBAAwB,EAAE,YAAY,GAAG,IAAI,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC;KAC9I;IACD,IAAI,YAAY,CAAC,KAAkD,EAAA;AAC/D,QAAA,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;KAC9B;AACD;;;;AAIG;AACH,IAAA,IAAa,iBAAiB,GAAA;AAC1B,QAAA,OAAO,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,kBAAkB,EAAE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,wBAAwB,EAAE,iBAAiB,GAAG,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;KAC7J;IACD,IAAI,iBAAiB,CAAC,KAAa,EAAA;AAC/B,QAAA,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC;KACnC;AACD;;;;AAIG;AACH,IAAA,IAAa,MAAM,GAAA;QACf,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,cAAc,EAAE,MAAM,CAAC;QAC1D,OAAO,KAAK,KAAK,SAAS,GAAG,OAAO,GAAG,KAAK,CAAC;KAChD;IACD,IAAI,MAAM,CAAC,KAAgC,EAAA;AACvC,QAAA,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;KACxB;AACD;;;;AAIG;AACH,IAAA,IAAa,QAAQ,GAAA;QACjB,OAAO,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,cAAc,EAAE,QAAQ,CAAC;KAC1D;IACD,IAAI,QAAQ,CAAC,KAAuC,EAAA;AAChD,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;KAC1B;AACD;;;;AAIG;AACH,IAAA,IAAa,UAAU,GAAA;QACnB,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC;QAClE,OAAO,KAAK,KAAK,SAAS,GAAG,IAAI,GAAG,KAAK,CAAC;KAC7C;IACD,IAAI,UAAU,CAAC,KAAc,EAAA;AACzB,QAAA,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;KAC5B;AACD;;;;AAIG;AACH,IAAA,IAAa,UAAU,GAAA;QACnB,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC;QAClE,OAAO,KAAK,KAAK,SAAS,GAAG,CAAC,GAAG,KAAK,CAAC;KAC1C;IACD,IAAI,UAAU,CAAC,KAAa,EAAA;AACxB,QAAA,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;KAC5B;AACD;;;;AAIG;AACH,IAAA,IAAa,qBAAqB,GAAA;QAC9B,MAAM,KAAK,GAAG,IAAI,CAAC,sBAAsB,IAAI,IAAI,CAAC,cAAc,EAAE,qBAAqB,CAAC;QACxF,OAAO,KAAK,KAAK,SAAS,GAAG,iCAAiC,GAAG,KAAK,CAAC;KAC1E;IACD,IAAI,qBAAqB,CAAC,KAAa,EAAA;AACnC,QAAA,IAAI,CAAC,sBAAsB,GAAG,KAAK,CAAC;KACvC;AACD;;;;AAIG;AACH,IAAA,IAAa,qBAAqB,GAAA;QAC9B,MAAM,KAAK,GAAG,IAAI,CAAC,sBAAsB,IAAI,IAAI,CAAC,cAAc,EAAE,qBAAqB,CAAC;QACxF,OAAO,KAAK,KAAK,SAAS,GAAG,YAAY,GAAG,KAAK,CAAC;KACrD;IACD,IAAI,qBAAqB,CAAC,KAAa,EAAA;AACnC,QAAA,IAAI,CAAC,sBAAsB,GAAG,KAAK,CAAC;KACvC;AACD;;;;AAIG;AACH,IAAA,IAAa,QAAQ,GAAA;QACjB,OAAO,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,cAAc,EAAE,QAAQ,CAAC;KAC1D;IACD,IAAI,QAAQ,CAAC,KAAU,EAAA;AACnB,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;KAC1B;AACD;;;;AAIG;AACH,IAAA,IAAa,UAAU,GAAA;QACnB,OAAO,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC;KAC9D;IACD,IAAI,UAAU,CAAC,GAAyC,EAAA;AACpD,QAAA,IAAI,CAAC,WAAW,GAAG,GAAG,CAAC;KAC1B;AACD;;;;AAIG;AACH,IAAA,IAAa,OAAO,GAAA;QAChB,OAAO,IAAI,CAAC,QAAQ,CAAC;KACxB;IACD,IAAI,OAAO,CAAC,GAA+B,EAAA;AACvC,QAAA,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC;KACvB;AACD;;;;AAIG;AACO,IAAA,aAAa,GAA0B,IAAI,YAAY,EAAW,CAAC;AAC7E;;;;AAIG;AACO,IAAA,YAAY,GAA2C,IAAI,YAAY,EAA4B,CAAC;AAC9G;;;;AAIG;AACO,IAAA,MAAM,GAAqC,IAAI,YAAY,EAAsB,CAAC;AAC5F;;;;AAIG;AACO,IAAA,YAAY,GAA2C,IAAI,YAAY,EAA4B,CAAC;AAC9G;;;;AAIG;AACO,IAAA,MAAM,GAAqC,IAAI,YAAY,EAAsB,CAAC;AAC5F;;;;AAIG;AACO,IAAA,gBAAgB,GAAiC,IAAI,YAAY,EAAkB,CAAC;AAC9F;;;;AAIG;AACO,IAAA,eAAe,GAAiC,IAAI,YAAY,EAAkB,CAAC;AAE/D,IAAA,SAAS,CAA6B;AAE9C,IAAA,gBAAgB,CAAyB;AAEzC,IAAA,gBAAgB,CAAyB;AAE/D,IAAA,eAAe,CAA+B;IAE9C,QAAQ,GAAY,KAAK,CAAC;AAE1B,IAAA,KAAK,CAA2B;AAEhC,IAAA,MAAM,CAA8C;AAEpD,IAAA,WAAW,CAAqB;AAEhC,IAAA,aAAa,CAA8C;AAE3D,IAAA,kBAAkB,CAAqB;AAEvC,IAAA,OAAO,CAAM;AAEb,IAAA,SAAS,CAAmC;AAE5C,IAAA,WAAW,CAAsB;AAEjC,IAAA,WAAW,CAAqB;AAEhC,IAAA,sBAAsB,CAAqB;AAE3C,IAAA,sBAAsB,CAAqB;AAE3C,IAAA,SAAS,CAAM;AAEf,IAAA,WAAW,CAAuC;AAElD,IAAA,QAAQ,CAA6B;IAErC,YAAY,GAAY,KAAK,CAAC;IAE9B,gBAAgB,GAAY,KAAK,CAAC;IAElC,uBAAuB,GAAY,KAAK,CAAC;AAEzC,IAAA,aAAa,CAAM;AAEnB,IAAA,qBAAqB,CAAM;AAE3B,IAAA,sBAAsB,CAAM;AAEpB,IAAA,wBAAwB,CAAe;AAEvC,IAAA,MAAM,CAAgB;AAEpB,IAAA,gBAAgB,GAAQ;AAC9B,QAAA,OAAO,EAAE,aAAa;AACtB,QAAA,MAAM,EAAE,YAAY;AACpB,QAAA,GAAG,EAAE,8BAA8B;AACnC,QAAA,WAAW,EAAE,8BAA8B;AAC3C,QAAA,SAAS,EAAE,8BAA8B;AACzC,QAAA,MAAM,EAAE,6BAA6B;AACrC,QAAA,cAAc,EAAE,6BAA6B;AAC7C,QAAA,YAAY,EAAE,6BAA6B;AAC3C,QAAA,IAAI,EAAE,8BAA8B;AACpC,QAAA,YAAY,EAAE,8BAA8B;AAC5C,QAAA,UAAU,EAAE,8BAA8B;AAC1C,QAAA,KAAK,EAAE,6BAA6B;AACpC,QAAA,aAAa,EAAE,6BAA6B;AAC5C,QAAA,WAAW,EAAE,6BAA6B;KAC7C,CAAC;AAEF,IAAA,IAAI,KAAK,GAAA;AACL,QAAA,IAAI,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE;AACpC,YAAA,OAAO,IAAI,CAAC,IAAI,KAAK,OAAO,KAAK,IAAI,CAAC,wBAAwB,IAAI,IAAI,CAAC,MAAM,EAAE,UAAU,CAAC,IAAI,CAAC,wBAAwB,CAAC,KAAK,EAAE,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC,IAAI,CAAA,YAAA,EAAe,IAAI,CAAC,wBAAwB,CAAC,UAAU,CAAA,CAAA,CAAG,CAAC,CAAC,OAAO,CAAC,CAAC;SAChO;KACJ;AAED,IAAA,IAAI,WAAW,GAAA;AACX,QAAA,OAAO,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,GAAG,OAAO,GAAG,SAAS,CAAC,CAAC;KAC1D;AAED,IAAA,IAAI,cAAc,GAAA;AACd,QAAA,OAAO,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;KAC9D;AAED,IAAA,IAAI,wBAAwB,GAAA;AACxB,QAAA,OAAO,EAAE,GAAG,IAAI,CAAC,cAAc,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;KACrE;AAED,IAAA,IAAI,0BAA0B,GAAA;AAC1B,QAAA,OAAO,IAAI,CAAC,wBAAwB,EAAE,SAAS,IAAI,QAAQ,CAAC;KAC/D;AAED,IAAA,IAAI,SAAS,GAAA;AACT,QAAA,OAAO,IAAI,CAAC,gBAAgB,EAAE,aAAa,CAAC;KAC/C;AAED,IAAA,IAAI,SAAS,GAAA;AACT,QAAA,OAAO,IAAI,CAAC,gBAAgB,EAAE,aAAa,CAAC;KAC/C;AAED,IAAA,IAAI,QAAQ,GAAA;AACR,QAAA,OAAO,UAAU,CAAC,gBAAgB,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,EAAE,EAAE,aAAa,CAAC,CAAC;KAC3E;AAED,IAAA,WAAA,CAC8B,QAAkB,EACf,UAAe,EACrC,EAAc,EACd,QAAmB,EAClB,MAAiB,EAClB,cAA8B,EAC9B,EAAqB,EACpB,IAAY,EAAA;QAPM,IAAQ,CAAA,QAAA,GAAR,QAAQ,CAAU;QACf,IAAU,CAAA,UAAA,GAAV,UAAU,CAAK;QACrC,IAAE,CAAA,EAAA,GAAF,EAAE,CAAY;QACd,IAAQ,CAAA,QAAA,GAAR,QAAQ,CAAW;QAClB,IAAM,CAAA,MAAA,GAAN,MAAM,CAAW;QAClB,IAAc,CAAA,cAAA,GAAd,cAAc,CAAgB;QAC9B,IAAE,CAAA,EAAA,GAAF,EAAE,CAAmB;QACpB,IAAI,CAAA,IAAA,GAAJ,IAAI,CAAQ;QAEpB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC;KAC3C;IAED,kBAAkB,GAAA;QACd,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,IAAI,KAAI;AAC7B,YAAA,QAAQ,IAAI,CAAC,OAAO,EAAE;AAClB,gBAAA,KAAK,SAAS;AACV,oBAAA,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,QAAQ,CAAC;oBACrC,MAAM;;AAEV,gBAAA;AACI,oBAAA,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,QAAQ,CAAC;oBACrC,MAAM;aACb;AACL,SAAC,CAAC,CAAC;KACN;AAED,IAAA,IAAI,CAAC,OAAqB,EAAE,OAAA,GAAmB,KAAK,EAAA;AAChD,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;QAC3B,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,OAAO,IAAI,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;QAEnH,OAAO,IAAI,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;AAC3C,QAAA,IAAI,CAAC,KAAK,IAAI,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,qBAAqB,CAAC,CAAC;KACjF;AAED,IAAA,IAAI,CAAC,OAAqB,EAAE,OAAA,GAAmB,KAAK,EAAA;AAChD,QAAA,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;YACf,OAAO;SACV;aAAM;AACH,YAAA,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;YAC5B,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,OAAO,IAAI,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;YACnH,OAAO,IAAI,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;AAC3C,YAAA,IAAI,CAAC,KAAK,IAAI,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,qBAAqB,CAAC,CAAC;SACpF;KACJ;IAED,YAAY,GAAA;QACR,CAAC,IAAI,CAAC,KAAK,IAAI,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;KACxF;AAED,IAAA,eAAe,CAAC,OAAgB,EAAA;AAC5B,QAAA,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;AACxB,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACpC;IAED,cAAc,GAAA;AACV,QAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;KAChC;AAED,IAAA,qBAAqB,CAAC,KAAiB,EAAA;AACnC,QAAA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC;AACpB,YAAA,aAAa,EAAE,KAAK;YACpB,MAAM,EAAE,IAAI,CAAC,QAAQ;AACxB,SAAA,CAAC,CAAC;AAEH,QAAA,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC;KACvC;AAED,IAAA,8BAA8B,CAAC,KAAqB,EAAA;AAChD,QAAA,QAAQ,KAAK,CAAC,OAAO;AACjB,YAAA,KAAK,SAAS;gBACV,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;AAE9G,gBAAA,IAAI,IAAI,CAAC,UAAU,EAAE;oBACjB,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;iBAC9G;AAED,gBAAA,UAAU,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,QAAQ,KAAK,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;gBACvH,IAAI,CAAC,YAAY,EAAE,CAAC;gBAEpB,MAAM;AAEV,YAAA,KAAK,MAAM;gBACP,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;AAE9G,gBAAA,IAAI,CAAC,KAAK,IAAI,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,EAAE,6BAA6B,CAAC,CAAC;gBAEjF,MAAM;SACb;AAED,QAAA,IAAI,CAAC,YAAY,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAAC;KAChD;AAED,IAAA,6BAA6B,CAAC,KAAqB,EAAA;QAC/C,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,IAAI,KAAK,CAAC,OAAO,CAAC,aAAa,CAAC;AAEhE,QAAA,QAAQ,KAAK,CAAC,OAAO;AACjB,YAAA,KAAK,SAAS;AACV,gBAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AACd,oBAAA,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;iBAC9B;gBACD,IAAI,CAAC,aAAa,EAAE,CAAC;gBAErB,MAAM;AAEV,YAAA,KAAK,MAAM;AACP,gBAAA,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;AACf,oBAAA,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;AAC3B,oBAAA,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;oBAC1B,IAAI,CAAC,eAAe,EAAE,CAAC;AAEvB,oBAAA,UAAU,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;AACvE,oBAAA,WAAW,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;AAC7B,oBAAA,IAAI,CAAC,EAAE,CAAC,YAAY,EAAE,CAAC;oBAEvB,MAAM;iBACT;SACR;AAED,QAAA,IAAI,CAAC,YAAY,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAC;KAC/C;IAED,YAAY,CAAC,IAAY,EAAE,MAAW,EAAA;QACjC,IAAY,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;AACjC,QAAA,IAAI,CAAC,OAAO,IAAK,IAAI,CAAC,OAAe,CAAC,IAAI,CAAC,IAAK,IAAI,CAAC,OAAe,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC;AACnF,QAAA,IAAI,CAAC,MAAM,EAAE,cAAc,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,cAAsB,EAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,cAAsB,EAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC;KACnI;IAED,aAAa,GAAA;QACT,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC1B,IAAI,CAAC,yBAAyB,EAAE,CAAC;QACjC,IAAI,CAAC,0BAA0B,EAAE,CAAC;QAClC,IAAI,CAAC,4BAA4B,EAAE,CAAC;KACvC;IAED,eAAe,GAAA;QACX,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,IAAI,CAAC,2BAA2B,EAAE,CAAC;QACnC,IAAI,CAAC,4BAA4B,EAAE,CAAC;QACpC,IAAI,CAAC,8BAA8B,EAAE,CAAC;KACzC;IAED,kBAAkB,GAAA;AACd,QAAA,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;AACrB,YAAA,IAAI,CAAC,aAAa,GAAG,IAAI,6BAA6B,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,KAAU,KAAI;AACjF,gBAAA,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC;gBAEnH,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;AACpC,aAAC,CAAC,CAAC;SACN;AAED,QAAA,IAAI,CAAC,aAAa,CAAC,kBAAkB,EAAE,CAAC;KAC3C;IAED,oBAAoB,GAAA;AAChB,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE;AACpB,YAAA,IAAI,CAAC,aAAa,CAAC,oBAAoB,EAAE,CAAC;SAC7C;KACJ;IAED,yBAAyB,GAAA;AACrB,QAAA,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE;AAC7B,YAAA,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,CAAC,KAAK,KAAI;AAChF,gBAAA,MAAM,eAAe,GAAG,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;gBACtJ,MAAM,gBAAgB,GAAG,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,uBAAuB,CAAC;AAC3E,gBAAA,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,KAAK,CAAC,IAAI,gBAAgB,EAAE,CAAC,GAAG,gBAAgB,CAAC;AAEjK,gBAAA,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBAC1B,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,uBAAuB,GAAG,KAAK,CAAC;AACjE,aAAC,CAAC,CAAC;SACN;KACJ;IAED,2BAA2B,GAAA;AACvB,QAAA,IAAI,IAAI,CAAC,qBAAqB,EAAE;YAC5B,IAAI,CAAC,qBAAqB,EAAE,CAAC;AAC7B,YAAA,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC;SACrC;KACJ;IAED,0BAA0B,GAAA;AACtB,QAAA,IAAI,CAAC,IAAI,CAAC,sBAAsB,EAAE;AAC9B,YAAA,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,QAAQ,EAAE,CAAC,KAAK,KAAI;AAChF,gBAAA,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,KAAK,EAAE,CAAC,UAAU,CAAC,aAAa,EAAE,EAAE,CAAC,GAAG,CAAC,UAAU,CAAC,aAAa,EAAE,CAAC;gBAEjK,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;AACpC,aAAC,CAAC,CAAC;SACN;KACJ;IAED,4BAA4B,GAAA;AACxB,QAAA,IAAI,IAAI,CAAC,sBAAsB,EAAE;YAC7B,IAAI,CAAC,sBAAsB,EAAE,CAAC;AAC9B,YAAA,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC;SACtC;KACJ;IAED,4BAA4B,GAAA;AACxB,QAAA,IAAI,IAAI,CAAC,wBAAwB,EAAE;YAC/B,OAAO;SACV;AAED,QAAA,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,MAAK;AAC7B,YAAA,IAAI,CAAC,wBAAwB,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,SAAS,EAAE,CAAC,KAAK,KAAI;AACnF,gBAAA,IAAI,IAAI,CAAC,cAAc,CAAC,YAAY,KAAK,KAAK,IAAI,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAE;oBACvE,OAAO;iBACV;AAED,gBAAA,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,KAAK,EAAE,CAAC,UAAU,CAAC,aAAa,EAAE,EAAE,CAAC,GAAG,CAAC,UAAU,CAAC,aAAa,EAAE,CAAC;gBAElK,IAAI,KAAK,EAAE;AACP,oBAAA,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,MAAK;AACf,wBAAA,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;AAC3B,qBAAC,CAAC,CAAC;iBACN;AACL,aAAC,CAAC,CAAC;AACP,SAAC,CAAC,CAAC;KACN;IAED,8BAA8B,GAAA;AAC1B,QAAA,IAAI,IAAI,CAAC,wBAAwB,EAAE;YAC/B,IAAI,CAAC,wBAAwB,EAAE,CAAC;AAChC,YAAA,IAAI,CAAC,wBAAwB,GAAG,IAAI,CAAC;SACxC;KACJ;IAED,WAAW,GAAA;QACP,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;AAEhC,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;AAChB,YAAA,UAAU,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;AACvE,YAAA,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;SACrC;AAED,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE;AACpB,YAAA,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC;AAC7B,YAAA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;SAC7B;QAED,IAAI,CAAC,eAAe,EAAE,CAAC;KAC1B;uGApjBQ,OAAO,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAoUJ,QAAQ,EAAA,EAAA,EAAA,KAAA,EACR,WAAW,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,SAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,SAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,cAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,MAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;2FArUd,OAAO,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,MAAA,EAAA,KAAA,EAAA,OAAA,EAAA,UAAA,EAAA,YAAA,EAAA,YAAA,EAAA,cAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,QAAA,EAAA,QAAA,EAAA,UAAA,EAAA,UAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,qBAAA,EAAA,uBAAA,EAAA,qBAAA,EAAA,uBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,UAAA,EAAA,YAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,OAAA,EAAA,EAAA,aAAA,EAAA,eAAA,EAAA,YAAA,EAAA,cAAA,EAAA,MAAA,EAAA,QAAA,EAAA,YAAA,EAAA,cAAA,EAAA,MAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,aAAA,EAAA,EAAA,SAAA,EARL,CAAC,sBAAsB,CAAC,oDAkOlB,WAAW,EAAA,CAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,SAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,SAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EClRhC,q3EAuCA,EDYc,MAAA,EAAA,CAAA,ygCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,YAAY,4dAAE,YAAY,EAAA,CAAA,EAAA,UAAA,EANxB,CAAC,OAAO,CAAC,yBAAyB,EAAE,CAAC,UAAU,CAAC,QAAQ,EAAE,CAAC,YAAY,CAAC,2BAA2B,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,QAAQ,EAAE,CAAC,YAAY,CAAC,2BAA2B,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAW/K,OAAO,EAAA,UAAA,EAAA,CAAA;kBAdnB,SAAS;+BACI,aAAa,EAAA,UAAA,EAEX,CAAC,OAAO,CAAC,yBAAyB,EAAE,CAAC,UAAU,CAAC,QAAQ,EAAE,CAAC,YAAY,CAAC,2BAA2B,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,QAAQ,EAAE,CAAC,YAAY,CAAC,2BAA2B,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,mBACvK,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,EAC1B,SAAA,EAAA,CAAC,sBAAsB,CAAC,EAEvB,UAAA,EAAA,IAAI,EACP,OAAA,EAAA,CAAC,YAAY,EAAE,YAAY,CAAC,EAC/B,IAAA,EAAA;AACF,wBAAA,KAAK,EAAE,aAAa;AACvB,qBAAA,EAAA,QAAA,EAAA,q3EAAA,EAAA,MAAA,EAAA,CAAA,ygCAAA,CAAA,EAAA,CAAA;;0BAsUI,MAAM;2BAAC,QAAQ,CAAA;;0BACf,MAAM;2BAAC,WAAW,CAAA;oMA/TV,OAAO,EAAA,CAAA;sBAAnB,KAAK;gBAeO,IAAI,EAAA,CAAA;sBAAhB,KAAK;gBAWO,KAAK,EAAA,CAAA;sBAAjB,KAAK;gBAWO,UAAU,EAAA,CAAA;sBAAtB,KAAK;gBAWO,YAAY,EAAA,CAAA;sBAAxB,KAAK;gBAWO,iBAAiB,EAAA,CAAA;sBAA7B,KAAK;gBAWO,MAAM,EAAA,CAAA;sBAAlB,KAAK;gBAYO,QAAQ,EAAA,CAAA;sBAApB,KAAK;gBAWO,UAAU,EAAA,CAAA;sBAAtB,KAAK;gBAYO,UAAU,EAAA,CAAA;sBAAtB,KAAK;gBAYO,qBAAqB,EAAA,CAAA;sBAAjC,KAAK;gBAYO,qBAAqB,EAAA,CAAA;sBAAjC,KAAK;gBAYO,QAAQ,EAAA,CAAA;sBAApB,KAAK;gBAWO,UAAU,EAAA,CAAA;sBAAtB,KAAK;gBAWO,OAAO,EAAA,CAAA;sBAAnB,KAAK;gBAWI,aAAa,EAAA,CAAA;sBAAtB,MAAM;gBAMG,YAAY,EAAA,CAAA;sBAArB,MAAM;gBAMG,MAAM,EAAA,CAAA;sBAAf,MAAM;gBAMG,YAAY,EAAA,CAAA;sBAArB,MAAM;gBAMG,MAAM,EAAA,CAAA;sBAAf,MAAM;gBAMG,gBAAgB,EAAA,CAAA;sBAAzB,MAAM;gBAMG,eAAe,EAAA,CAAA;sBAAxB,MAAM;gBAEuB,SAAS,EAAA,CAAA;sBAAtC,eAAe;uBAAC,WAAW,CAAA;gBAEN,gBAAgB,EAAA,CAAA;sBAArC,SAAS;uBAAC,SAAS,CAAA;gBAEE,gBAAgB,EAAA,CAAA;sBAArC,SAAS;uBAAC,SAAS,CAAA;;;ME9QX,aAAa,CAAA;uGAAb,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAb,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,aAAa,YAHZ,OAAO,EAAE,YAAY,CACrB,EAAA,OAAA,EAAA,CAAA,OAAO,EAAE,YAAY,CAAA,EAAA,CAAA,CAAA;AAEtB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,aAAa,EAHZ,OAAA,EAAA,CAAA,OAAO,EAAE,YAAY,EACZ,YAAY,CAAA,EAAA,CAAA,CAAA;;2FAEtB,aAAa,EAAA,UAAA,EAAA,CAAA;kBAJzB,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACN,oBAAA,OAAO,EAAE,CAAC,OAAO,EAAE,YAAY,CAAC;AAChC,oBAAA,OAAO,EAAE,CAAC,OAAO,EAAE,YAAY,CAAC;AACnC,iBAAA,CAAA;;;ACPD;;AAEG;;;;"}

package/fesm2022/cax-design-system-overlaypanel.mjs

@@ -0,0 +1,490 @@
+import { trigger, state, style, transition, animate } from '@angular/animations';
+import * as i2 from '@angular/common';
+import { isPlatformBrowser, DOCUMENT, CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { EventEmitter, PLATFORM_ID, booleanAttribute, numberAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Inject, Input, Output, ContentChildren, HostListener, NgModule } from '@angular/core';
+import * as i1 from 'cax-design-system/api';
+import { CaxTemplate, SharedModule } from 'cax-design-system/api';
+import { DomHandler, ConnectedOverlayScrollHandler } from 'cax-design-system/dom';
+import { TimesIcon } from 'cax-design-system/icons/times';
+import { RippleModule } from 'cax-design-system/ripple';
+import { ZIndexUtils } from 'cax-design-system/utils';
+
+/**
+ * OverlayPanel is a container component positioned as connected to its target.
+ * @group Components
+ */
+class OverlayPanel {
+    document;
+    platformId;
+    el;
+    renderer;
+    cd;
+    zone;
+    config;
+    overlayService;
+    /**
+     * Defines a string that labels the input for accessibility.
+     * @group Props
+     */
+    ariaLabel;
+    /**
+     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
+     * @group Props
+     */
+    ariaLabelledBy;
+    /**
+     * Enables to hide the overlay when outside is clicked.
+     * @group Props
+     */
+    dismissable = true;
+    /**
+     * When enabled, displays a close icon at top right corner.
+     * @group Props
+     */
+    showCloseIcon;
+    /**
+     * Inline style of the component.
+     * @group Props
+     */
+    style;
+    /**
+     * Style class of the component.
+     * @group Props
+     */
+    styleClass;
+    /**
+     *  Target element to attach the panel, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
+     * @group Props
+     */
+    appendTo = 'body';
+    /**
+     * Whether to automatically manage layering.
+     * @group Props
+     */
+    autoZIndex = true;
+    /**
+     * Aria label of the close icon.
+     * @group Props
+     */
+    ariaCloseLabel;
+    /**
+     * Base zIndex value to use in layering.
+     * @group Props
+     */
+    baseZIndex = 0;
+    /**
+     * When enabled, first button receives focus on show.
+     * @group Props
+     */
+    focusOnShow = true;
+    /**
+     * Transition options of the show animation.
+     * @group Props
+     */
+    showTransitionOptions = '.12s cubic-bezier(0, 0, 0.2, 1)';
+    /**
+     * Transition options of the hide animation.
+     * @group Props
+     */
+    hideTransitionOptions = '.1s linear';
+    /**
+     * Callback to invoke when an overlay becomes visible.
+     * @group Emits
+     */
+    onShow = new EventEmitter();
+    /**
+     * Callback to invoke when an overlay gets hidden.
+     * @group Emits
+     */
+    onHide = new EventEmitter();
+    templates;
+    container;
+    overlayVisible = false;
+    render = false;
+    isOverlayAnimationInProgress = false;
+    selfClick = false;
+    documentClickListener;
+    target;
+    willHide;
+    scrollHandler;
+    documentResizeListener;
+    contentTemplate;
+    closeIconTemplate;
+    destroyCallback;
+    overlayEventListener;
+    overlaySubscription;
+    constructor(document, platformId, el, renderer, cd, zone, config, overlayService) {
+        this.document = document;
+        this.platformId = platformId;
+        this.el = el;
+        this.renderer = renderer;
+        this.cd = cd;
+        this.zone = zone;
+        this.config = config;
+        this.overlayService = overlayService;
+    }
+    ngAfterContentInit() {
+        this.templates?.forEach((item) => {
+            switch (item.getType()) {
+                case 'content':
+                    this.contentTemplate = item.template;
+                    break;
+                case 'closeicon':
+                    this.closeIconTemplate = item.template;
+                    break;
+                default:
+                    this.contentTemplate = item.template;
+                    break;
+            }
+            this.cd.markForCheck();
+        });
+    }
+    bindDocumentClickListener() {
+        if (isPlatformBrowser(this.platformId)) {
+            if (!this.documentClickListener && this.dismissable) {
+                let documentEvent = DomHandler.isIOS() ? 'touchstart' : 'click';
+                const documentTarget = this.el ? this.el.nativeElement.ownerDocument : this.document;
+                this.documentClickListener = this.renderer.listen(documentTarget, documentEvent, (event) => {
+                    if (!this.container?.contains(event.target) && this.target !== event.target && !this.target.contains(event.target) && !this.selfClick) {
+                        this.hide();
+                    }
+                    this.selfClick = false;
+                    this.cd.markForCheck();
+                });
+            }
+        }
+    }
+    unbindDocumentClickListener() {
+        if (this.documentClickListener) {
+            this.documentClickListener();
+            this.documentClickListener = null;
+            this.selfClick = false;
+        }
+    }
+    /**
+     * Toggles the visibility of the panel.
+     * @param {Event} event - Browser event
+     * @param {Target} target - Target element.
+     * @group Method
+     */
+    toggle(event, target) {
+        if (this.isOverlayAnimationInProgress) {
+            return;
+        }
+        if (this.overlayVisible) {
+            if (this.hasTargetChanged(event, target)) {
+                this.destroyCallback = () => {
+                    this.show(null, target || event.currentTarget || event.target);
+                };
+            }
+            this.hide();
+        }
+        else {
+            this.show(event, target);
+        }
+    }
+    /**
+     * Displays the panel.
+     * @param {Event} event - Browser event
+     * @param {Target} target - Target element.
+     * @group Method
+     */
+    show(event, target) {
+        target && event && event.stopPropagation();
+        if (this.isOverlayAnimationInProgress) {
+            return;
+        }
+        this.target = target || event.currentTarget || event.target;
+        this.overlayVisible = true;
+        this.render = true;
+        this.cd.markForCheck();
+    }
+    onOverlayClick(event) {
+        this.overlayService.add({
+            originalEvent: event,
+            target: this.el.nativeElement
+        });
+        this.selfClick = true;
+    }
+    onContentClick(event) {
+        const targetElement = event.target;
+        this.selfClick = event.offsetX < targetElement.clientWidth && event.offsetY < targetElement.clientHeight;
+    }
+    hasTargetChanged(event, target) {
+        return this.target != null && this.target !== (target || event.currentTarget || event.target);
+    }
+    appendContainer() {
+        if (this.appendTo) {
+            if (this.appendTo === 'body')
+                this.renderer.appendChild(this.document.body, this.container);
+            else
+                DomHandler.appendChild(this.container, this.appendTo);
+        }
+    }
+    restoreAppend() {
+        if (this.container && this.appendTo) {
+            this.renderer.appendChild(this.el.nativeElement, this.container);
+        }
+    }
+    align() {
+        if (this.autoZIndex) {
+            ZIndexUtils.set('overlay', this.container, this.baseZIndex + this.config.zIndex.overlay);
+        }
+        DomHandler.absolutePosition(this.container, this.target, false);
+        const containerOffset = DomHandler.getOffset(this.container);
+        const targetOffset = DomHandler.getOffset(this.target);
+        const borderRadius = this.document.defaultView?.getComputedStyle(this.container).getPropertyValue('border-radius');
+        let arrowLeft = 0;
+        if (containerOffset.left < targetOffset.left) {
+            arrowLeft = targetOffset.left - containerOffset.left - parseFloat(borderRadius) * 2;
+        }
+        this.container?.style.setProperty('--overlayArrowLeft', `${arrowLeft}px`);
+        if (containerOffset.top < targetOffset.top) {
+            DomHandler.addClass(this.container, 'cax-overlaypanel-flipped');
+            if (this.showCloseIcon) {
+                this.renderer.setStyle(this.container, 'margin-top', '-30px');
+            }
+        }
+    }
+    onAnimationStart(event) {
+        if (event.toState === 'open') {
+            this.container = event.element;
+            this.appendContainer();
+            this.align();
+            this.bindDocumentClickListener();
+            this.bindDocumentResizeListener();
+            this.bindScrollListener();
+            if (this.focusOnShow) {
+                this.focus();
+            }
+            this.overlayEventListener = (e) => {
+                if (this.container && this.container.contains(e.target)) {
+                    this.selfClick = true;
+                }
+            };
+            this.overlaySubscription = this.overlayService.clickObservable.subscribe(this.overlayEventListener);
+            this.onShow.emit(null);
+        }
+        this.isOverlayAnimationInProgress = true;
+    }
+    onAnimationEnd(event) {
+        switch (event.toState) {
+            case 'void':
+                if (this.destroyCallback) {
+                    this.destroyCallback();
+                    this.destroyCallback = null;
+                }
+                if (this.overlaySubscription) {
+                    this.overlaySubscription.unsubscribe();
+                }
+                break;
+            case 'close':
+                if (this.autoZIndex) {
+                    ZIndexUtils.clear(this.container);
+                }
+                if (this.overlaySubscription) {
+                    this.overlaySubscription.unsubscribe();
+                }
+                this.onContainerDestroy();
+                this.onHide.emit({});
+                this.render = false;
+                break;
+        }
+        this.isOverlayAnimationInProgress = false;
+    }
+    focus() {
+        let focusable = DomHandler.findSingle(this.container, '[autofocus]');
+        if (focusable) {
+            this.zone.runOutsideAngular(() => {
+                setTimeout(() => focusable.focus(), 5);
+            });
+        }
+    }
+    /**
+     * Hides the panel.
+     * @group Method
+     */
+    hide() {
+        this.overlayVisible = false;
+        this.cd.markForCheck();
+    }
+    onCloseClick(event) {
+        this.hide();
+        event.preventDefault();
+    }
+    onEscapeKeydown(event) {
+        this.hide();
+    }
+    onWindowResize() {
+        if (this.overlayVisible && !DomHandler.isTouchDevice()) {
+            this.hide();
+        }
+    }
+    bindDocumentResizeListener() {
+        if (isPlatformBrowser(this.platformId)) {
+            if (!this.documentResizeListener) {
+                const window = this.document.defaultView;
+                this.documentResizeListener = this.renderer.listen(window, 'resize', this.onWindowResize.bind(this));
+            }
+        }
+    }
+    unbindDocumentResizeListener() {
+        if (this.documentResizeListener) {
+            this.documentResizeListener();
+            this.documentResizeListener = null;
+        }
+    }
+    bindScrollListener() {
+        if (isPlatformBrowser(this.platformId)) {
+            if (!this.scrollHandler) {
+                this.scrollHandler = new ConnectedOverlayScrollHandler(this.target, () => {
+                    if (this.overlayVisible) {
+                        this.hide();
+                    }
+                });
+            }
+            this.scrollHandler.bindScrollListener();
+        }
+    }
+    unbindScrollListener() {
+        if (this.scrollHandler) {
+            this.scrollHandler.unbindScrollListener();
+        }
+    }
+    onContainerDestroy() {
+        if (!this.cd.destroyed) {
+            this.target = null;
+        }
+        this.unbindDocumentClickListener();
+        this.unbindDocumentResizeListener();
+        this.unbindScrollListener();
+    }
+    ngOnDestroy() {
+        if (this.scrollHandler) {
+            this.scrollHandler.destroy();
+            this.scrollHandler = null;
+        }
+        if (this.container && this.autoZIndex) {
+            ZIndexUtils.clear(this.container);
+        }
+        if (!this.cd.destroyed) {
+            this.target = null;
+        }
+        this.destroyCallback = null;
+        if (this.container) {
+            this.restoreAppend();
+            this.onContainerDestroy();
+        }
+        if (this.overlaySubscription) {
+            this.overlaySubscription.unsubscribe();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: OverlayPanel, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1.caxConfig }, { token: i1.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: OverlayPanel, isStandalone: true, selector: "cax-overlayPanel", inputs: { ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", dismissable: ["dismissable", "dismissable", booleanAttribute], showCloseIcon: ["showCloseIcon", "showCloseIcon", booleanAttribute], style: "style", styleClass: "styleClass", appendTo: "appendTo", autoZIndex: ["autoZIndex", "autoZIndex", booleanAttribute], ariaCloseLabel: "ariaCloseLabel", baseZIndex: ["baseZIndex", "baseZIndex", numberAttribute], focusOnShow: ["focusOnShow", "focusOnShow", booleanAttribute], showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions" }, outputs: { onShow: "onShow", onHide: "onHide" }, host: { listeners: { "document:keydown.escape": "onEscapeKeydown($event)" }, classAttribute: "cax-element" }, queries: [{ propertyName: "templates", predicate: CaxTemplate }], ngImport: i0, template: "<div\r\n    *ngIf=\"render\"\r\n    [ngClass]=\"'cax-overlaypanel cax-component'\"\r\n    [ngStyle]=\"style\"\r\n    [class]=\"styleClass\"\r\n    (click)=\"onOverlayClick($event)\"\r\n    [@animation]=\"{ value: overlayVisible ? 'open' : 'close', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }\"\r\n    (@animation.start)=\"onAnimationStart($event)\"\r\n    (@animation.done)=\"onAnimationEnd($event)\"\r\n    role=\"dialog\"\r\n    [attr.aria-modal]=\"overlayVisible\"\r\n    [attr.aria-label]=\"ariaLabel\"\r\n    [attr.aria-labelledBy]=\"ariaLabelledBy\"\r\n>\r\n    <div class=\"cax-overlaypanel-content\" (click)=\"onContentClick($event)\" (mousedown)=\"onContentClick($event)\">\r\n        <ng-content></ng-content>\r\n        <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n    </div>\r\n    <button *ngIf=\"showCloseIcon\" type=\"button\" class=\"cax-overlaypanel-close cax-link\" (click)=\"onCloseClick($event)\" (keydown.enter)=\"hide()\" [attr.aria-label]=\"ariaCloseLabel\" pRipple>\r\n        <TimesIcon *ngIf=\"!closeIconTemplate\" [styleClass]=\"'cax-overlaypanel-close-icon'\" />\r\n        <span class=\"cax-overlaypanel-close-icon\" *ngIf=\"closeIconTemplate\">\r\n            <ng-template *ngTemplateOutlet=\"closeIconTemplate\"></ng-template>\r\n        </span>\r\n    </button>\r\n</div>\r\n", styles: ["@layer cax{.cax-overlaypanel{position:absolute;margin-top:10px;top:0;left:0}.cax-overlaypanel-flipped{margin-top:0;margin-bottom:10px}.cax-overlaypanel-close{display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative}.cax-overlaypanel:after,.cax-overlaypanel:before{bottom:100%;left:calc(var(--overlayArrowLeft, 0) + 1.25rem);content:none;height:0;width:0;position:absolute;pointer-events:none}.cax-overlaypanel:after{border-width:8px;margin-left:-8px}.cax-overlaypanel:before{border-width:10px;margin-left:-10px}.cax-overlaypanel-shifted:after,.cax-overlaypanel-shifted:before{left:auto;right:1.25em;margin-left:auto}.cax-overlaypanel-flipped:after,.cax-overlaypanel-flipped:before{bottom:auto;top:100%}.cax-overlaypanel.cax-overlaypanel-flipped:after{border-bottom-color:transparent}.cax-overlaypanel.cax-overlaypanel-flipped:before{border-bottom-color:transparent}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RippleModule }, { kind: "ngmodule", type: SharedModule }, { kind: "component", type: TimesIcon, selector: "TimesIcon" }], animations: [
+            trigger('animation', [
+                state('void', style({
+                    transform: 'scaleY(0.8)',
+                    opacity: 0
+                })),
+                state('close', style({
+                    opacity: 0
+                })),
+                state('open', style({
+                    transform: 'translateY(0)',
+                    opacity: 1
+                })),
+                transition('void => open', animate('{{showTransitionParams}}')),
+                transition('open => close', animate('{{hideTransitionParams}}'))
+            ])
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: OverlayPanel, decorators: [{
+            type: Component,
+            args: [{ selector: 'cax-overlayPanel', animations: [
+                        trigger('animation', [
+                            state('void', style({
+                                transform: 'scaleY(0.8)',
+                                opacity: 0
+                            })),
+                            state('close', style({
+                                opacity: 0
+                            })),
+                            state('open', style({
+                                transform: 'translateY(0)',
+                                opacity: 1
+                            })),
+                            transition('void => open', animate('{{showTransitionParams}}')),
+                            transition('open => close', animate('{{hideTransitionParams}}'))
+                        ])
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CommonModule, RippleModule, SharedModule, TimesIcon], standalone: true, host: {
+                        class: 'cax-element'
+                    }, template: "<div\r\n    *ngIf=\"render\"\r\n    [ngClass]=\"'cax-overlaypanel cax-component'\"\r\n    [ngStyle]=\"style\"\r\n    [class]=\"styleClass\"\r\n    (click)=\"onOverlayClick($event)\"\r\n    [@animation]=\"{ value: overlayVisible ? 'open' : 'close', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }\"\r\n    (@animation.start)=\"onAnimationStart($event)\"\r\n    (@animation.done)=\"onAnimationEnd($event)\"\r\n    role=\"dialog\"\r\n    [attr.aria-modal]=\"overlayVisible\"\r\n    [attr.aria-label]=\"ariaLabel\"\r\n    [attr.aria-labelledBy]=\"ariaLabelledBy\"\r\n>\r\n    <div class=\"cax-overlaypanel-content\" (click)=\"onContentClick($event)\" (mousedown)=\"onContentClick($event)\">\r\n        <ng-content></ng-content>\r\n        <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n    </div>\r\n    <button *ngIf=\"showCloseIcon\" type=\"button\" class=\"cax-overlaypanel-close cax-link\" (click)=\"onCloseClick($event)\" (keydown.enter)=\"hide()\" [attr.aria-label]=\"ariaCloseLabel\" pRipple>\r\n        <TimesIcon *ngIf=\"!closeIconTemplate\" [styleClass]=\"'cax-overlaypanel-close-icon'\" />\r\n        <span class=\"cax-overlaypanel-close-icon\" *ngIf=\"closeIconTemplate\">\r\n            <ng-template *ngTemplateOutlet=\"closeIconTemplate\"></ng-template>\r\n        </span>\r\n    </button>\r\n</div>\r\n", styles: ["@layer cax{.cax-overlaypanel{position:absolute;margin-top:10px;top:0;left:0}.cax-overlaypanel-flipped{margin-top:0;margin-bottom:10px}.cax-overlaypanel-close{display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative}.cax-overlaypanel:after,.cax-overlaypanel:before{bottom:100%;left:calc(var(--overlayArrowLeft, 0) + 1.25rem);content:none;height:0;width:0;position:absolute;pointer-events:none}.cax-overlaypanel:after{border-width:8px;margin-left:-8px}.cax-overlaypanel:before{border-width:10px;margin-left:-10px}.cax-overlaypanel-shifted:after,.cax-overlaypanel-shifted:before{left:auto;right:1.25em;margin-left:auto}.cax-overlaypanel-flipped:after,.cax-overlaypanel-flipped:before{bottom:auto;top:100%}.cax-overlaypanel.cax-overlaypanel-flipped:after{border-bottom-color:transparent}.cax-overlaypanel.cax-overlaypanel-flipped:before{border-bottom-color:transparent}}\n"] }]
+        }], ctorParameters: () => [{ type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1.caxConfig }, { type: i1.OverlayService }], propDecorators: { ariaLabel: [{
+                type: Input
+            }], ariaLabelledBy: [{
+                type: Input
+            }], dismissable: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], showCloseIcon: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], style: [{
+                type: Input
+            }], styleClass: [{
+                type: Input
+            }], appendTo: [{
+                type: Input
+            }], autoZIndex: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], ariaCloseLabel: [{
+                type: Input
+            }], baseZIndex: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], focusOnShow: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], showTransitionOptions: [{
+                type: Input
+            }], hideTransitionOptions: [{
+                type: Input
+            }], onShow: [{
+                type: Output
+            }], onHide: [{
+                type: Output
+            }], templates: [{
+                type: ContentChildren,
+                args: [CaxTemplate]
+            }], onEscapeKeydown: [{
+                type: HostListener,
+                args: ['document:keydown.escape', ['$event']]
+            }] } });
+
+class OverlayPanelModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: OverlayPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: OverlayPanelModule, imports: [OverlayPanel, SharedModule], exports: [OverlayPanel, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: OverlayPanelModule, imports: [OverlayPanel, SharedModule, SharedModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: OverlayPanelModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [OverlayPanel, SharedModule],
+                    exports: [OverlayPanel, SharedModule]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { OverlayPanel, OverlayPanelModule };
+//# sourceMappingURL=cax-design-system-overlaypanel.mjs.map