import * as i0 from '@angular/core';
import { Component, ChangeDetectionStrategy, InjectionToken, isDevMode, ChangeDetectorRef, forwardRef, Inject, Input, EventEmitter, Output, ElementRef, Directive, HostListener, NgModule } from '@angular/core';
import * as i1 from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button';
import * as i2 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import { NgFor, NgClass, NgIf } from '@angular/common';
import { SubscriptionHandler, isTeardownLogic } from '@rxap/rxjs';
import { isPromiseLike } from '@rxap/utilities';
import { Observable, Subscription } from 'rxjs';
import { ErrorStateMatcher } from '@angular/material/core';
import { RouterOutlet } from '@angular/router';
import * as i4 from '@angular/material/snack-bar';
import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
import * as i2$1 from '@angular/cdk/clipboard';
import { ClipboardModule } from '@angular/cdk/clipboard';
import * as i1$1 from '@angular/cdk/overlay';
import { Overlay } from '@angular/cdk/overlay';
import { ComponentPortal } from '@angular/cdk/portal';
import { take, tap } from 'rxjs/operators';

class NavigateBackButtonComponent {
    navigateBack() {
        window.history.back();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NavigateBackButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: NavigateBackButtonComponent, isStandalone: true, selector: "rxap-navigate-back-button", host: { classAttribute: "rxap-navigate-back-button" }, ngImport: i0, template: "<div class=\"rxap-container flex flex-row justify-start items-center gap-8\">\n  <div class=\"grow-0\">\n    <button type=\"button\" (click)=\"navigateBack()\" mat-stroked-button>\n      <mat-icon>navigate_before</mat-icon>\n    </button>\n  </div>\n  <ng-content></ng-content>\n</div>\n", styles: [".rxap-container ::ng-deep h1,.rxap-container ::ng-deep h2,.rxap-container ::ng-deep h3,.rxap-container ::ng-deep h4,.rxap-container ::ng-deep h5,.rxap-container ::ng-deep h6{margin:0}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NavigateBackButtonComponent, decorators: [{
            type: Component,
            args: [{ selector: 'rxap-navigate-back-button', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'rxap-navigate-back-button' }, imports: [MatButtonModule, MatIconModule], template: "<div class=\"rxap-container flex flex-row justify-start items-center gap-8\">\n  <div class=\"grow-0\">\n    <button type=\"button\" (click)=\"navigateBack()\" mat-stroked-button>\n      <mat-icon>navigate_before</mat-icon>\n    </button>\n  </div>\n  <ng-content></ng-content>\n</div>\n", styles: [".rxap-container ::ng-deep h1,.rxap-container ::ng-deep h2,.rxap-container ::ng-deep h3,.rxap-container ::ng-deep h4,.rxap-container ::ng-deep h5,.rxap-container ::ng-deep h6{margin:0}\n"] }]
        }] });

const JSON_VIEW_IGNORED_PROPERTIES = new InjectionToken('rxap/form-system/inspector/ignored-properties', {
    providedIn: 'root',
    factory: () => [
        '_subscriptions',
        'subscriptions',
        'injector',
        /\$$/,
    ],
});
const JSON_VIEW_IGNORED_TYPES = new InjectionToken('rxap/form-system/inspector/ignored-types', {
    providedIn: 'root',
    factory: () => [
        Observable,
        Promise,
        Subscription,
        SubscriptionHandler,
        ErrorStateMatcher,
    ],
});

