ngx-com 0.0.3 → 0.0.5

package/fesm2022/ngx-com-components-confirm.mjs

@@ -0,0 +1,562 @@
+import * as i0 from '@angular/core';
+import { inject, viewChild, signal, computed, ChangeDetectionStrategy, Component, ElementRef, ViewContainerRef, Injector, DestroyRef, PLATFORM_ID, input, booleanAttribute, output, Directive } from '@angular/core';
+import { NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Overlay } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { filter } from 'rxjs/operators';
+import { FocusTrapFactory } from '@angular/cdk/a11y';
+import { ComButton } from 'ngx-com/components/button';
+import { cva } from 'class-variance-authority';
+import { mergeClasses } from 'ngx-com/utils';
+
+/**
+ * CVA variants for the confirmation panel backdrop.
+ *
+ * @tokens `--color-background`
+ */
+const confirmBackdropVariants = cva([
+    'fixed',
+    'inset-0',
+    'z-50',
+    'bg-background/80',
+    'backdrop-blur-sm',
+], {
+    variants: {
+        visible: {
+            true: 'animate-in fade-in-0',
+            false: 'animate-out fade-out-0',
+        },
+    },
+    defaultVariants: {
+        visible: true,
+    },
+});
+/**
+ * CVA variants for the confirmation panel container.
+ *
+ * @tokens `--color-popover`, `--color-popover-foreground`, `--color-border`, `--shadow-lg`, `--radius-popover`
+ */
+const confirmPanelVariants = cva([
+    'com-confirm-panel',
+    'fixed',
+    'left-1/2',
+    'top-1/2',
+    '-translate-x-1/2',
+    '-translate-y-1/2',
+    'z-50',
+    'grid',
+    'w-full',
+    'max-w-lg',
+    'gap-4',
+    'border',
+    'border-border',
+    'bg-popover',
+    'text-popover-foreground',
+    'p-6',
+    'shadow-lg',
+    'rounded-popover',
+    'outline-none',
+], {
+    variants: {
+        visible: {
+            true: 'animate-in fade-in-0 zoom-in-95',
+            false: 'animate-out fade-out-0 zoom-out-95',
+        },
+    },
+    defaultVariants: {
+        visible: true,
+    },
+});
+/**
+ * CVA variants for the confirmation panel title.
+ *
+ * @tokens `--color-foreground`
+ */
+const confirmTitleVariants = cva([
+    'text-lg',
+    'font-semibold',
+    'text-foreground',
+    'leading-none',
+    'tracking-tight',
+]);
+/**
+ * CVA variants for the confirmation panel message.
+ *
+ * @tokens `--color-muted-foreground`
+ */
+const confirmMessageVariants = cva([
+    'text-sm',
+    'text-muted-foreground',
+]);
+/**
+ * CVA variants for the confirmation panel footer.
+ */
+const confirmFooterVariants = cva([
+    'flex',
+    'flex-col-reverse',
+    'sm:flex-row',
+    'sm:justify-end',
+    'sm:space-x-2',
+]);
+
+let confirmIdCounter = 0;
+/**
+ * Generate a unique ID for a confirmation dialog title.
+ */
+function generateConfirmTitleId() {
+    return `confirm-title-${++confirmIdCounter}`;
+}
+/**
+ * Generate a unique ID for a confirmation dialog description.
+ */
+function generateConfirmDescriptionId() {
+    return `confirm-desc-${++confirmIdCounter}`;
+}
+
+/**
+ * Internal confirmation panel component rendered inside the CDK overlay.
+ * Receives configuration from the directive and manages the dialog UI.
+ *
+ * @internal Not exported in public API
+ *
+ * @tokens `--color-popover`, `--color-popover-foreground`, `--color-border`,
+ *         `--color-foreground`, `--color-muted-foreground`, `--shadow-lg`, `--radius-popover`
+ */
+class ConfirmPanelComponent {
+    focusTrapFactory = inject(FocusTrapFactory);
+    focusTrap = null;
+    /** Reference to the panel element for focus trap. */
+    panelElement = viewChild('panelElement', ...(ngDevMode ? [{ debugName: "panelElement" }] : []));
+    /** Reference to the cancel button for initial focus. */
+    cancelButton = viewChild('cancelButton', ...(ngDevMode ? [{ debugName: "cancelButton" }] : []));
+    /** Panel configuration passed from the directive. */
+    config = signal(null, ...(ngDevMode ? [{ debugName: "config" }] : []));
+    /** Whether the panel is visible (for animation state). */
+    visible = signal(false, ...(ngDevMode ? [{ debugName: "visible" }] : []));
+    /** Internal loading state for async operations. */
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    /** Function to confirm the action, set by directive. */
+    confirmFn = signal(() => { }, ...(ngDevMode ? [{ debugName: "confirmFn" }] : []));
+    /** Function to cancel the action, set by directive. */
+    cancelFn = signal(() => { }, ...(ngDevMode ? [{ debugName: "cancelFn" }] : []));
+    /** Computed template context for custom templates. */
+    templateContext = computed(() => ({
+        $implicit: this.config()?.message ?? '',
+        title: this.config()?.title,
+        confirm: () => this.onConfirm(),
+        cancel: () => this.onCancel(),
+        loading: this.loading(),
+        setLoading: (value) => this.loading.set(value),
+    }), ...(ngDevMode ? [{ debugName: "templateContext" }] : []));
+    /** Computed backdrop CSS classes. */
+    backdropClasses = computed(() => mergeClasses(confirmBackdropVariants({ visible: this.visible() })), ...(ngDevMode ? [{ debugName: "backdropClasses" }] : []));
+    /** Computed panel CSS classes. */
+    panelClasses = computed(() => mergeClasses(confirmPanelVariants({ visible: this.visible() })), ...(ngDevMode ? [{ debugName: "panelClasses" }] : []));
+    /** Computed title CSS classes. */
+    titleClasses = computed(() => mergeClasses(confirmTitleVariants()), ...(ngDevMode ? [{ debugName: "titleClasses" }] : []));
+    /** Computed message CSS classes. */
+    messageClasses = computed(() => mergeClasses(confirmMessageVariants()), ...(ngDevMode ? [{ debugName: "messageClasses" }] : []));
+    /** Computed footer CSS classes. */
+    footerClasses = computed(() => mergeClasses(confirmFooterVariants()), ...(ngDevMode ? [{ debugName: "footerClasses" }] : []));
+    ngAfterViewInit() {
+        this.setupFocusTrap();
+        this.focusCancelButton();
+    }
+    /** Handle confirm button click. */
+    onConfirm() {
+        this.confirmFn()();
+    }
+    /** Handle cancel button click. */
+    onCancel() {
+        this.cancelFn()();
+    }
+    /** Clean up focus trap on destroy. */
+    destroyFocusTrap() {
+        this.focusTrap?.destroy();
+        this.focusTrap = null;
+    }
+    setupFocusTrap() {
+        const panelEl = this.panelElement()?.nativeElement;
+        if (panelEl) {
+            this.focusTrap = this.focusTrapFactory.create(panelEl);
+            this.focusTrap.focusInitialElementWhenReady();
+        }
+    }
+    focusCancelButton() {
+        // Focus cancel button as safer default (prevents accidental confirmation)
+        // Use setTimeout to ensure DOM is ready
+        setTimeout(() => {
+            const cancelBtn = this.cancelButton()?.nativeElement;
+            if (cancelBtn) {
+                cancelBtn.focus();
+            }
+        }, 0);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ConfirmPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ConfirmPanelComponent, isStandalone: true, selector: "com-confirm-panel", viewQueries: [{ propertyName: "panelElement", first: true, predicate: ["panelElement"], descendants: true, isSignal: true }, { propertyName: "cancelButton", first: true, predicate: ["cancelButton"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (config()?.hasBackdrop) {
+      <div
+        [class]="backdropClasses()"
+        [attr.data-state]="visible() ? 'open' : 'closed'"
+        aria-hidden="true"
+      ></div>
+    }
+    <div
+      #panelElement
+      [class]="panelClasses()"
+      role="alertdialog"
+      aria-modal="true"
+      [attr.aria-labelledby]="config()?.title ? config()?.titleId : null"
+      [attr.aria-describedby]="config()?.descriptionId"
+      [attr.data-state]="visible() ? 'open' : 'closed'"
+      tabindex="-1"
+    >
+      @if (config()?.customTemplate) {
+        <ng-container
+          [ngTemplateOutlet]="config()!.customTemplate!"
+          [ngTemplateOutletContext]="templateContext()"
+        />
+      } @else {
+        <div class="flex flex-col space-y-2">
+          @if (config()?.title) {
+            <h2 [id]="config()?.titleId" [class]="titleClasses()">
+              {{ config()?.title }}
+            </h2>
+          }
+          <p [id]="config()?.descriptionId" [class]="messageClasses()">
+            {{ config()?.message }}
+          </p>
+        </div>
+        <div [class]="footerClasses()">
+          <button
+            #cancelButton
+            comButton
+            variant="outline"
+            (click)="onCancel()"
+            type="button"
+          >
+            {{ config()?.cancelLabel }}
+          </button>
+          <button
+            comButton
+            [color]="config()?.confirmColor ?? 'primary'"
+            (click)="onConfirm()"
+            type="button"
+          >
+            {{ config()?.confirmLabel }}
+          </button>
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:contents}[data-state=open]{--tw-enter-opacity: 0;--tw-enter-scale: .95}[data-state=closed]{--tw-exit-opacity: 0;--tw-exit-scale: .95}@media(prefers-reduced-motion:reduce){[data-state=open],[data-state=closed]{animation:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ComButton, selector: "button[comButton], a[comButton]", inputs: ["variant", "color", "size", "fullWidth", "disabled", "class"], exportAs: ["comButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ConfirmPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'com-confirm-panel', template: `
+    @if (config()?.hasBackdrop) {
+      <div
+        [class]="backdropClasses()"
+        [attr.data-state]="visible() ? 'open' : 'closed'"
+        aria-hidden="true"
+      ></div>
+    }
+    <div
+      #panelElement
+      [class]="panelClasses()"
+      role="alertdialog"
+      aria-modal="true"
+      [attr.aria-labelledby]="config()?.title ? config()?.titleId : null"
+      [attr.aria-describedby]="config()?.descriptionId"
+      [attr.data-state]="visible() ? 'open' : 'closed'"
+      tabindex="-1"
+    >
+      @if (config()?.customTemplate) {
+        <ng-container
+          [ngTemplateOutlet]="config()!.customTemplate!"
+          [ngTemplateOutletContext]="templateContext()"
+        />
+      } @else {
+        <div class="flex flex-col space-y-2">
+          @if (config()?.title) {
+            <h2 [id]="config()?.titleId" [class]="titleClasses()">
+              {{ config()?.title }}
+            </h2>
+          }
+          <p [id]="config()?.descriptionId" [class]="messageClasses()">
+            {{ config()?.message }}
+          </p>
+        </div>
+        <div [class]="footerClasses()">
+          <button
+            #cancelButton
+            comButton
+            variant="outline"
+            (click)="onCancel()"
+            type="button"
+          >
+            {{ config()?.cancelLabel }}
+          </button>
+          <button
+            comButton
+            [color]="config()?.confirmColor ?? 'primary'"
+            (click)="onConfirm()"
+            type="button"
+          >
+            {{ config()?.confirmLabel }}
+          </button>
+        </div>
+      }
+    </div>
+  `, imports: [NgTemplateOutlet, ComButton], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:contents}[data-state=open]{--tw-enter-opacity: 0;--tw-enter-scale: .95}[data-state=closed]{--tw-exit-opacity: 0;--tw-exit-scale: .95}@media(prefers-reduced-motion:reduce){[data-state=open],[data-state=closed]{animation:none}}\n"] }]
+        }], propDecorators: { panelElement: [{ type: i0.ViewChild, args: ['panelElement', { isSignal: true }] }], cancelButton: [{ type: i0.ViewChild, args: ['cancelButton', { isSignal: true }] }] } });
+
+/**
+ * Confirmation directive — intercepts clicks and displays a confirmation panel
+ * before allowing the action to proceed.
+ *
+ * The directive acts as an output gate: it captures clicks, shows confirmation UI,
+ * and emits `true` (confirmed) or `false` (cancelled) through its output.
+ *
+ * @tokens `--color-popover`, `--color-popover-foreground`, `--color-border`,
+ *         `--color-foreground`, `--color-muted-foreground`, `--color-background`,
+ *         `--shadow-lg`, `--radius-popover`
+ *
+ * @example Basic confirmation
+ * ```html
+ * <button comButton (comConfirm)="onDelete($event)" confirmMessage="Delete this item?">
+ *   Delete
+ * </button>
+ * ```
+ *
+ * @example Destructive action with warn styling
+ * ```html
+ * <button comButton color="warn"
+ *   (comConfirm)="onPermanentDelete($event)"
+ *   confirmTitle="Permanent Deletion"
+ *   confirmMessage="This action cannot be undone."
+ *   confirmLabel="Delete Forever"
+ *   confirmColor="warn">
+ *   Delete Permanently
+ * </button>
+ * ```
+ *
+ * @example Custom template
+ * ```html
+ * <button comButton (comConfirm)="onAction($event)" [confirmTpl]="customTpl">
+ *   Action
+ * </button>
+ *
+ * <ng-template #customTpl let-message let-confirm="confirm" let-cancel="cancel">
+ *   <div class="flex flex-col gap-4">
+ *     <p>{{ message }}</p>
+ *     <div class="flex justify-end gap-2">
+ *       <button comButton variant="ghost" (click)="cancel()">Cancel</button>
+ *       <button comButton (click)="confirm()">Confirm</button>
+ *     </div>
+ *   </div>
+ * </ng-template>
+ * ```
+ */
+class ComConfirm {
+    overlay = inject(Overlay);
+    elementRef = inject(ElementRef);
+    viewContainerRef = inject(ViewContainerRef);
+    injector = inject(Injector);
+    destroyRef = inject(DestroyRef);
+    platformId = inject(PLATFORM_ID);
+    overlayRef = null;
+    panelInstance = null;
+    titleId = generateConfirmTitleId();
+    descriptionId = generateConfirmDescriptionId();
+    /** Whether the confirmation panel is currently open. */
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    // ─── Content Inputs ───
+    /** The confirmation message to display. */
+    confirmMessage = input('Are you sure?', ...(ngDevMode ? [{ debugName: "confirmMessage" }] : []));
+    /** Optional title for the confirmation dialog. */
+    confirmTitle = input(undefined, ...(ngDevMode ? [{ debugName: "confirmTitle" }] : []));
+    /** Label for the confirm button. */
+    confirmLabel = input('Confirm', ...(ngDevMode ? [{ debugName: "confirmLabel" }] : []));
+    /** Label for the cancel button. */
+    cancelLabel = input('Cancel', ...(ngDevMode ? [{ debugName: "cancelLabel" }] : []));
+    // ─── Styling Inputs ───
+    /** Color variant for the confirm button. */
+    confirmColor = input('primary', ...(ngDevMode ? [{ debugName: "confirmColor" }] : []));
+    // ─── Behavior Inputs ───
+    /** When true, clicks pass through without showing confirmation. */
+    confirmDisabled = input(false, { ...(ngDevMode ? { debugName: "confirmDisabled" } : {}), transform: booleanAttribute });
+    /** Whether to show a backdrop behind the panel. */
+    confirmBackdrop = input(false, { ...(ngDevMode ? { debugName: "confirmBackdrop" } : {}), transform: booleanAttribute });
+    /** Custom template for the panel content. */
+    confirmTpl = input(undefined, ...(ngDevMode ? [{ debugName: "confirmTpl" }] : []));
+    // ─── Output ───
+    /**
+     * Emits `true` when confirmed, `false` when cancelled or navigated away.
+     * This is the main directive output — acts as an output gate for the action.
+     */
+    comConfirm = output();
+    // ─── Computed ───
+    panelConfig = computed(() => ({
+        message: this.confirmMessage(),
+        title: this.confirmTitle(),
+        confirmLabel: this.confirmLabel(),
+        cancelLabel: this.cancelLabel(),
+        confirmColor: this.confirmColor(),
+        hasBackdrop: this.confirmBackdrop(),
+        customTemplate: this.confirmTpl(),
+        titleId: this.titleId,
+        descriptionId: this.descriptionId,
+    }), ...(ngDevMode ? [{ debugName: "panelConfig" }] : []));
+    constructor() {
+        // Emit false and cleanup on destroy (navigation away)
+        this.destroyRef.onDestroy(() => {
+            if (this.isOpen()) {
+                this.comConfirm.emit(false);
+            }
+            this.disposeOverlay();
+        });
+    }
+    // ─── Public API ───
+    /** Programmatically open the confirmation dialog. */
+    open() {
+        if (this.isOpen() || this.confirmDisabled())
+            return;
+        this.createOverlay();
+        this.attachPanel();
+    }
+    /** Programmatically close the confirmation dialog (emits false). */
+    close() {
+        if (!this.isOpen())
+            return;
+        this.handleCancel();
+    }
+    // ─── Event Handlers ───
+    onTriggerClick(event) {
+        // If disabled, let the click pass through normally
+        if (this.confirmDisabled())
+            return;
+        // Intercept the click
+        event.preventDefault();
+        event.stopPropagation();
+        this.open();
+    }
+    // ─── Overlay Management ───
+    createOverlay() {
+        if (this.overlayRef)
+            return;
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        // Use GlobalPositionStrategy for centered modal
+        const positionStrategy = this.overlay
+            .position()
+            .global()
+            .centerHorizontally()
+            .centerVertically();
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.block(),
+            hasBackdrop: false, // We handle backdrop in the panel component
+            panelClass: 'com-confirm-overlay',
+            disposeOnNavigation: true,
+        });
+    }
+    attachPanel() {
+        if (!this.overlayRef || this.overlayRef.hasAttached())
+            return;
+        const portal = new ComponentPortal(ConfirmPanelComponent, this.viewContainerRef, this.injector);
+        const componentRef = this.overlayRef.attach(portal);
+        this.panelInstance = componentRef.instance;
+        // Configure panel
+        this.panelInstance.config.set(this.panelConfig());
+        this.panelInstance.confirmFn.set(() => this.handleConfirm());
+        this.panelInstance.cancelFn.set(() => this.handleCancel());
+        // Subscribe to keyboard events (Escape to cancel)
+        this.overlayRef
+            .keydownEvents()
+            .pipe(filter((event) => event.key === 'Escape'), takeUntilDestroyed(this.destroyRef))
+            .subscribe((event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this.handleCancel();
+        });
+        // Subscribe to detachments (cleanup)
+        this.overlayRef
+            .detachments()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            this.handleDetachment();
+        });
+        // Show panel after a microtask (allows initial styles to apply)
+        requestAnimationFrame(() => {
+            if (this.panelInstance) {
+                this.panelInstance.visible.set(true);
+            }
+        });
+        this.isOpen.set(true);
+    }
+    handleConfirm() {
+        if (!this.isOpen())
+            return;
+        this.comConfirm.emit(true);
+        this.closePanel();
+    }
+    handleCancel() {
+        if (!this.isOpen())
+            return;
+        this.comConfirm.emit(false);
+        this.closePanel();
+    }
+    closePanel() {
+        if (!this.panelInstance)
+            return;
+        // Trigger hide animation
+        this.panelInstance.visible.set(false);
+        // Wait for animation to complete before detaching
+        setTimeout(() => {
+            this.disposeOverlay();
+            this.returnFocusToTrigger();
+        }, 150); // Match animation duration
+    }
+    handleDetachment() {
+        this.isOpen.set(false);
+        this.panelInstance?.destroyFocusTrap();
+        this.panelInstance = null;
+    }
+    disposeOverlay() {
+        if (this.overlayRef) {
+            this.panelInstance?.destroyFocusTrap();
+            this.overlayRef.dispose();
+            this.overlayRef = null;
+        }
+        this.panelInstance = null;
+        this.isOpen.set(false);
+    }
+    returnFocusToTrigger() {
+        this.elementRef.nativeElement.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComConfirm, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: ComConfirm, isStandalone: true, selector: "[comConfirm]", inputs: { confirmMessage: { classPropertyName: "confirmMessage", publicName: "confirmMessage", isSignal: true, isRequired: false, transformFunction: null }, confirmTitle: { classPropertyName: "confirmTitle", publicName: "confirmTitle", isSignal: true, isRequired: false, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, confirmColor: { classPropertyName: "confirmColor", publicName: "confirmColor", isSignal: true, isRequired: false, transformFunction: null }, confirmDisabled: { classPropertyName: "confirmDisabled", publicName: "confirmDisabled", isSignal: true, isRequired: false, transformFunction: null }, confirmBackdrop: { classPropertyName: "confirmBackdrop", publicName: "confirmBackdrop", isSignal: true, isRequired: false, transformFunction: null }, confirmTpl: { classPropertyName: "confirmTpl", publicName: "confirmTpl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { comConfirm: "comConfirm" }, host: { listeners: { "click": "onTriggerClick($event)" }, properties: { "attr.aria-haspopup": "\"dialog\"", "attr.aria-expanded": "isOpen()" } }, exportAs: ["comConfirm"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComConfirm, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[comConfirm]',
+                    exportAs: 'comConfirm',
+                    host: {
+                        '[attr.aria-haspopup]': '"dialog"',
+                        '[attr.aria-expanded]': 'isOpen()',
+                        '(click)': 'onTriggerClick($event)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { confirmMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmMessage", required: false }] }], confirmTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmTitle", required: false }] }], confirmLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmLabel", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], confirmColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmColor", required: false }] }], confirmDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmDisabled", required: false }] }], confirmBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmBackdrop", required: false }] }], confirmTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmTpl", required: false }] }], comConfirm: [{ type: i0.Output, args: ["comConfirm"] }] } });
+
+// Public API for the confirm directive
+// Main directive
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ComConfirm, confirmBackdropVariants, confirmFooterVariants, confirmMessageVariants, confirmPanelVariants, confirmTitleVariants };
+//# sourceMappingURL=ngx-com-components-confirm.mjs.map

package/fesm2022/ngx-com-components-confirm.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-com-components-confirm.mjs","sources":["../../../projects/com/components/confirm/confirm.variants.ts","../../../projects/com/components/confirm/confirm.utils.ts","../../../projects/com/components/confirm/confirm-panel.component.ts","../../../projects/com/components/confirm/confirm.directive.ts","../../../projects/com/components/confirm/index.ts","../../../projects/com/components/confirm/ngx-com-components-confirm.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\n/**\n * CVA variants for the confirmation panel backdrop.\n *\n * @tokens `--color-background`\n */\nexport const confirmBackdropVariants: (props?: {\n  visible?: boolean;\n}) => string = cva(\n  [\n    'fixed',\n    'inset-0',\n    'z-50',\n    'bg-background/80',\n    'backdrop-blur-sm',\n  ],\n  {\n    variants: {\n      visible: {\n        true: 'animate-in fade-in-0',\n        false: 'animate-out fade-out-0',\n      },\n    },\n    defaultVariants: {\n      visible: true,\n    },\n  },\n);\n\n/**\n * CVA variants for the confirmation panel container.\n *\n * @tokens `--color-popover`, `--color-popover-foreground`, `--color-border`, `--shadow-lg`, `--radius-popover`\n */\nexport const confirmPanelVariants: (props?: {\n  visible?: boolean;\n}) => string = cva(\n  [\n    'com-confirm-panel',\n    'fixed',\n    'left-1/2',\n    'top-1/2',\n    '-translate-x-1/2',\n    '-translate-y-1/2',\n    'z-50',\n    'grid',\n    'w-full',\n    'max-w-lg',\n    'gap-4',\n    'border',\n    'border-border',\n    'bg-popover',\n    'text-popover-foreground',\n    'p-6',\n    'shadow-lg',\n    'rounded-popover',\n    'outline-none',\n  ],\n  {\n    variants: {\n      visible: {\n        true: 'animate-in fade-in-0 zoom-in-95',\n        false: 'animate-out fade-out-0 zoom-out-95',\n      },\n    },\n    defaultVariants: {\n      visible: true,\n    },\n  },\n);\n\n/**\n * CVA variants for the confirmation panel title.\n *\n * @tokens `--color-foreground`\n */\nexport const confirmTitleVariants: () => string = cva([\n  'text-lg',\n  'font-semibold',\n  'text-foreground',\n  'leading-none',\n  'tracking-tight',\n]);\n\n/**\n * CVA variants for the confirmation panel message.\n *\n * @tokens `--color-muted-foreground`\n */\nexport const confirmMessageVariants: () => string = cva([\n  'text-sm',\n  'text-muted-foreground',\n]);\n\n/**\n * CVA variants for the confirmation panel footer.\n */\nexport const confirmFooterVariants: () => string = cva([\n  'flex',\n  'flex-col-reverse',\n  'sm:flex-row',\n  'sm:justify-end',\n  'sm:space-x-2',\n]);\n","export { mergeClasses } from 'ngx-com/utils';\n\nlet confirmIdCounter = 0;\n\n/**\n * Generate a unique ID for a confirmation dialog title.\n */\nexport function generateConfirmTitleId(): string {\n  return `confirm-title-${++confirmIdCounter}`;\n}\n\n/**\n * Generate a unique ID for a confirmation dialog description.\n */\nexport function generateConfirmDescriptionId(): string {\n  return `confirm-desc-${++confirmIdCounter}`;\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  ElementRef,\n  inject,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport type { AfterViewInit, Signal, WritableSignal } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { FocusTrapFactory, FocusTrap } from '@angular/cdk/a11y';\nimport { ComButton } from 'ngx-com/components/button';\nimport {\n  confirmPanelVariants,\n  confirmBackdropVariants,\n  confirmTitleVariants,\n  confirmMessageVariants,\n  confirmFooterVariants,\n} from './confirm.variants';\nimport type { ConfirmTemplateContext, ConfirmPanelConfig } from './confirm.models';\nimport { mergeClasses } from './confirm.utils';\n\n/**\n * Internal confirmation panel component rendered inside the CDK overlay.\n * Receives configuration from the directive and manages the dialog UI.\n *\n * @internal Not exported in public API\n *\n * @tokens `--color-popover`, `--color-popover-foreground`, `--color-border`,\n *         `--color-foreground`, `--color-muted-foreground`, `--shadow-lg`, `--radius-popover`\n */\n@Component({\n  selector: 'com-confirm-panel',\n  template: `\n    @if (config()?.hasBackdrop) {\n      <div\n        [class]=\"backdropClasses()\"\n        [attr.data-state]=\"visible() ? 'open' : 'closed'\"\n        aria-hidden=\"true\"\n      ></div>\n    }\n    <div\n      #panelElement\n      [class]=\"panelClasses()\"\n      role=\"alertdialog\"\n      aria-modal=\"true\"\n      [attr.aria-labelledby]=\"config()?.title ? config()?.titleId : null\"\n      [attr.aria-describedby]=\"config()?.descriptionId\"\n      [attr.data-state]=\"visible() ? 'open' : 'closed'\"\n      tabindex=\"-1\"\n    >\n      @if (config()?.customTemplate) {\n        <ng-container\n          [ngTemplateOutlet]=\"config()!.customTemplate!\"\n          [ngTemplateOutletContext]=\"templateContext()\"\n        />\n      } @else {\n        <div class=\"flex flex-col space-y-2\">\n          @if (config()?.title) {\n            <h2 [id]=\"config()?.titleId\" [class]=\"titleClasses()\">\n              {{ config()?.title }}\n            </h2>\n          }\n          <p [id]=\"config()?.descriptionId\" [class]=\"messageClasses()\">\n            {{ config()?.message }}\n          </p>\n        </div>\n        <div [class]=\"footerClasses()\">\n          <button\n            #cancelButton\n            comButton\n            variant=\"outline\"\n            (click)=\"onCancel()\"\n            type=\"button\"\n          >\n            {{ config()?.cancelLabel }}\n          </button>\n          <button\n            comButton\n            [color]=\"config()?.confirmColor ?? 'primary'\"\n            (click)=\"onConfirm()\"\n            type=\"button\"\n          >\n            {{ config()?.confirmLabel }}\n          </button>\n        </div>\n      }\n    </div>\n  `,\n  styles: `\n    :host {\n      display: contents;\n    }\n\n    /* Animation styles using Tailwind animate utilities */\n    [data-state='open'] {\n      --tw-enter-opacity: 0;\n      --tw-enter-scale: 0.95;\n    }\n\n    [data-state='closed'] {\n      --tw-exit-opacity: 0;\n      --tw-exit-scale: 0.95;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      [data-state='open'],\n      [data-state='closed'] {\n        animation: none;\n      }\n    }\n  `,\n  imports: [NgTemplateOutlet, ComButton],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ConfirmPanelComponent implements AfterViewInit {\n  private readonly focusTrapFactory = inject(FocusTrapFactory);\n  private focusTrap: FocusTrap | null = null;\n\n  /** Reference to the panel element for focus trap. */\n  private readonly panelElement = viewChild<ElementRef<HTMLElement>>('panelElement');\n\n  /** Reference to the cancel button for initial focus. */\n  private readonly cancelButton = viewChild<ElementRef<HTMLButtonElement>>('cancelButton');\n\n  /** Panel configuration passed from the directive. */\n  readonly config: WritableSignal<ConfirmPanelConfig | null> = signal(null);\n\n  /** Whether the panel is visible (for animation state). */\n  readonly visible: WritableSignal<boolean> = signal(false);\n\n  /** Internal loading state for async operations. */\n  readonly loading: WritableSignal<boolean> = signal(false);\n\n  /** Function to confirm the action, set by directive. */\n  readonly confirmFn: WritableSignal<() => void> = signal(() => {});\n\n  /** Function to cancel the action, set by directive. */\n  readonly cancelFn: WritableSignal<() => void> = signal(() => {});\n\n  /** Computed template context for custom templates. */\n  protected readonly templateContext: Signal<ConfirmTemplateContext> = computed(() => ({\n    $implicit: this.config()?.message ?? '',\n    title: this.config()?.title,\n    confirm: () => this.onConfirm(),\n    cancel: () => this.onCancel(),\n    loading: this.loading(),\n    setLoading: (value: boolean) => this.loading.set(value),\n  }));\n\n  /** Computed backdrop CSS classes. */\n  protected readonly backdropClasses: Signal<string> = computed(() =>\n    mergeClasses(confirmBackdropVariants({ visible: this.visible() })),\n  );\n\n  /** Computed panel CSS classes. */\n  protected readonly panelClasses: Signal<string> = computed(() =>\n    mergeClasses(confirmPanelVariants({ visible: this.visible() })),\n  );\n\n  /** Computed title CSS classes. */\n  protected readonly titleClasses: Signal<string> = computed(() =>\n    mergeClasses(confirmTitleVariants()),\n  );\n\n  /** Computed message CSS classes. */\n  protected readonly messageClasses: Signal<string> = computed(() =>\n    mergeClasses(confirmMessageVariants()),\n  );\n\n  /** Computed footer CSS classes. */\n  protected readonly footerClasses: Signal<string> = computed(() =>\n    mergeClasses(confirmFooterVariants()),\n  );\n\n  ngAfterViewInit(): void {\n    this.setupFocusTrap();\n    this.focusCancelButton();\n  }\n\n  /** Handle confirm button click. */\n  protected onConfirm(): void {\n    this.confirmFn()();\n  }\n\n  /** Handle cancel button click. */\n  protected onCancel(): void {\n    this.cancelFn()();\n  }\n\n  /** Clean up focus trap on destroy. */\n  destroyFocusTrap(): void {\n    this.focusTrap?.destroy();\n    this.focusTrap = null;\n  }\n\n  private setupFocusTrap(): void {\n    const panelEl = this.panelElement()?.nativeElement;\n    if (panelEl) {\n      this.focusTrap = this.focusTrapFactory.create(panelEl);\n      this.focusTrap.focusInitialElementWhenReady();\n    }\n  }\n\n  private focusCancelButton(): void {\n    // Focus cancel button as safer default (prevents accidental confirmation)\n    // Use setTimeout to ensure DOM is ready\n    setTimeout(() => {\n      const cancelBtn = this.cancelButton()?.nativeElement;\n      if (cancelBtn) {\n        cancelBtn.focus();\n      }\n    }, 0);\n  }\n}\n","import {\n  booleanAttribute,\n  computed,\n  DestroyRef,\n  Directive,\n  ElementRef,\n  inject,\n  Injector,\n  input,\n  output,\n  PLATFORM_ID,\n  signal,\n  ViewContainerRef,\n} from '@angular/core';\nimport type {\n  InputSignal,\n  InputSignalWithTransform,\n  OutputEmitterRef,\n  Signal,\n  TemplateRef,\n  WritableSignal,\n} from '@angular/core';\nimport { isPlatformBrowser } from '@angular/common';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { Overlay, OverlayRef } from '@angular/cdk/overlay';\nimport { ComponentPortal } from '@angular/cdk/portal';\nimport { filter } from 'rxjs/operators';\nimport { ConfirmPanelComponent } from './confirm-panel.component';\nimport { generateConfirmTitleId, generateConfirmDescriptionId } from './confirm.utils';\nimport type { ConfirmColor, ConfirmTemplateContext, ConfirmPanelConfig } from './confirm.models';\n\n/**\n * Confirmation directive — intercepts clicks and displays a confirmation panel\n * before allowing the action to proceed.\n *\n * The directive acts as an output gate: it captures clicks, shows confirmation UI,\n * and emits `true` (confirmed) or `false` (cancelled) through its output.\n *\n * @tokens `--color-popover`, `--color-popover-foreground`, `--color-border`,\n *         `--color-foreground`, `--color-muted-foreground`, `--color-background`,\n *         `--shadow-lg`, `--radius-popover`\n *\n * @example Basic confirmation\n * ```html\n * <button comButton (comConfirm)=\"onDelete($event)\" confirmMessage=\"Delete this item?\">\n *   Delete\n * </button>\n * ```\n *\n * @example Destructive action with warn styling\n * ```html\n * <button comButton color=\"warn\"\n *   (comConfirm)=\"onPermanentDelete($event)\"\n *   confirmTitle=\"Permanent Deletion\"\n *   confirmMessage=\"This action cannot be undone.\"\n *   confirmLabel=\"Delete Forever\"\n *   confirmColor=\"warn\">\n *   Delete Permanently\n * </button>\n * ```\n *\n * @example Custom template\n * ```html\n * <button comButton (comConfirm)=\"onAction($event)\" [confirmTpl]=\"customTpl\">\n *   Action\n * </button>\n *\n * <ng-template #customTpl let-message let-confirm=\"confirm\" let-cancel=\"cancel\">\n *   <div class=\"flex flex-col gap-4\">\n *     <p>{{ message }}</p>\n *     <div class=\"flex justify-end gap-2\">\n *       <button comButton variant=\"ghost\" (click)=\"cancel()\">Cancel</button>\n *       <button comButton (click)=\"confirm()\">Confirm</button>\n *     </div>\n *   </div>\n * </ng-template>\n * ```\n */\n@Directive({\n  selector: '[comConfirm]',\n  exportAs: 'comConfirm',\n  host: {\n    '[attr.aria-haspopup]': '\"dialog\"',\n    '[attr.aria-expanded]': 'isOpen()',\n    '(click)': 'onTriggerClick($event)',\n  },\n})\nexport class ComConfirm {\n  private readonly overlay = inject(Overlay);\n  private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly viewContainerRef = inject(ViewContainerRef);\n  private readonly injector = inject(Injector);\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly platformId = inject(PLATFORM_ID);\n\n  private overlayRef: OverlayRef | null = null;\n  private panelInstance: ConfirmPanelComponent | null = null;\n  private readonly titleId = generateConfirmTitleId();\n  private readonly descriptionId = generateConfirmDescriptionId();\n\n  /** Whether the confirmation panel is currently open. */\n  protected readonly isOpen: WritableSignal<boolean> = signal(false);\n\n  // ─── Content Inputs ───\n\n  /** The confirmation message to display. */\n  readonly confirmMessage: InputSignal<string> = input<string>('Are you sure?');\n\n  /** Optional title for the confirmation dialog. */\n  readonly confirmTitle: InputSignal<string | undefined> = input<string | undefined>(undefined);\n\n  /** Label for the confirm button. */\n  readonly confirmLabel: InputSignal<string> = input<string>('Confirm');\n\n  /** Label for the cancel button. */\n  readonly cancelLabel: InputSignal<string> = input<string>('Cancel');\n\n  // ─── Styling Inputs ───\n\n  /** Color variant for the confirm button. */\n  readonly confirmColor: InputSignal<ConfirmColor> = input<ConfirmColor>('primary');\n\n  // ─── Behavior Inputs ───\n\n  /** When true, clicks pass through without showing confirmation. */\n  readonly confirmDisabled: InputSignalWithTransform<boolean, unknown> = input(false, {\n    transform: booleanAttribute,\n  });\n\n  /** Whether to show a backdrop behind the panel. */\n  readonly confirmBackdrop: InputSignalWithTransform<boolean, unknown> = input(false, {\n    transform: booleanAttribute,\n  });\n\n  /** Custom template for the panel content. */\n  readonly confirmTpl: InputSignal<TemplateRef<ConfirmTemplateContext> | undefined> =\n    input<TemplateRef<ConfirmTemplateContext> | undefined>(undefined);\n\n  // ─── Output ───\n\n  /**\n   * Emits `true` when confirmed, `false` when cancelled or navigated away.\n   * This is the main directive output — acts as an output gate for the action.\n   */\n  readonly comConfirm: OutputEmitterRef<boolean> = output<boolean>();\n\n  // ─── Computed ───\n\n  private readonly panelConfig: Signal<ConfirmPanelConfig> = computed(() => ({\n    message: this.confirmMessage(),\n    title: this.confirmTitle(),\n    confirmLabel: this.confirmLabel(),\n    cancelLabel: this.cancelLabel(),\n    confirmColor: this.confirmColor(),\n    hasBackdrop: this.confirmBackdrop(),\n    customTemplate: this.confirmTpl(),\n    titleId: this.titleId,\n    descriptionId: this.descriptionId,\n  }));\n\n  constructor() {\n    // Emit false and cleanup on destroy (navigation away)\n    this.destroyRef.onDestroy(() => {\n      if (this.isOpen()) {\n        this.comConfirm.emit(false);\n      }\n      this.disposeOverlay();\n    });\n  }\n\n  // ─── Public API ───\n\n  /** Programmatically open the confirmation dialog. */\n  open(): void {\n    if (this.isOpen() || this.confirmDisabled()) return;\n    this.createOverlay();\n    this.attachPanel();\n  }\n\n  /** Programmatically close the confirmation dialog (emits false). */\n  close(): void {\n    if (!this.isOpen()) return;\n    this.handleCancel();\n  }\n\n  // ─── Event Handlers ───\n\n  protected onTriggerClick(event: Event): void {\n    // If disabled, let the click pass through normally\n    if (this.confirmDisabled()) return;\n\n    // Intercept the click\n    event.preventDefault();\n    event.stopPropagation();\n\n    this.open();\n  }\n\n  // ─── Overlay Management ───\n\n  private createOverlay(): void {\n    if (this.overlayRef) return;\n    if (!isPlatformBrowser(this.platformId)) return;\n\n    // Use GlobalPositionStrategy for centered modal\n    const positionStrategy = this.overlay\n      .position()\n      .global()\n      .centerHorizontally()\n      .centerVertically();\n\n    this.overlayRef = this.overlay.create({\n      positionStrategy,\n      scrollStrategy: this.overlay.scrollStrategies.block(),\n      hasBackdrop: false, // We handle backdrop in the panel component\n      panelClass: 'com-confirm-overlay',\n      disposeOnNavigation: true,\n    });\n  }\n\n  private attachPanel(): void {\n    if (!this.overlayRef || this.overlayRef.hasAttached()) return;\n\n    const portal = new ComponentPortal(ConfirmPanelComponent, this.viewContainerRef, this.injector);\n    const componentRef = this.overlayRef.attach(portal);\n    this.panelInstance = componentRef.instance;\n\n    // Configure panel\n    this.panelInstance.config.set(this.panelConfig());\n    this.panelInstance.confirmFn.set(() => this.handleConfirm());\n    this.panelInstance.cancelFn.set(() => this.handleCancel());\n\n    // Subscribe to keyboard events (Escape to cancel)\n    this.overlayRef\n      .keydownEvents()\n      .pipe(\n        filter((event) => event.key === 'Escape'),\n        takeUntilDestroyed(this.destroyRef),\n      )\n      .subscribe((event) => {\n        event.preventDefault();\n        event.stopPropagation();\n        this.handleCancel();\n      });\n\n    // Subscribe to detachments (cleanup)\n    this.overlayRef\n      .detachments()\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(() => {\n        this.handleDetachment();\n      });\n\n    // Show panel after a microtask (allows initial styles to apply)\n    requestAnimationFrame(() => {\n      if (this.panelInstance) {\n        this.panelInstance.visible.set(true);\n      }\n    });\n\n    this.isOpen.set(true);\n  }\n\n  private handleConfirm(): void {\n    if (!this.isOpen()) return;\n\n    this.comConfirm.emit(true);\n    this.closePanel();\n  }\n\n  private handleCancel(): void {\n    if (!this.isOpen()) return;\n\n    this.comConfirm.emit(false);\n    this.closePanel();\n  }\n\n  private closePanel(): void {\n    if (!this.panelInstance) return;\n\n    // Trigger hide animation\n    this.panelInstance.visible.set(false);\n\n    // Wait for animation to complete before detaching\n    setTimeout(() => {\n      this.disposeOverlay();\n      this.returnFocusToTrigger();\n    }, 150); // Match animation duration\n  }\n\n  private handleDetachment(): void {\n    this.isOpen.set(false);\n    this.panelInstance?.destroyFocusTrap();\n    this.panelInstance = null;\n  }\n\n  private disposeOverlay(): void {\n    if (this.overlayRef) {\n      this.panelInstance?.destroyFocusTrap();\n      this.overlayRef.dispose();\n      this.overlayRef = null;\n    }\n    this.panelInstance = null;\n    this.isOpen.set(false);\n  }\n\n  private returnFocusToTrigger(): void {\n    this.elementRef.nativeElement.focus();\n  }\n}\n","// Public API for the confirm directive\n\n// Main directive\nexport { ComConfirm } from './confirm.directive';\n\n// Types and interfaces\nexport type { ConfirmTemplateContext, ConfirmColor } from './confirm.models';\n\n// Variants (for advanced customization)\nexport {\n  confirmPanelVariants,\n  confirmBackdropVariants,\n  confirmTitleVariants,\n  confirmMessageVariants,\n  confirmFooterVariants,\n} from './confirm.variants';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;AAEA;;;;AAIG;AACI,MAAM,uBAAuB,GAErB,GAAG,CAChB;IACE,OAAO;IACP,SAAS;IACT,MAAM;IACN,kBAAkB;IAClB,kBAAkB;CACnB,EACD;AACE,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,sBAAsB;AAC5B,YAAA,KAAK,EAAE,wBAAwB;AAChC,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,IAAI;AACd,KAAA;AACF,CAAA;AAGH;;;;AAIG;AACI,MAAM,oBAAoB,GAElB,GAAG,CAChB;IACE,mBAAmB;IACnB,OAAO;IACP,UAAU;IACV,SAAS;IACT,kBAAkB;IAClB,kBAAkB;IAClB,MAAM;IACN,MAAM;IACN,QAAQ;IACR,UAAU;IACV,OAAO;IACP,QAAQ;IACR,eAAe;IACf,YAAY;IACZ,yBAAyB;IACzB,KAAK;IACL,WAAW;IACX,iBAAiB;IACjB,cAAc;CACf,EACD;AACE,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,iCAAiC;AACvC,YAAA,KAAK,EAAE,oCAAoC;AAC5C,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,IAAI;AACd,KAAA;AACF,CAAA;AAGH;;;;AAIG;AACI,MAAM,oBAAoB,GAAiB,GAAG,CAAC;IACpD,SAAS;IACT,eAAe;IACf,iBAAiB;IACjB,cAAc;IACd,gBAAgB;AACjB,CAAA;AAED;;;;AAIG;AACI,MAAM,sBAAsB,GAAiB,GAAG,CAAC;IACtD,SAAS;IACT,uBAAuB;AACxB,CAAA;AAED;;AAEG;AACI,MAAM,qBAAqB,GAAiB,GAAG,CAAC;IACrD,MAAM;IACN,kBAAkB;IAClB,aAAa;IACb,gBAAgB;IAChB,cAAc;AACf,CAAA;;ACtGD,IAAI,gBAAgB,GAAG,CAAC;AAExB;;AAEG;SACa,sBAAsB,GAAA;AACpC,IAAA,OAAO,CAAA,cAAA,EAAiB,EAAE,gBAAgB,CAAA,CAAE;AAC9C;AAEA;;AAEG;SACa,4BAA4B,GAAA;AAC1C,IAAA,OAAO,CAAA,aAAA,EAAgB,EAAE,gBAAgB,CAAA,CAAE;AAC7C;;ACOA;;;;;;;;AAQG;MAqFU,qBAAqB,CAAA;AACf,IAAA,gBAAgB,GAAG,MAAM,CAAC,gBAAgB,CAAC;IACpD,SAAS,GAAqB,IAAI;;AAGzB,IAAA,YAAY,GAAG,SAAS,CAA0B,cAAc,wDAAC;;AAGjE,IAAA,YAAY,GAAG,SAAS,CAAgC,cAAc,wDAAC;;AAG/E,IAAA,MAAM,GAA8C,MAAM,CAAC,IAAI,kDAAC;;AAGhE,IAAA,OAAO,GAA4B,MAAM,CAAC,KAAK,mDAAC;;AAGhD,IAAA,OAAO,GAA4B,MAAM,CAAC,KAAK,mDAAC;;IAGhD,SAAS,GAA+B,MAAM,CAAC,MAAK,EAAE,CAAC,qDAAC;;IAGxD,QAAQ,GAA+B,MAAM,CAAC,MAAK,EAAE,CAAC,oDAAC;;AAG7C,IAAA,eAAe,GAAmC,QAAQ,CAAC,OAAO;QACnF,SAAS,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,OAAO,IAAI,EAAE;AACvC,QAAA,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,KAAK;AAC3B,QAAA,OAAO,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE;AAC/B,QAAA,MAAM,EAAE,MAAM,IAAI,CAAC,QAAQ,EAAE;AAC7B,QAAA,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE;AACvB,QAAA,UAAU,EAAE,CAAC,KAAc,KAAK,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC;AACxD,KAAA,CAAC,2DAAC;;IAGgB,eAAe,GAAmB,QAAQ,CAAC,MAC5D,YAAY,CAAC,uBAAuB,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,iBAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CACnE;;IAGkB,YAAY,GAAmB,QAAQ,CAAC,MACzD,YAAY,CAAC,oBAAoB,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,cAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAChE;;AAGkB,IAAA,YAAY,GAAmB,QAAQ,CAAC,MACzD,YAAY,CAAC,oBAAoB,EAAE,CAAC,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,cAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CACrC;;AAGkB,IAAA,cAAc,GAAmB,QAAQ,CAAC,MAC3D,YAAY,CAAC,sBAAsB,EAAE,CAAC,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,gBAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CACvC;;AAGkB,IAAA,aAAa,GAAmB,QAAQ,CAAC,MAC1D,YAAY,CAAC,qBAAqB,EAAE,CAAC,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,eAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CACtC;IAED,eAAe,GAAA;QACb,IAAI,CAAC,cAAc,EAAE;QACrB,IAAI,CAAC,iBAAiB,EAAE;IAC1B;;IAGU,SAAS,GAAA;AACjB,QAAA,IAAI,CAAC,SAAS,EAAE,EAAE;IACpB;;IAGU,QAAQ,GAAA;AAChB,QAAA,IAAI,CAAC,QAAQ,EAAE,EAAE;IACnB;;IAGA,gBAAgB,GAAA;AACd,QAAA,IAAI,CAAC,SAAS,EAAE,OAAO,EAAE;AACzB,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI;IACvB;IAEQ,cAAc,GAAA;QACpB,MAAM,OAAO,GAAG,IAAI,CAAC,YAAY,EAAE,EAAE,aAAa;QAClD,IAAI,OAAO,EAAE;YACX,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,OAAO,CAAC;AACtD,YAAA,IAAI,CAAC,SAAS,CAAC,4BAA4B,EAAE;QAC/C;IACF;IAEQ,iBAAiB,GAAA;;;QAGvB,UAAU,CAAC,MAAK;YACd,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,EAAE,EAAE,aAAa;YACpD,IAAI,SAAS,EAAE;gBACb,SAAS,CAAC,KAAK,EAAE;YACnB;QACF,CAAC,EAAE,CAAC,CAAC;IACP;uGAlGW,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAArB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,cAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,cAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,cAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,cAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAlFtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDT,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,mPAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAwBS,gBAAgB,oJAAE,SAAS,EAAA,QAAA,EAAA,iCAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,OAAA,EAAA,MAAA,EAAA,WAAA,EAAA,UAAA,EAAA,OAAA,CAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAG1B,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBApFjC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,mBAAmB,EAAA,QAAA,EACnB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDT,EAAA,OAAA,EAwBQ,CAAC,gBAAgB,EAAE,SAAS,CAAC,EAAA,eAAA,EACrB,uBAAuB,CAAC,MAAM,EAAA,MAAA,EAAA,CAAA,mPAAA,CAAA,EAAA;AAOoB,SAAA,CAAA,EAAA,cAAA,EAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,IAAA,EAAA,CAAA,cAAc,sEAGR,cAAc,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AC7FzF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CG;MAUU,UAAU,CAAA;AACJ,IAAA,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;AACzB,IAAA,UAAU,GAAG,MAAM,CAA0B,UAAU,CAAC;AACxD,IAAA,gBAAgB,GAAG,MAAM,CAAC,gBAAgB,CAAC;AAC3C,IAAA,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC;AAC3B,IAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;AAC/B,IAAA,UAAU,GAAG,MAAM,CAAC,WAAW,CAAC;IAEzC,UAAU,GAAsB,IAAI;IACpC,aAAa,GAAiC,IAAI;IACzC,OAAO,GAAG,sBAAsB,EAAE;IAClC,aAAa,GAAG,4BAA4B,EAAE;;AAG5C,IAAA,MAAM,GAA4B,MAAM,CAAC,KAAK,kDAAC;;;AAKzD,IAAA,cAAc,GAAwB,KAAK,CAAS,eAAe,0DAAC;;AAGpE,IAAA,YAAY,GAAoC,KAAK,CAAqB,SAAS,wDAAC;;AAGpF,IAAA,YAAY,GAAwB,KAAK,CAAS,SAAS,wDAAC;;AAG5D,IAAA,WAAW,GAAwB,KAAK,CAAS,QAAQ,uDAAC;;;AAK1D,IAAA,YAAY,GAA8B,KAAK,CAAe,SAAS,wDAAC;;;IAKxE,eAAe,GAA+C,KAAK,CAAC,KAAK,4DAChF,SAAS,EAAE,gBAAgB,EAAA,CAC3B;;IAGO,eAAe,GAA+C,KAAK,CAAC,KAAK,4DAChF,SAAS,EAAE,gBAAgB,EAAA,CAC3B;;AAGO,IAAA,UAAU,GACjB,KAAK,CAAkD,SAAS,sDAAC;;AAInE;;;AAGG;IACM,UAAU,GAA8B,MAAM,EAAW;;AAIjD,IAAA,WAAW,GAA+B,QAAQ,CAAC,OAAO;AACzE,QAAA,OAAO,EAAE,IAAI,CAAC,cAAc,EAAE;AAC9B,QAAA,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE;AAC1B,QAAA,YAAY,EAAE,IAAI,CAAC,YAAY,EAAE;AACjC,QAAA,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE;AAC/B,QAAA,YAAY,EAAE,IAAI,CAAC,YAAY,EAAE;AACjC,QAAA,WAAW,EAAE,IAAI,CAAC,eAAe,EAAE;AACnC,QAAA,cAAc,EAAE,IAAI,CAAC,UAAU,EAAE;QACjC,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,aAAa,EAAE,IAAI,CAAC,aAAa;AAClC,KAAA,CAAC,uDAAC;AAEH,IAAA,WAAA,GAAA;;AAEE,QAAA,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,MAAK;AAC7B,YAAA,IAAI,IAAI,CAAC,MAAM,EAAE,EAAE;AACjB,gBAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC;YAC7B;YACA,IAAI,CAAC,cAAc,EAAE;AACvB,QAAA,CAAC,CAAC;IACJ;;;IAKA,IAAI,GAAA;QACF,IAAI,IAAI,CAAC,MAAM,EAAE,IAAI,IAAI,CAAC,eAAe,EAAE;YAAE;QAC7C,IAAI,CAAC,aAAa,EAAE;QACpB,IAAI,CAAC,WAAW,EAAE;IACpB;;IAGA,KAAK,GAAA;AACH,QAAA,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;YAAE;QACpB,IAAI,CAAC,YAAY,EAAE;IACrB;;AAIU,IAAA,cAAc,CAAC,KAAY,EAAA;;QAEnC,IAAI,IAAI,CAAC,eAAe,EAAE;YAAE;;QAG5B,KAAK,CAAC,cAAc,EAAE;QACtB,KAAK,CAAC,eAAe,EAAE;QAEvB,IAAI,CAAC,IAAI,EAAE;IACb;;IAIQ,aAAa,GAAA;QACnB,IAAI,IAAI,CAAC,UAAU;YAAE;AACrB,QAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC;YAAE;;AAGzC,QAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC;AAC3B,aAAA,QAAQ;AACR,aAAA,MAAM;AACN,aAAA,kBAAkB;AAClB,aAAA,gBAAgB,EAAE;QAErB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC;YACpC,gBAAgB;YAChB,cAAc,EAAE,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,KAAK,EAAE;YACrD,WAAW,EAAE,KAAK;AAClB,YAAA,UAAU,EAAE,qBAAqB;AACjC,YAAA,mBAAmB,EAAE,IAAI;AAC1B,SAAA,CAAC;IACJ;IAEQ,WAAW,GAAA;QACjB,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,CAAC,WAAW,EAAE;YAAE;AAEvD,QAAA,MAAM,MAAM,GAAG,IAAI,eAAe,CAAC,qBAAqB,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,QAAQ,CAAC;QAC/F,MAAM,YAAY,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,MAAM,CAAC;AACnD,QAAA,IAAI,CAAC,aAAa,GAAG,YAAY,CAAC,QAAQ;;AAG1C,QAAA,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;AACjD,QAAA,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,IAAI,CAAC,aAAa,EAAE,CAAC;AAC5D,QAAA,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,GAAG,CAAC,MAAM,IAAI,CAAC,YAAY,EAAE,CAAC;;AAG1D,QAAA,IAAI,CAAC;AACF,aAAA,aAAa;aACb,IAAI,CACH,MAAM,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,GAAG,KAAK,QAAQ,CAAC,EACzC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC;AAEpC,aAAA,SAAS,CAAC,CAAC,KAAK,KAAI;YACnB,KAAK,CAAC,cAAc,EAAE;YACtB,KAAK,CAAC,eAAe,EAAE;YACvB,IAAI,CAAC,YAAY,EAAE;AACrB,QAAA,CAAC,CAAC;;AAGJ,QAAA,IAAI,CAAC;AACF,aAAA,WAAW;AACX,aAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC;aACxC,SAAS,CAAC,MAAK;YACd,IAAI,CAAC,gBAAgB,EAAE;AACzB,QAAA,CAAC,CAAC;;QAGJ,qBAAqB,CAAC,MAAK;AACzB,YAAA,IAAI,IAAI,CAAC,aAAa,EAAE;gBACtB,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC;YACtC;AACF,QAAA,CAAC,CAAC;AAEF,QAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC;IACvB;IAEQ,aAAa,GAAA;AACnB,QAAA,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;YAAE;AAEpB,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC;QAC1B,IAAI,CAAC,UAAU,EAAE;IACnB;IAEQ,YAAY,GAAA;AAClB,QAAA,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;YAAE;AAEpB,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC;QAC3B,IAAI,CAAC,UAAU,EAAE;IACnB;IAEQ,UAAU,GAAA;QAChB,IAAI,CAAC,IAAI,CAAC,aAAa;YAAE;;QAGzB,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC;;QAGrC,UAAU,CAAC,MAAK;YACd,IAAI,CAAC,cAAc,EAAE;YACrB,IAAI,CAAC,oBAAoB,EAAE;AAC7B,QAAA,CAAC,EAAE,GAAG,CAAC,CAAC;IACV;IAEQ,gBAAgB,GAAA;AACtB,QAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC;AACtB,QAAA,IAAI,CAAC,aAAa,EAAE,gBAAgB,EAAE;AACtC,QAAA,IAAI,CAAC,aAAa,GAAG,IAAI;IAC3B;IAEQ,cAAc,GAAA;AACpB,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;AACnB,YAAA,IAAI,CAAC,aAAa,EAAE,gBAAgB,EAAE;AACtC,YAAA,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE;AACzB,YAAA,IAAI,CAAC,UAAU,GAAG,IAAI;QACxB;AACA,QAAA,IAAI,CAAC,aAAa,GAAG,IAAI;AACzB,QAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC;IACxB;IAEQ,oBAAoB,GAAA;AAC1B,QAAA,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,EAAE;IACvC;uGA7NW,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAV,UAAU,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,cAAA,EAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,eAAA,EAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,eAAA,EAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,OAAA,EAAA,wBAAA,EAAA,EAAA,UAAA,EAAA,EAAA,oBAAA,EAAA,YAAA,EAAA,oBAAA,EAAA,UAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAV,UAAU,EAAA,UAAA,EAAA,CAAA;kBATtB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,cAAc;AACxB,oBAAA,QAAQ,EAAE,YAAY;AACtB,oBAAA,IAAI,EAAE;AACJ,wBAAA,sBAAsB,EAAE,UAAU;AAClC,wBAAA,sBAAsB,EAAE,UAAU;AAClC,wBAAA,SAAS,EAAE,wBAAwB;AACpC,qBAAA;AACF,iBAAA;;;ACtFD;AAEA;;ACFA;;AAEG;;;;"}