@gravionlabs/helix-core 22.0.0

package/fesm2022/gravionlabs-helix-core-confirmpopup.mjs

@@ -0,0 +1,619 @@
+export * from '@gravionlabs/helix-core/types/confirmpopup';
+import * as i3 from '@angular/common';
+import { DOCUMENT, CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Injectable, InjectionToken, inject, input, booleanAttribute, numberAttribute, signal, computed, contentChild, viewChild, ElementRef, EventEmitter, effect, untracked, contentChildren, Inject, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { findSingle, absolutePosition, getOffset, addClass, appendChild, focus, isIOS, isTouchDevice } from '@gravionlabs/helix-core/uix/utils';
+import * as i1 from '@gravionlabs/helix-core/api';
+import { HelixTemplate, TranslationKeys, SharedModule } from '@gravionlabs/helix-core/api';
+import { BaseComponent, PARENT_INSTANCE } from '@gravionlabs/helix-core/basecomponent';
+import * as i2 from '@gravionlabs/helix-core/bind';
+import { Bind } from '@gravionlabs/helix-core/bind';
+import * as i4 from '@gravionlabs/helix-core/button';
+import { ButtonModule } from '@gravionlabs/helix-core/button';
+import { ConnectedOverlayScrollHandler } from '@gravionlabs/helix-core/dom';
+import { FocusTrap } from '@gravionlabs/helix-core/focustrap';
+import * as i5 from '@gravionlabs/helix-core/motion';
+import { MotionModule } from '@gravionlabs/helix-core/motion';
+import { ZIndexUtils } from '@gravionlabs/helix-core/utils';
+import { BaseStyle } from '@gravionlabs/helix-core/base';
+
+const style = /*css*/ `
+    .h-confirmpopup {
+        position: absolute;
+        margin-top: dt('confirmpopup.gutter');
+        top: 0;
+        left: 0;
+        background: dt('confirmpopup.background');
+        color: dt('confirmpopup.color');
+        border: 1px solid dt('confirmpopup.border.color');
+        border-radius: dt('confirmpopup.border.radius');
+        box-shadow: dt('confirmpopup.shadow');
+        will-change: transform;
+    }
+
+    .h-confirmpopup-content {
+        display: flex;
+        align-items: center;
+        padding: dt('confirmpopup.content.padding');
+        gap: dt('confirmpopup.content.gap');
+    }
+
+    .h-confirmpopup-icon {
+        font-size: dt('confirmpopup.icon.size');
+        width: dt('confirmpopup.icon.size');
+        height: dt('confirmpopup.icon.size');
+        color: dt('confirmpopup.icon.color');
+    }
+
+    .h-confirmpopup-footer {
+        display: flex;
+        justify-content: flex-end;
+        gap: dt('confirmpopup.footer.gap');
+        padding: dt('confirmpopup.footer.padding');
+    }
+
+    .h-confirmpopup-footer button {
+        width: auto;
+    }
+
+    .h-confirmpopup-footer button:last-child {
+        margin: 0;
+    }
+
+    .h-confirmpopup-flipped {
+        margin-block-start: calc(dt('confirmpopup.gutter') * -1);
+        margin-block-end: dt('confirmpopup.gutter');
+    }
+
+    .h-confirmpopup:after,
+    .h-confirmpopup:before {
+        bottom: 100%;
+        left: calc(dt('confirmpopup.arrow.offset') + dt('confirmpopup.arrow.left'));
+        content: ' ';
+        height: 0;
+        width: 0;
+        position: absolute;
+        pointer-events: none;
+    }
+
+    .h-confirmpopup:after {
+        border-width: calc(dt('confirmpopup.gutter') - 2px);
+        margin-left: calc(-1 * (dt('confirmpopup.gutter') - 2px));
+        border-style: solid;
+        border-color: transparent;
+        border-bottom-color: dt('confirmpopup.background');
+    }
+
+    .h-confirmpopup:before {
+        border-width: dt('confirmpopup.gutter');
+        margin-left: calc(-1 * dt('confirmpopup.gutter'));
+        border-style: solid;
+        border-color: transparent;
+        border-bottom-color: dt('confirmpopup.border.color');
+    }
+
+    .h-confirmpopup-flipped:after,
+    .h-confirmpopup-flipped:before {
+        bottom: auto;
+        top: 100%;
+    }
+
+    .h-confirmpopup-flipped:after {
+        border-bottom-color: transparent;
+        border-top-color: dt('confirmpopup.background');
+    }
+
+    .h-confirmpopup-flipped:before {
+        border-bottom-color: transparent;
+        border-top-color: dt('confirmpopup.border.color');
+    }
+`;
+
+const classes = {
+    root: () => ['h-confirmpopup h-component'],
+    content: 'h-confirmpopup-content',
+    icon: ({ instance }) => ['h-confirmpopup-icon', instance.confirmation?.icon],
+    message: 'h-confirmpopup-message',
+    footer: 'h-confirmpopup-footer',
+    pcRejectButton: 'h-confirmpopup-reject-button',
+    pcAcceptButton: 'h-confirmpopup-accept-button'
+};
+class ConfirmPopupStyle extends BaseStyle {
+    name = 'confirmpopup';
+    style = style;
+    classes = classes;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ConfirmPopupStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ConfirmPopupStyle });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ConfirmPopupStyle, decorators: [{
+            type: Injectable
+        }] });
+/**
+ *
+ * ConfirmPopup displays a confirmation overlay displayed relatively to its target.
+ *
+ * [Live Demo](https://www.primeng.org/confirmpopup)
+ *
+ * @module confirmpopupstyle
+ *
+ */
+var ConfirmPopupClasses;
+(function (ConfirmPopupClasses) {
+    /**
+     * Class name of the root element
+     */
+    ConfirmPopupClasses["root"] = "h-confirmpopup";
+    /**
+     * Class name of the content element
+     */
+    ConfirmPopupClasses["content"] = "h-confirmpopup-content";
+    /**
+     * Class name of the icon element
+     */
+    ConfirmPopupClasses["icon"] = "h-confirmpopup-icon";
+    /**
+     * Class name of the message element
+     */
+    ConfirmPopupClasses["message"] = "h-confirmpopup-message";
+    /**
+     * Class name of the footer element
+     */
+    ConfirmPopupClasses["footer"] = "h-confirmpopup-footer";
+    /**
+     * Class name of the reject button element
+     */
+    ConfirmPopupClasses["pcRejectButton"] = "h-confirmpopup-reject-button";
+    /**
+     * Class name of the accept button element
+     */
+    ConfirmPopupClasses["pcAcceptButton"] = "h-confirmpopup-accept-button";
+})(ConfirmPopupClasses || (ConfirmPopupClasses = {}));
+
+const CONFIRMPOPUP_INSTANCE = new InjectionToken('CONFIRMPOPUP_INSTANCE');
+/**
+ * ConfirmPopup displays a confirmation overlay displayed relatively to its target.
+ * @group Components
+ */
+class ConfirmPopup extends BaseComponent {
+    el;
+    confirmationService;
+    renderer;
+    cd;
+    overlayService;
+    document;
+    componentName = 'ConfirmPopup';
+    $pcConfirmPopup = inject(CONFIRMPOPUP_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
+    bindDirectiveInstance = inject(Bind, { self: true });
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptm('host'));
+    }
+    /**
+     * Optional key to match the key of confirm object, necessary to use when component tree has multiple confirm dialogs.
+     * @group Props
+     */
+    key = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "key" }] : /* istanbul ignore next */ []));
+    /**
+     * Element to receive the focus when the popup gets visible, valid values are "accept", "reject", and "none".
+     * @group Props
+     */
+    defaultFocus = input('accept', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultFocus" }] : /* istanbul ignore next */ []));
+    /**
+     * Transition options of the show animation.
+     * @group Props
+     * @deprecated since v21.0.0. Use `motionOptions` instead.
+     */
+    showTransitionOptions = input('.12s cubic-bezier(0, 0, 0.2, 1)', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showTransitionOptions" }] : /* istanbul ignore next */ []));
+    /**
+     * Transition options of the hide animation.
+     * @group Props
+     * @deprecated since v21.0.0. Use `motionOptions` instead.
+     */
+    hideTransitionOptions = input('.1s linear', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hideTransitionOptions" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether to automatically manage layering.
+     * @group Props
+     */
+    autoZIndex = input(true, { ...(ngDevMode ? { debugName: "autoZIndex" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Base zIndex value to use in layering.
+     * @group Props
+     */
+    baseZIndex = input(0, { ...(ngDevMode ? { debugName: "baseZIndex" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * Inline style of the component.
+     * @group Props
+     */
+    style = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "style" }] : /* istanbul ignore next */ []));
+    /**
+     * Style class of the component.
+     * @group Props
+     */
+    styleClass = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "styleClass" }] : /* istanbul ignore next */ []));
+    /**
+     * Defines if the component is visible.
+     * @group Props
+     */
+    visible = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "visible" }] : /* istanbul ignore next */ []));
+    _visible = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_visible" }] : /* istanbul ignore next */ []));
+    computedVisible = computed(() => this.visible() ?? this._visible(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedVisible" }] : /* istanbul ignore next */ []));
+    render = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "render" }] : /* istanbul ignore next */ []));
+    /**
+     * The motion options.
+     * @group Props
+     */
+    motionOptions = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "motionOptions" }] : /* istanbul ignore next */ []));
+    computedMotionOptions = computed(() => {
+        return {
+            ...this.ptm('motion'),
+            ...this.motionOptions()
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedMotionOptions" }] : /* istanbul ignore next */ []));
+    /**
+     * Target element to attach the overlay, 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).
+     * @defaultValue 'body'
+     * @group Props
+     */
+    appendTo = input('body', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appendTo" }] : /* istanbul ignore next */ []));
+    $appendTo = computed(() => this.appendTo() || this.config.overlayAppendTo(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$appendTo" }] : /* istanbul ignore next */ []));
+    container;
+    subscription;
+    confirmation;
+    autoFocusAccept = false;
+    autoFocusReject = false;
+    /**
+     * Custom content template.
+     * @group Templates
+     */
+    contentTemplate = contentChild('content', { ...(ngDevMode ? { debugName: "contentTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom accept icon template.
+     * @group Templates
+     */
+    acceptIconTemplate = contentChild('accepticon', { ...(ngDevMode ? { debugName: "acceptIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom reject icon template.
+     * @group Templates
+     */
+    rejectIconTemplate = contentChild('rejecticon', { ...(ngDevMode ? { debugName: "rejectIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom headless template.
+     * @group Templates
+     */
+    headlessTemplate = contentChild('headless', { ...(ngDevMode ? { debugName: "headlessTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    acceptButtonViewChild = viewChild('acceptButton', { ...(ngDevMode ? { debugName: "acceptButtonViewChild" } : /* istanbul ignore next */ {}), read: ElementRef });
+    rejectButtonViewChild = viewChild('rejectButton', { ...(ngDevMode ? { debugName: "rejectButtonViewChild" } : /* istanbul ignore next */ {}), read: ElementRef });
+    _contentTemplate;
+    _acceptIconTemplate;
+    _rejectIconTemplate;
+    _headlessTemplate;
+    documentClickListener;
+    documentResizeListener;
+    scrollHandler;
+    window;
+    _componentStyle = inject(ConfirmPopupStyle);
+    constructor(el, confirmationService, renderer, cd, overlayService, document) {
+        super();
+        this.el = el;
+        this.confirmationService = confirmationService;
+        this.renderer = renderer;
+        this.cd = cd;
+        this.overlayService = overlayService;
+        this.document = document;
+        this.window = this.document.defaultView;
+        this.subscription = this.confirmationService.requireConfirmation$.subscribe((confirmation) => {
+            if (!confirmation) {
+                this.hide();
+                return;
+            }
+            if (this.computedVisible()) {
+                requestAnimationFrame(() => {
+                    this.alignOverlay();
+                    this.cd.markForCheck();
+                });
+            }
+            if (confirmation.key === this.key()) {
+                this.confirmation = confirmation;
+                const keys = Object.keys(confirmation);
+                keys.forEach((key) => {
+                    this[key] = confirmation[key];
+                });
+                if (this.confirmation.accept) {
+                    this.confirmation.acceptEvent = new EventEmitter();
+                    this.confirmation.acceptEvent.subscribe(this.confirmation.accept);
+                }
+                if (this.confirmation.reject) {
+                    this.confirmation.rejectEvent = new EventEmitter();
+                    this.confirmation.rejectEvent.subscribe(this.confirmation.reject);
+                }
+                this._visible.set(true);
+            }
+        });
+        effect(() => {
+            if (this.computedVisible()) {
+                untracked(() => {
+                    if (!this.render()) {
+                        this.render.set(true);
+                    }
+                });
+            }
+        });
+    }
+    templates = contentChildren(HelixTemplate, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "templates" }] : /* istanbul ignore next */ []));
+    onAfterContentInit() {
+        this.templates()?.forEach((item) => {
+            switch (item.getType()) {
+                case 'content':
+                    this._contentTemplate = item.template;
+                    break;
+                case 'rejecticon':
+                    this._rejectIconTemplate = item.template;
+                    break;
+                case 'accepticon':
+                    this._acceptIconTemplate = item.template;
+                    break;
+                case 'headless':
+                    this._headlessTemplate = item.template;
+                    break;
+            }
+        });
+    }
+    option(name, k) {
+        const source = this;
+        if (source.hasOwnProperty(name)) {
+            if (k) {
+                return source[k];
+            }
+            return source[name];
+        }
+        return undefined;
+    }
+    onEscapeKeydown(event) {
+        if (this.confirmation && this.confirmation.closeOnEscape !== false) {
+            this.onReject();
+        }
+    }
+    onBeforeEnter(event) {
+        if (this.confirmation) {
+            const focus = this.confirmation.defaultFocus ?? this.defaultFocus();
+            this.autoFocusAccept = focus === 'accept';
+            this.autoFocusReject = focus === 'reject';
+        }
+        this.container = event.element;
+        this.appendOverlay();
+        this.alignOverlay();
+        this.alignArrow();
+        this.setZIndex();
+        this.handleFocus();
+        this.bindListeners();
+    }
+    handleFocus() {
+        const defaultFocus = this.defaultFocus();
+        if (defaultFocus && (this.acceptButtonViewChild() || this.rejectButtonViewChild())) {
+            const focusEl = ((defaultFocus === 'accept' ? findSingle(this.acceptButtonViewChild()?.nativeElement, '[data-pc-section="root"]') : findSingle(this.rejectButtonViewChild()?.nativeElement, '[data-pc-section="root"]')));
+            focusEl.focus();
+        }
+    }
+    onAfterLeave() {
+        this.autoFocusAccept = false;
+        this.autoFocusReject = false;
+        this.restoreAppend();
+        this.onContainerDestroy();
+    }
+    getAcceptButtonProps() {
+        return this.option('acceptButtonProps');
+    }
+    getRejectButtonProps() {
+        return this.option('rejectButtonProps');
+    }
+    alignOverlay() {
+        if (!this.confirmation || !this.confirmation.target) {
+            return;
+        }
+        absolutePosition(this.container, this.confirmation?.target, false);
+    }
+    setZIndex() {
+        if (this.autoZIndex()) {
+            ZIndexUtils.set('overlay', this.container, this.config.zIndex.overlay);
+        }
+    }
+    alignArrow() {
+        const containerOffset = getOffset(this.container);
+        const targetOffset = getOffset(this.confirmation?.target);
+        let arrowLeft = 0;
+        if (containerOffset && targetOffset && containerOffset.left < targetOffset.left) {
+            arrowLeft = targetOffset.left - containerOffset.left;
+        }
+        if (this.container) {
+            this.container.style.setProperty('--h-confirmpopup-arrow-left', `${arrowLeft}px`);
+        }
+        if (containerOffset && targetOffset && containerOffset.top < targetOffset.top) {
+            this.container.setAttribute('data-h-confirmpopup-flipped', 'true');
+            !this.$unstyled() && addClass(this.container, 'h-confirm-popup-flipped');
+        }
+    }
+    appendOverlay() {
+        if (this.$appendTo() && this.$appendTo() !== 'self') {
+            if (this.$appendTo() === 'body') {
+                appendChild(this.document.body, this.container);
+            }
+            else {
+                appendChild(this.$appendTo(), this.container);
+            }
+        }
+    }
+    restoreAppend() {
+        if (this.container && this.$appendTo() !== 'self') {
+            appendChild(this.el.nativeElement, this.container);
+        }
+        this.onContainerDestroy();
+    }
+    hide() {
+        this._visible.set(false);
+    }
+    onAccept() {
+        if (this.confirmation?.acceptEvent) {
+            this.confirmation.acceptEvent.emit();
+        }
+        this.hide();
+        focus(this.confirmation?.target);
+    }
+    onReject() {
+        if (this.confirmation?.rejectEvent) {
+            this.confirmation.rejectEvent.emit();
+        }
+        this.hide();
+        focus(this.confirmation?.target);
+    }
+    onOverlayClick(event) {
+        this.overlayService.add({
+            originalEvent: event,
+            target: this.el.nativeElement
+        });
+    }
+    bindListeners() {
+        /*
+         * Called inside `setTimeout` to avoid listening to the click event that appears when `confirm` is first called(bubbling).
+         * Need wait when bubbling event up and hang the handler on the next tick.
+         * This is the case when eventTarget and confirmation.target do not match when the `confirm` method is called.
+         */
+        setTimeout(() => {
+            this.bindDocumentClickListener();
+            this.bindDocumentResizeListener();
+            this.bindScrollListener();
+        });
+    }
+    unbindListeners() {
+        this.unbindDocumentClickListener();
+        this.unbindDocumentResizeListener();
+        this.unbindScrollListener();
+    }
+    bindDocumentClickListener() {
+        if (!this.documentClickListener) {
+            let documentEvent = isIOS() ? 'touchstart' : 'click';
+            const documentTarget = this.el ? this.el.nativeElement.ownerDocument : this.document;
+            this.documentClickListener = this.renderer.listen(documentTarget, documentEvent, (event) => {
+                if (this.confirmation && this.confirmation.dismissableMask !== false) {
+                    let targetElement = this.confirmation.target;
+                    if (this.container !== event.target && !this.container?.contains(event.target) && targetElement !== event.target && !targetElement.contains(event.target)) {
+                        this.hide();
+                    }
+                }
+            });
+        }
+    }
+    unbindDocumentClickListener() {
+        if (this.documentClickListener) {
+            this.documentClickListener();
+            this.documentClickListener = null;
+        }
+    }
+    onWindowResize() {
+        if (this.computedVisible() && !isTouchDevice()) {
+            this.hide();
+        }
+    }
+    bindDocumentResizeListener() {
+        if (!this.documentResizeListener) {
+            this.documentResizeListener = this.renderer.listen(this.window, 'resize', this.onWindowResize.bind(this));
+        }
+    }
+    unbindDocumentResizeListener() {
+        if (this.documentResizeListener) {
+            this.documentResizeListener();
+            this.documentResizeListener = null;
+        }
+    }
+    bindScrollListener() {
+        if (!this.scrollHandler) {
+            this.scrollHandler = new ConnectedOverlayScrollHandler(this.confirmation?.target, () => {
+                if (this.computedVisible()) {
+                    this.hide();
+                }
+            });
+        }
+        this.scrollHandler.bindScrollListener();
+    }
+    unbindScrollListener() {
+        if (this.scrollHandler) {
+            this.scrollHandler.unbindScrollListener();
+        }
+    }
+    unsubscribeConfirmationSubscriptions() {
+        if (this.confirmation) {
+            if (this.confirmation.acceptEvent) {
+                this.confirmation.acceptEvent.unsubscribe();
+            }
+            if (this.confirmation.rejectEvent) {
+                this.confirmation.rejectEvent.unsubscribe();
+            }
+        }
+    }
+    onContainerDestroy() {
+        this.unbindListeners();
+        this.unsubscribeConfirmationSubscriptions();
+        if (this.autoZIndex()) {
+            ZIndexUtils.clear(this.container);
+        }
+        this.confirmation = null;
+        this.render.set(false);
+        this.container = null;
+    }
+    get acceptButtonLabel() {
+        return this.confirmation?.acceptLabel || this.config.getTranslation(TranslationKeys.ACCEPT);
+    }
+    get rejectButtonLabel() {
+        return this.confirmation?.rejectLabel || this.config.getTranslation(TranslationKeys.REJECT);
+    }
+    onDestroy() {
+        this.restoreAppend();
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ConfirmPopup, deps: [{ token: i0.ElementRef }, { token: i1.ConfirmationService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.OverlayService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: ConfirmPopup, isStandalone: true, selector: "h-confirmpopup", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null }, defaultFocus: { classPropertyName: "defaultFocus", publicName: "defaultFocus", isSignal: true, isRequired: false, transformFunction: null }, showTransitionOptions: { classPropertyName: "showTransitionOptions", publicName: "showTransitionOptions", isSignal: true, isRequired: false, transformFunction: null }, hideTransitionOptions: { classPropertyName: "hideTransitionOptions", publicName: "hideTransitionOptions", isSignal: true, isRequired: false, transformFunction: null }, autoZIndex: { classPropertyName: "autoZIndex", publicName: "autoZIndex", isSignal: true, isRequired: false, transformFunction: null }, baseZIndex: { classPropertyName: "baseZIndex", publicName: "baseZIndex", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, motionOptions: { classPropertyName: "motionOptions", publicName: "motionOptions", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:keydown.Escape": "onEscapeKeydown($event)" } }, providers: [ConfirmPopupStyle, { provide: CONFIRMPOPUP_INSTANCE, useExisting: ConfirmPopup }, { provide: PARENT_INSTANCE, useExisting: ConfirmPopup }], queries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"], isSignal: true }, { propertyName: "acceptIconTemplate", first: true, predicate: ["accepticon"], isSignal: true }, { propertyName: "rejectIconTemplate", first: true, predicate: ["rejecticon"], isSignal: true }, { propertyName: "headlessTemplate", first: true, predicate: ["headless"], isSignal: true }, { propertyName: "templates", predicate: HelixTemplate, isSignal: true }], viewQueries: [{ propertyName: "acceptButtonViewChild", first: true, predicate: ["acceptButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "rejectButtonViewChild", first: true, predicate: ["rejectButton"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i2.Bind }], ngImport: i0, template: "@if (render()) {\n  <div\n    [hMotion]=\"computedVisible()\"\n    [pMotionAppear]=\"true\"\n    [pMotionName]=\"'h-anchored-overlay'\"\n    [pMotionOptions]=\"computedMotionOptions()\"\n    (pMotionOnBeforeEnter)=\"onBeforeEnter($event)\"\n    (pMotionOnAfterLeave)=\"onAfterLeave()\"\n    hFocusTrap\n    [hBind]=\"ptm('root')\"\n    [class]=\"cn(cx('root'), styleClass())\"\n    [ngStyle]=\"style()\"\n    role=\"alertdialog\"\n    (click)=\"onOverlayClick($event)\"\n    >\n    @if (headlessTemplate() || _headlessTemplate) {\n      <ng-container *ngTemplateOutlet=\"headlessTemplate() || _headlessTemplate; context: { $implicit: confirmation }\"></ng-container>\n    } @else {\n      <div #content [hBind]=\"ptm('content')\" [class]=\"cx('content')\">\n        @if (contentTemplate() || _contentTemplate) {\n          <ng-container *ngTemplateOutlet=\"contentTemplate() || _contentTemplate; context: { $implicit: confirmation }\"></ng-container>\n        } @else {\n          @if (confirmation?.icon) {\n            <i [hBind]=\"ptm('icon')\" [class]=\"cx('icon')\"></i>\n          }\n          <span [hBind]=\"ptm('message')\" [class]=\"cx('message')\">{{ confirmation?.message }}</span>\n        }\n      </div>\n      <div [hBind]=\"ptm('footer')\" [class]=\"cx('footer')\">\n        @if (confirmation?.rejectVisible !== false) {\n          <h-button\n            type=\"button\"\n            [label]=\"rejectButtonLabel\"\n            (onClick)=\"onReject()\"\n            [pt]=\"ptm('pcRejectButton')\"\n            [class]=\"cx('pcRejectButton')\"\n            [styleClass]=\"$safeNavigationMigration(confirmation?.rejectButtonStyleClass)\"\n            [size]=\"confirmation?.rejectButtonProps?.size || 'small'\"\n            [text]=\"confirmation?.rejectButtonProps?.text || false\"\n            [attr.aria-label]=\"rejectButtonLabel\"\n            [buttonProps]=\"getRejectButtonProps()\"\n            [autofocus]=\"autoFocusReject\"\n            [unstyled]=\"unstyled()\"\n            >\n            <ng-template #icon>\n              @if (confirmation?.rejectIcon) {\n                <i [class]=\"confirmation?.rejectIcon\"></i>\n              } @else {\n                <ng-container *ngTemplateOutlet=\"rejectIconTemplate() || _rejectIconTemplate\"></ng-container>\n              }\n            </ng-template>\n          </h-button>\n        }\n        @if (confirmation?.acceptVisible !== false) {\n          <h-button\n            type=\"button\"\n            [label]=\"acceptButtonLabel\"\n            (onClick)=\"onAccept()\"\n            [pt]=\"ptm('pcAcceptButton')\"\n            [class]=\"cx('pcAcceptButton')\"\n            [styleClass]=\"$safeNavigationMigration(confirmation?.acceptButtonStyleClass)\"\n            [size]=\"confirmation?.acceptButtonProps?.size || 'small'\"\n            [attr.aria-label]=\"acceptButtonLabel\"\n            [buttonProps]=\"getAcceptButtonProps()\"\n            [autofocus]=\"autoFocusAccept\"\n            [unstyled]=\"unstyled()\"\n            >\n            <ng-template #icon>\n              @if (confirmation?.acceptIcon) {\n                <i [class]=\"confirmation?.acceptIcon\"></i>\n              } @else {\n                <ng-container *ngTemplateOutlet=\"acceptIconTemplate() || _acceptIconTemplate\"></ng-container>\n              }\n            </ng-template>\n          </h-button>\n        }\n      </div>\n    }\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i4.Button, selector: "h-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: FocusTrap, selector: "[hFocusTrap]", inputs: ["pFocusTrapDisabled"] }, { kind: "directive", type: Bind, selector: "[hBind]", inputs: ["hBind"] }, { kind: "ngmodule", type: MotionModule }, { kind: "directive", type: i5.MotionDirective, selector: "[hMotion]", inputs: ["hMotion", "pMotionName", "pMotionType", "pMotionSafe", "pMotionDisabled", "pMotionAppear", "pMotionEnter", "pMotionLeave", "pMotionDuration", "pMotionHideStrategy", "pMotionEnterFromClass", "pMotionEnterToClass", "pMotionEnterActiveClass", "pMotionLeaveFromClass", "pMotionLeaveToClass", "pMotionLeaveActiveClass", "pMotionOptions"], outputs: ["pMotionOnBeforeEnter", "pMotionOnEnter", "pMotionOnAfterEnter", "pMotionOnEnterCancelled", "pMotionOnBeforeLeave", "pMotionOnLeave", "pMotionOnAfterLeave", "pMotionOnLeaveCancelled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ConfirmPopup, decorators: [{
+            type: Component,
+            args: [{ selector: 'h-confirmpopup', standalone: true, imports: [CommonModule, SharedModule, ButtonModule, FocusTrap, Bind, MotionModule], providers: [ConfirmPopupStyle, { provide: CONFIRMPOPUP_INSTANCE, useExisting: ConfirmPopup }, { provide: PARENT_INSTANCE, useExisting: ConfirmPopup }], hostDirectives: [Bind], host: {
+                        '(document:keydown.Escape)': 'onEscapeKeydown($event)'
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@if (render()) {\n  <div\n    [hMotion]=\"computedVisible()\"\n    [pMotionAppear]=\"true\"\n    [pMotionName]=\"'h-anchored-overlay'\"\n    [pMotionOptions]=\"computedMotionOptions()\"\n    (pMotionOnBeforeEnter)=\"onBeforeEnter($event)\"\n    (pMotionOnAfterLeave)=\"onAfterLeave()\"\n    hFocusTrap\n    [hBind]=\"ptm('root')\"\n    [class]=\"cn(cx('root'), styleClass())\"\n    [ngStyle]=\"style()\"\n    role=\"alertdialog\"\n    (click)=\"onOverlayClick($event)\"\n    >\n    @if (headlessTemplate() || _headlessTemplate) {\n      <ng-container *ngTemplateOutlet=\"headlessTemplate() || _headlessTemplate; context: { $implicit: confirmation }\"></ng-container>\n    } @else {\n      <div #content [hBind]=\"ptm('content')\" [class]=\"cx('content')\">\n        @if (contentTemplate() || _contentTemplate) {\n          <ng-container *ngTemplateOutlet=\"contentTemplate() || _contentTemplate; context: { $implicit: confirmation }\"></ng-container>\n        } @else {\n          @if (confirmation?.icon) {\n            <i [hBind]=\"ptm('icon')\" [class]=\"cx('icon')\"></i>\n          }\n          <span [hBind]=\"ptm('message')\" [class]=\"cx('message')\">{{ confirmation?.message }}</span>\n        }\n      </div>\n      <div [hBind]=\"ptm('footer')\" [class]=\"cx('footer')\">\n        @if (confirmation?.rejectVisible !== false) {\n          <h-button\n            type=\"button\"\n            [label]=\"rejectButtonLabel\"\n            (onClick)=\"onReject()\"\n            [pt]=\"ptm('pcRejectButton')\"\n            [class]=\"cx('pcRejectButton')\"\n            [styleClass]=\"$safeNavigationMigration(confirmation?.rejectButtonStyleClass)\"\n            [size]=\"confirmation?.rejectButtonProps?.size || 'small'\"\n            [text]=\"confirmation?.rejectButtonProps?.text || false\"\n            [attr.aria-label]=\"rejectButtonLabel\"\n            [buttonProps]=\"getRejectButtonProps()\"\n            [autofocus]=\"autoFocusReject\"\n            [unstyled]=\"unstyled()\"\n            >\n            <ng-template #icon>\n              @if (confirmation?.rejectIcon) {\n                <i [class]=\"confirmation?.rejectIcon\"></i>\n              } @else {\n                <ng-container *ngTemplateOutlet=\"rejectIconTemplate() || _rejectIconTemplate\"></ng-container>\n              }\n            </ng-template>\n          </h-button>\n        }\n        @if (confirmation?.acceptVisible !== false) {\n          <h-button\n            type=\"button\"\n            [label]=\"acceptButtonLabel\"\n            (onClick)=\"onAccept()\"\n            [pt]=\"ptm('pcAcceptButton')\"\n            [class]=\"cx('pcAcceptButton')\"\n            [styleClass]=\"$safeNavigationMigration(confirmation?.acceptButtonStyleClass)\"\n            [size]=\"confirmation?.acceptButtonProps?.size || 'small'\"\n            [attr.aria-label]=\"acceptButtonLabel\"\n            [buttonProps]=\"getAcceptButtonProps()\"\n            [autofocus]=\"autoFocusAccept\"\n            [unstyled]=\"unstyled()\"\n            >\n            <ng-template #icon>\n              @if (confirmation?.acceptIcon) {\n                <i [class]=\"confirmation?.acceptIcon\"></i>\n              } @else {\n                <ng-container *ngTemplateOutlet=\"acceptIconTemplate() || _acceptIconTemplate\"></ng-container>\n              }\n            </ng-template>\n          </h-button>\n        }\n      </div>\n    }\n  </div>\n}\n" }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.ConfirmationService }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.OverlayService }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }], propDecorators: { key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: false }] }], defaultFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultFocus", required: false }] }], showTransitionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTransitionOptions", required: false }] }], hideTransitionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideTransitionOptions", required: false }] }], autoZIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoZIndex", required: false }] }], baseZIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseZIndex", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], motionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "motionOptions", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], contentTemplate: [{ type: i0.ContentChild, args: ['content', { ...{ descendants: false }, isSignal: true }] }], acceptIconTemplate: [{ type: i0.ContentChild, args: ['accepticon', { ...{ descendants: false }, isSignal: true }] }], rejectIconTemplate: [{ type: i0.ContentChild, args: ['rejecticon', { ...{ descendants: false }, isSignal: true }] }], headlessTemplate: [{ type: i0.ContentChild, args: ['headless', { ...{ descendants: false }, isSignal: true }] }], acceptButtonViewChild: [{ type: i0.ViewChild, args: ['acceptButton', { ...{ read: ElementRef }, isSignal: true }] }], rejectButtonViewChild: [{ type: i0.ViewChild, args: ['rejectButton', { ...{ read: ElementRef }, isSignal: true }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => HelixTemplate), { isSignal: true }] }] } });
+class ConfirmPopupModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ConfirmPopupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.6", ngImport: i0, type: ConfirmPopupModule, imports: [ConfirmPopup, SharedModule], exports: [ConfirmPopup, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ConfirmPopupModule, imports: [ConfirmPopup, SharedModule, SharedModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ConfirmPopupModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [ConfirmPopup, SharedModule],
+                    exports: [ConfirmPopup, SharedModule]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ConfirmPopup, ConfirmPopupClasses, ConfirmPopupModule, ConfirmPopupStyle };
+//# sourceMappingURL=gravionlabs-helix-core-confirmpopup.mjs.map