class JsonViewerComponent {
    constructor(ignoredProperties, ignoredTypes, cdr) {
        this.cdr = cdr;
        // TODO : add object input. The json input will not be cleaned
        this.json = {};
        this.expanded = false;
        this.ignoredProperties = [];
        this.ignoredTypes = [];
        this.subscriptions = new Subscription();
        this.segments = [];
        function flat(acc, cur) {
            if (Array.isArray(cur)) {
                acc.push(...cur.reduce(flat, []));
            }
            else {
                acc.push(cur);
            }
            return acc;
        }
        this.ignoredProperties = ignoredProperties.reduce(flat, []);
        this.ignoredTypes = ignoredTypes.reduce(flat, []);
    }
    ngOnInit() {
        this.setInspectValue(this.json);
    }
    ngOnChanges(changes) {
        const jsonChange = changes['json'];
        if (jsonChange) {
            if (isDevMode()) {
                console.debug('json change');
            }
            this.setInspectValue(jsonChange.currentValue);
        }
    }
    cleanObject(obj, stack = []) {
        if (typeof obj === 'string') {
            return obj;
        }
        if (stack.some(item => item === obj)) {
            return '__circular__';
        }
        stack = stack.slice();
        stack.unshift(obj);
        return Object
            .entries(obj)
            .filter(([key, value]) => !isPromiseLike(value))
            .filter(([key, value]) => !isTeardownLogic(value))
            .filter(([key, value]) => this.ignoredProperties.every(ip => typeof ip === 'string' ?
            key !== ip :
            !key.match(ip)))
            .filter(([key, value]) => [...this.ignoredTypes].every(type => !(value instanceof type)))
            .map(([key, value]) => {
            if (value && typeof value === 'object') {
                if (Array.isArray(value)) {
                    return [key, value.map(item => this.cleanObject(item, stack))];
                }
                if (typeof value === 'object') {
                    return [key, this.cleanObject(value, stack)];
                }
            }
            return [key, value];
        })
            .sort((a, b) => a[0].localeCompare(b[0]))
            .reduce((controlView, [key, value]) => ({
            ...controlView,
            [key]: value,
        }), {});
    }
    setInspectValue(json) {
        if (typeof json !== 'object' || json === null || json === undefined) {
            console.warn('The inspection value is not an object!');
        }
        else {
            if (typeof json['toJSON'] === 'function') {
                json = json.toJSON();
            }
            this.inspectValue = this.cleanObject(structuredClone(json));
            this.buildSegments(this.inspectValue);
            this.cdr.markForCheck();
        }
    }
    buildSegments(inspectValue) {
        this.segments = [];
        if (typeof inspectValue === 'object') {
            Object.keys(inspectValue).forEach(key => {
                this.segments.push(this.parseKeyValue(key, inspectValue[key]));
            });
        }
        else {
            this.segments.push(this.parseKeyValue(`(${typeof inspectValue})`, inspectValue));
        }
    }
    isExpandable(segment) {
        return segment.type === 'object' || segment.type === 'array';
    }
    toggle(segment) {
        if (this.isExpandable(segment)) {
            segment.expanded = !segment.expanded;
        }
    }
    parseKeyValue(key, value) {
        const segment = {
            key: key,
            value: value,
            type: undefined,
            description: '' + value,
            expanded: this.expanded,
        };
        switch (typeof segment.value) {
            case 'number': {
                segment.type = 'number';
                break;
            }
            case 'boolean': {
                segment.type = 'boolean';
                break;
            }
            case 'function': {
                segment.type = 'function';
                break;
            }
            case 'string': {
                segment.type = 'string';
                segment.description = '"' + segment.value + '"';
                break;
            }
            case 'undefined': {
                segment.type = 'undefined';
                segment.description = 'undefined';
                break;
            }
            case 'object': {
                // yea, null is object
                if (segment.value === null) {
                    segment.type = 'null';
                    segment.description = 'null';
                }
                else if (Array.isArray(segment.value)) {
                    segment.type = 'array';
                    segment.description = 'Array[' + segment.value.length + '] ' + JSON.stringify(segment.value);
                }
                else if (segment.value instanceof Date) {
                    segment.type = 'date';
                }
                else {
                    segment.type = 'object';
                    segment.description = 'Object ' + JSON.stringify(segment.value);
                }
                break;
            }
        }
        return segment;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: JsonViewerComponent, deps: [{ token: JSON_VIEW_IGNORED_PROPERTIES }, { token: JSON_VIEW_IGNORED_TYPES }, { token: ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: JsonViewerComponent, isStandalone: true, selector: "rxap-json-viewer", inputs: { json: "json", expanded: "expanded" }, host: { classAttribute: "rxap-json-viewer" }, usesOnChanges: true, ngImport: i0, template: "<section class=\"rxap-container\">\n  <section\n    *ngFor=\"let segment of segments\"\n    [ngClass]=\"['segment', 'segment-type-' + segment.type]\">\n    <section\n      (click)=\"toggle(segment)\"\n      [ngClass]=\"{\n        'segment-main': true,\n        'expandable': isExpandable(segment),\n        'expanded': segment.expanded\n      }\">\n      <div *ngIf=\"isExpandable(segment)\" class=\"toggler\"></div>\n      <span class=\"segment-key text-primary\">{{ segment.key }}</span>\n      <span class=\"segment-separator\">: </span>\n      <span *ngIf=\"!segment.expanded || !isExpandable(segment)\"\n            class=\"segment-value text-white dark:text-black\">{{ segment.description }}</span>\n    </section>\n    <section *ngIf=\"segment.expanded && isExpandable(segment)\" class=\"children\">\n      <rxap-json-viewer [expanded]=\"expanded\" [json]=\"segment.value\"></rxap-json-viewer>\n    </section>\n  </section>\n</section>\n", styles: ["@charset \"UTF-8\";.rxap-container{width:100%;height:100%;overflow:hidden;position:relative;font-family:monospace;font-size:16px}.rxap-container .segment .segment-main .toggler{font-size:8px;line-height:12px}.rxap-container .segment{padding:2px;margin:1px 1px 1px 12px}.rxap-container .segment .segment-main{word-wrap:break-word}.rxap-container .segment .segment-main .toggler{position:absolute;margin-left:-14px;margin-top:3px;vertical-align:middle}.rxap-container .segment .segment-main .toggler:after{display:inline-block;content:\"\\25ba\";transition:transform .1s ease-in}.rxap-container .segment .children{margin-left:12px}.rxap-container .segment-type-object>.segment-main,.rxap-container .segment-type-array>.segment-main{white-space:nowrap}.rxap-container .expanded>.toggler:after{transform:rotate(90deg)}.rxap-container .expandable,.rxap-container .expandable>.toggler{cursor:pointer}.rxap-container .segment .segment-main .toggler{color:#787878}.rxap-container .segment .segment-main .segment-separator{color:#999}.rxap-container .segment-type-string>.segment-main>.segment-value{color:var(--json-string-color, #FF6B6B)}.rxap-container .segment-type-number>.segment-main>.segment-value{color:var(--json-number-color, #009688)}.rxap-container .segment-type-boolean>.segment-main>.segment-value{color:var(--json-boolean-color, #b938a4)}.rxap-container .segment-type-date>.segment-main>.segment-value{color:var(--json-date-color, #05668D)}.rxap-container .segment-type-array>.segment-main>.segment-value{color:var(--json-array-color, #999)}.rxap-container .segment-type-object>.segment-main>.segment-value{color:var(--json-object-color, #999)}.rxap-container .segment-type-function>.segment-main>.segment-value{color:var(--json-function-color, #999)}.rxap-container .segment-type-null>.segment-main>.segment-value{color:var(--json-null-color, #fff)}.rxap-container .segment-type-undefined>.segment-main>.segment-value{color:var(--json-undefined-color, #fff)}.rxap-container .segment-type-null>.segment-main>.segment-value{background-color:var(--warn-500, darkred)}.rxap-container .segment-type-undefined>.segment-main>.segment-key{color:#999}.rxap-container .segment-type-undefined>.segment-main>.segment-value{background-color:#999}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => JsonViewerComponent), selector: "rxap-json-viewer", inputs: ["json", "expanded"] }, { kind: "directive", type: i0.forwardRef(() => NgFor), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: JsonViewerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'rxap-json-viewer', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'rxap-json-viewer' }, imports: [NgFor, NgClass, NgIf, forwardRef(() => JsonViewerComponent)], template: "<section class=\"rxap-container\">\n  <section\n    *ngFor=\"let segment of segments\"\n    [ngClass]=\"['segment', 'segment-type-' + segment.type]\">\n    <section\n      (click)=\"toggle(segment)\"\n      [ngClass]=\"{\n        'segment-main': true,\n        'expandable': isExpandable(segment),\n        'expanded': segment.expanded\n      }\">\n      <div *ngIf=\"isExpandable(segment)\" class=\"toggler\"></div>\n      <span class=\"segment-key text-primary\">{{ segment.key }}</span>\n      <span class=\"segment-separator\">: </span>\n      <span *ngIf=\"!segment.expanded || !isExpandable(segment)\"\n            class=\"segment-value text-white dark:text-black\">{{ segment.description }}</span>\n    </section>\n    <section *ngIf=\"segment.expanded && isExpandable(segment)\" class=\"children\">\n      <rxap-json-viewer [expanded]=\"expanded\" [json]=\"segment.value\"></rxap-json-viewer>\n    </section>\n  </section>\n</section>\n", styles: ["@charset \"UTF-8\";.rxap-container{width:100%;height:100%;overflow:hidden;position:relative;font-family:monospace;font-size:16px}.rxap-container .segment .segment-main .toggler{font-size:8px;line-height:12px}.rxap-container .segment{padding:2px;margin:1px 1px 1px 12px}.rxap-container .segment .segment-main{word-wrap:break-word}.rxap-container .segment .segment-main .toggler{position:absolute;margin-left:-14px;margin-top:3px;vertical-align:middle}.rxap-container .segment .segment-main .toggler:after{display:inline-block;content:\"\\25ba\";transition:transform .1s ease-in}.rxap-container .segment .children{margin-left:12px}.rxap-container .segment-type-object>.segment-main,.rxap-container .segment-type-array>.segment-main{white-space:nowrap}.rxap-container .expanded>.toggler:after{transform:rotate(90deg)}.rxap-container .expandable,.rxap-container .expandable>.toggler{cursor:pointer}.rxap-container .segment .segment-main .toggler{color:#787878}.rxap-container .segment .segment-main .segment-separator{color:#999}.rxap-container .segment-type-string>.segment-main>.segment-value{color:var(--json-string-color, #FF6B6B)}.rxap-container .segment-type-number>.segment-main>.segment-value{color:var(--json-number-color, #009688)}.rxap-container .segment-type-boolean>.segment-main>.segment-value{color:var(--json-boolean-color, #b938a4)}.rxap-container .segment-type-date>.segment-main>.segment-value{color:var(--json-date-color, #05668D)}.rxap-container .segment-type-array>.segment-main>.segment-value{color:var(--json-array-color, #999)}.rxap-container .segment-type-object>.segment-main>.segment-value{color:var(--json-object-color, #999)}.rxap-container .segment-type-function>.segment-main>.segment-value{color:var(--json-function-color, #999)}.rxap-container .segment-type-null>.segment-main>.segment-value{color:var(--json-null-color, #fff)}.rxap-container .segment-type-undefined>.segment-main>.segment-value{color:var(--json-undefined-color, #fff)}.rxap-container .segment-type-null>.segment-main>.segment-value{background-color:var(--warn-500, darkred)}.rxap-container .segment-type-undefined>.segment-main>.segment-key{color:#999}.rxap-container .segment-type-undefined>.segment-main>.segment-value{background-color:#999}\n"] }]
        }], ctorParameters: () => [{ type: Array, decorators: [{
                    type: Inject,
                    args: [JSON_VIEW_IGNORED_PROPERTIES]
                }] }, { type: Array, decorators: [{
                    type: Inject,
                    args: [JSON_VIEW_IGNORED_TYPES]
                }] }, { type: i0.ChangeDetectorRef, decorators: [{
                    type: Inject,
                    args: [ChangeDetectorRef]
                }] }], propDecorators: { json: [{
                type: Input
            }], expanded: [{
                type: Input
            }] } });

class EmptyRouterOutletComponent {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: EmptyRouterOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: EmptyRouterOutletComponent, isStandalone: true, selector: "rxap-empty-router-outlet", ngImport: i0, template: "<router-outlet></router-outlet>\n", dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: EmptyRouterOutletComponent, decorators: [{
            type: Component,
            args: [{ selector: 'rxap-empty-router-outlet', changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterOutlet], template: "<router-outlet></router-outlet>\n" }]
        }] });

class CopyToClipboardButtonComponent {
    constructor(snackbar) {
        this.snackbar = snackbar;
        this.value = '';
    }
    copied() {
        this.snackbar.open('Erfolgreich in die Zwischenablage kopiert.', 'OK', {
            duration: 2500,
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: CopyToClipboardButtonComponent, deps: [{ token: MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: CopyToClipboardButtonComponent, isStandalone: true, selector: "rxap-copy-to-clipboard-button", inputs: { value: "value" }, ngImport: i0, template: "<button\n  (cdkCopyToClipboardCopied)=\"copied()\"\n  (click)=\"$event.stopPropagation()\"\n  [cdkCopyToClipboard]=\"value\"\n  mat-icon-button\n  type=\"button\"\n>\n  <mat-icon>content_copy</mat-icon>\n</button>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: ClipboardModule }, { kind: "directive", type: i2$1.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSnackBarModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: CopyToClipboardButtonComponent, decorators: [{
            type: Component,
            args: [{ selector: 'rxap-copy-to-clipboard-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                        MatButtonModule,
                        ClipboardModule,
                        MatIconModule,
                        MatSnackBarModule,
                    ], template: "<button\n  (cdkCopyToClipboardCopied)=\"copied()\"\n  (click)=\"$event.stopPropagation()\"\n  [cdkCopyToClipboard]=\"value\"\n  mat-icon-button\n  type=\"button\"\n>\n  <mat-icon>content_copy</mat-icon>\n</button>\n" }]
        }], ctorParameters: () => [{ type: i4.MatSnackBar, decorators: [{
                    type: Inject,
                    args: [MatSnackBar]
                }] }], propDecorators: { value: [{
                type: Input
            }] } });

class CopyToClipboardComponent {
    constructor() {
        this.active = true;
        this.disabled = false;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: CopyToClipboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: CopyToClipboardComponent, isStandalone: true, selector: "rxap-copy-to-clipboard", inputs: { active: "active", disabled: "disabled", value: "value" }, ngImport: i0, template: "<div class=\"flex flex-row gap-0.5 items-center\">\n  <rxap-copy-to-clipboard-button *ngIf=\"active\" [value]=\"value\" class=\"w-[40px]\"></rxap-copy-to-clipboard-button>\n  <span #ref class=\"content grow-0\"><ng-content></ng-content></span>\n  <span *ngIf=\"!ref.innerHTML.trim()\" class=\"content grow-0\">{{ value }}</span>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CopyToClipboardButtonComponent, selector: "rxap-copy-to-clipboard-button", inputs: ["value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: CopyToClipboardComponent, decorators: [{
            type: Component,
            args: [{ selector: 'rxap-copy-to-clipboard', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, CopyToClipboardButtonComponent], template: "<div class=\"flex flex-row gap-0.5 items-center\">\n  <rxap-copy-to-clipboard-button *ngIf=\"active\" [value]=\"value\" class=\"w-[40px]\"></rxap-copy-to-clipboard-button>\n  <span #ref class=\"content grow-0\"><ng-content></ng-content></span>\n  <span *ngIf=\"!ref.innerHTML.trim()\" class=\"content grow-0\">{{ value }}</span>\n</div>\n" }]
        }], propDecorators: { active: [{
                type: Input
            }], disabled: [{
                type: Input
            }], value: [{
                type: Input,
                args: [{ required: true }]
            }] } });

class ConfirmComponent {
    constructor() {
        this.confirmed = new EventEmitter();
        this.unconfirmed = new EventEmitter();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: ConfirmComponent, isStandalone: true, selector: "rxap-confirm", outputs: { confirmed: "confirmed", unconfirmed: "unconfirmed" }, ngImport: i0, template: "<div class=\"rxap-container shadow-lg hover:shadow-xl flex flex-row gap-1\">\n  <button (click)=\"confirmed.emit()\" class=\"accept\" mat-icon-button type=\"button\">\n    <mat-icon>done</mat-icon>\n  </button>\n  <button (click)=\"unconfirmed.emit()\" class=\"decline\" mat-icon-button type=\"button\">\n    <mat-icon>clear</mat-icon>\n  </button>\n</div>\n", styles: [".rxap-container{border-radius:8px;padding:4px;background-color:var(--background-color, white)}.rxap-container .accept{color:var(--accept-color, rgb(115, 190, 105))}.rxap-container .decline{color:var(--decline-color, rgb(204, 73, 51))}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ConfirmComponent, decorators: [{
            type: Component,
            args: [{ selector: 'rxap-confirm', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatButtonModule, MatIconModule], template: "<div class=\"rxap-container shadow-lg hover:shadow-xl flex flex-row gap-1\">\n  <button (click)=\"confirmed.emit()\" class=\"accept\" mat-icon-button type=\"button\">\n    <mat-icon>done</mat-icon>\n  </button>\n  <button (click)=\"unconfirmed.emit()\" class=\"decline\" mat-icon-button type=\"button\">\n    <mat-icon>clear</mat-icon>\n  </button>\n</div>\n", styles: [".rxap-container{border-radius:8px;padding:4px;background-color:var(--background-color, white)}.rxap-container .accept{color:var(--accept-color, rgb(115, 190, 105))}.rxap-container .decline{color:var(--decline-color, rgb(204, 73, 51))}\n"] }]
        }], propDecorators: { confirmed: [{
                type: Output
            }], unconfirmed: [{
                type: Output
            }] } });

class ConfirmDirective {
    // use a set input to allow auto import detection if the eventValue
    // is not set
    set eventValue(value) {
        if (value !== '') {
            this._eventValue = value;
        }
    }
    constructor(overlay, elementRef) {
        this.overlay = overlay;
        this.elementRef = elementRef;
        this.confirmed = new EventEmitter();
        this.unconfirmed = new EventEmitter();
        this.subscription = null;
        this.isOverlyOpen = false;
        this.positionStrategy = this.overlay
            .position()
            .flexibleConnectedTo(this.elementRef.nativeElement)
            .withPositions([
            {
                originX: 'start',
                originY: 'bottom',
                overlayX: 'start',
                overlayY: 'top',
            },
        ])
            .withDefaultOffsetY(10);
    }
    onClick($event) {
        this.openConfirmOverly();
    }
    ngOnDestroy() {
        this.subscription?.unsubscribe();
        this.overlayRef?.dispose();
    }
    openConfirmOverly() {
        if (this.isOverlyOpen) {
            return;
        }
        this.isOverlyOpen = true;
        this.overlayRef = this.overlay.create({
            scrollStrategy: this.overlay.scrollStrategies.close(),
            positionStrategy: this.positionStrategy,
        });
        const componentPortal = new ComponentPortal(ConfirmComponent);
        const componentRef = this.overlayRef.attach(componentPortal);
        this.subscription?.unsubscribe();
        this.subscription = new Subscription();
        this.subscription.add(componentRef.instance.confirmed
            .pipe(take(1), tap(() => this.onConfirmed(this._eventValue)), tap(() => this.overlayRef?.dispose()), tap(() => this.isOverlyOpen = false), tap(() => (this.subscription = null)), tap(() => this.subscription?.unsubscribe()))
            .subscribe());
        this.subscription.add(componentRef.instance.unconfirmed
            .pipe(take(1), tap(() => this.onUnconfirmed(this._eventValue)), tap(() => this.overlayRef?.dispose()), tap(() => this.isOverlyOpen = false), tap(() => (this.subscription = null)), tap(() => this.subscription?.unsubscribe()))
            .subscribe());
        this.subscription.add(this.overlayRef
            .detachments()
            .pipe(take(1), tap(() => this.isOverlyOpen = false), tap(() => (this.subscription = null)), tap(() => this.subscription?.unsubscribe()))
            .subscribe());
    }
    onConfirmed(eventValue) {
        this.confirmed.emit(eventValue);
    }
    onUnconfirmed(eventValue) {
        this.unconfirmed.emit(eventValue);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ConfirmDirective, deps: [{ token: Overlay }, { token: ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: ConfirmDirective, isStandalone: true, selector: "[rxapConfirm]", inputs: { eventValue: ["rxapConfirm", "eventValue"] }, outputs: { confirmed: "confirmed", unconfirmed: "unconfirmed" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ConfirmDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[rxapConfirm]',
                    standalone: true,
                }]
        }], ctorParameters: () => [{ type: i1$1.Overlay, decorators: [{
                    type: Inject,
                    args: [Overlay]
                }] }, { type: i0.ElementRef, decorators: [{
                    type: Inject,
                    args: [ElementRef]
                }] }], propDecorators: { eventValue: [{
                type: Input,
                args: ['rxapConfirm']
            }], confirmed: [{
                type: Output
            }], unconfirmed: [{
                type: Output
            }], onClick: [{
                type: HostListener,
                args: ['click', ['$event']]
            }] } });

class ConfirmModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ConfirmModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.1", ngImport: i0, type: ConfirmModule, imports: [ConfirmDirective, ConfirmComponent], exports: [ConfirmDirective] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ConfirmModule, imports: [ConfirmComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ConfirmModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [ConfirmDirective, ConfirmComponent],
                    exports: [ConfirmDirective],
                }]
        }] });

// region navigate-back-button
// endregion

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

export { ConfirmComponent, ConfirmDirective, ConfirmModule, CopyToClipboardButtonComponent, CopyToClipboardComponent, EmptyRouterOutletComponent, JSON_VIEW_IGNORED_PROPERTIES, JSON_VIEW_IGNORED_TYPES, JsonViewerComponent, NavigateBackButtonComponent };
//# sourceMappingURL=rxap-components.mjs.map
