import * as i0 from '@angular/core';
import { Component, Output, EventEmitter, Input, NgModule } from '@angular/core';
import * as i1$2 from '@aztrix/components/overlay';
import * as i1$1 from '@aztrix/sdk';
import { ReplaySubject, BehaviorSubject, map, first } from 'rxjs';
import * as i2 from '@angular/forms';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import * as i1 from '@aztrix/components/button';
import { ButtonModule } from '@aztrix/components/button';
import * as i3 from '@angular/material/input';
import { MatInputModule } from '@angular/material/input';
import * as i4 from '@angular/material/form-field';
import * as i5 from '@aztrix/helpers';
import { HelperPipesModule } from '@aztrix/helpers';
import * as i3$2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i4$2 from '@angular/material/progress-bar';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import * as i3$1 from '@aztrix/icons';
import { IconsModule } from '@aztrix/icons';
import { mergeMap } from 'rxjs/operators';
import * as i4$1 from '@aztrix/components/copy-text';
import { CopyTextModule } from '@aztrix/components/copy-text';

class CreateApiKeyModalComponent {
    constructor() {
        this.name = new FormControl('');
    }
    addKey() {
        if (this.name.value !== '') {
            this.addName(this.name.value || undefined);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CreateApiKeyModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CreateApiKeyModalComponent, selector: "ax-create-api-key-modal", ngImport: i0, template: "<mat-form-field class=\"c-input\" width=\"100%\" appearance=\"outline\">\n  <mat-label>{{ 'developer.apiKey.modal.add.label' | translate }}</mat-label>\n  <input matInput axAutofocus [autofocus]=\"true\" [formControl]=\"name\" type=\"text\" />\n  <mat-hint align=\"end\">{{ 'developer.apiKey.modal.add.hint' | translate }}</mat-hint>\n</mat-form-field>\n\n<div class=\"h-button-wrapper\">\n  <button axButton color=\"primary\" filled (click)=\"addKey()\">\n    {{ 'label.create' | translate }}\n  </button>\n</div>\n", styles: [":host{display:block;padding:1rem}\n"], dependencies: [{ kind: "directive", type: i1.ButtonDirective, selector: "[axButton]", inputs: ["color", "labelHideMobile", "smallButton", "bigButton", "fullWidth", "filled", "outline", "icon-button", "hoverLabel", "hover", "lowercase", "disabled"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CreateApiKeyModalComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-create-api-key-modal', template: "<mat-form-field class=\"c-input\" width=\"100%\" appearance=\"outline\">\n  <mat-label>{{ 'developer.apiKey.modal.add.label' | translate }}</mat-label>\n  <input matInput axAutofocus [autofocus]=\"true\" [formControl]=\"name\" type=\"text\" />\n  <mat-hint align=\"end\">{{ 'developer.apiKey.modal.add.hint' | translate }}</mat-hint>\n</mat-form-field>\n\n<div class=\"h-button-wrapper\">\n  <button axButton color=\"primary\" filled (click)=\"addKey()\">\n    {{ 'label.create' | translate }}\n  </button>\n</div>\n", styles: [":host{display:block;padding:1rem}\n"] }]
        }] });

class ExpireKeyModalComponent {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ExpireKeyModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ExpireKeyModalComponent, selector: "ax-expire-key-modal", outputs: { expire: "expire" }, ngImport: i0, template: "<p>{{ 'developer.apiKey.modal.expire.text' | translate }}</p>\n<div class=\"h-button-wrapper\">\n  <button axButton (click)=\"expire()\" color=\"danger\">\n    {{ 'developer.apiKey.button.expire' | translate }}\n  </button>\n</div>\n", styles: [":host{display:block;padding:1rem}p{margin:0}\n"], dependencies: [{ kind: "directive", type: i1.ButtonDirective, selector: "[axButton]", inputs: ["color", "labelHideMobile", "smallButton", "bigButton", "fullWidth", "filled", "outline", "icon-button", "hoverLabel", "hover", "lowercase", "disabled"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ExpireKeyModalComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-expire-key-modal', template: "<p>{{ 'developer.apiKey.modal.expire.text' | translate }}</p>\n<div class=\"h-button-wrapper\">\n  <button axButton (click)=\"expire()\" color=\"danger\">\n    {{ 'developer.apiKey.button.expire' | translate }}\n  </button>\n</div>\n", styles: [":host{display:block;padding:1rem}p{margin:0}\n"] }]
        }], propDecorators: { expire: [{
                type: Output
            }] } });

class TokenListCellComponent {
    constructor(_sessions) {
        this._sessions = _sessions;
        this.didClickButton = new EventEmitter();
        this.session$ = new ReplaySubject(1);
        this.authToken$ = this.session$.pipe(mergeMap((session) => this._sessions.authTokenForSession(session.sessionId)));
    }
    ngOnChanges(changes) {
        if (changes.session && this.session) {
            this.session$.next(this.session);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TokenListCellComponent, deps: [{ token: i1$1.SessionsService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TokenListCellComponent, selector: "ax-token-list-cell", inputs: { session: "session" }, outputs: { didClickButton: "didClickButton" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"key-wrapper\">\n  <div class=\"key-name\">\n    {{ session.sessionInfo?.name }}\n  </div>\n  <div class=\"key-date\">\n    {{ session.timestamp | formatDateTimeFromNow }}\n  </div>\n  <div class=\"key-hash\">\n    <ax-copy-text [value]=\"session.sessionId\" [secret]=\"true\"></ax-copy-text>\n  </div>\n  <button class=\"expire\" axButton icon-button (click)=\"didClickButton.emit()\">\n    <ax-icon name=\"delete-outline\" class=\"icon\"></ax-icon>\n  </button>\n</div>\n", styles: [".key-wrapper{display:grid;grid-template-columns:1fr 1fr max-content;grid-template-areas:\"name date expire\" \"hash hash expire\";align-items:center;width:100%;padding:.75rem 1rem;grid-gap:.5rem;background-color:#fff;border-bottom:1px solid #d7dde4}.key-name{grid-area:name;font-weight:700}.key-hash{grid-area:hash}.key-copy{grid-area:copy}.expire{grid-area:expire;grid-row-start:1;grid-row-end:3}.key-date{grid-area:date;justify-self:flex-end;color:#7a8692;font-weight:400}\n"], dependencies: [{ kind: "directive", type: i1.ButtonDirective, selector: "[axButton]", inputs: ["color", "labelHideMobile", "smallButton", "bigButton", "fullWidth", "filled", "outline", "icon-button", "hoverLabel", "hover", "lowercase", "disabled"] }, { kind: "component", type: i3$1.IconComponent, selector: "ax-icon", inputs: ["name", "inline"] }, { kind: "component", type: i4$1.CopyTextComponent, selector: "ax-copy-text", inputs: ["value", "secret", "code"] }, { kind: "pipe", type: i5.FormatDateTimeFromNowPipe, name: "formatDateTimeFromNow" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TokenListCellComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-token-list-cell', template: "<div class=\"key-wrapper\">\n  <div class=\"key-name\">\n    {{ session.sessionInfo?.name }}\n  </div>\n  <div class=\"key-date\">\n    {{ session.timestamp | formatDateTimeFromNow }}\n  </div>\n  <div class=\"key-hash\">\n    <ax-copy-text [value]=\"session.sessionId\" [secret]=\"true\"></ax-copy-text>\n  </div>\n  <button class=\"expire\" axButton icon-button (click)=\"didClickButton.emit()\">\n    <ax-icon name=\"delete-outline\" class=\"icon\"></ax-icon>\n  </button>\n</div>\n", styles: [".key-wrapper{display:grid;grid-template-columns:1fr 1fr max-content;grid-template-areas:\"name date expire\" \"hash hash expire\";align-items:center;width:100%;padding:.75rem 1rem;grid-gap:.5rem;background-color:#fff;border-bottom:1px solid #d7dde4}.key-name{grid-area:name;font-weight:700}.key-hash{grid-area:hash}.key-copy{grid-area:copy}.expire{grid-area:expire;grid-row-start:1;grid-row-end:3}.key-date{grid-area:date;justify-self:flex-end;color:#7a8692;font-weight:400}\n"] }]
        }], ctorParameters: () => [{ type: i1$1.SessionsService }], propDecorators: { session: [{
                type: Input
            }], didClickButton: [{
                type: Output
            }] } });

class ApiKeysComponent {
    constructor(_elementRef, _overlay, _sessions) {
        this._elementRef = _elementRef;
        this._overlay = _overlay;
        this._sessions = _sessions;
        this.sessions$ = new BehaviorSubject([]);
        this.loading = true;
        this.error$ = new BehaviorSubject(false);
        this._sessions
            .getSessions()
            .pipe(map((sessions) => sessions.filter((sessions) => sessions.sessionInfo?.name)), first())
            .subscribe((sessions) => {
            this.sessions$.next(sessions);
            this.loading = false;
        });
    }
    openCreateApiModal() {
        this._overlay.createModal(this._elementRef, CreateApiKeyModalComponent, {
            title: 'developer.apiKey.modal.add.title',
            init: (modal) => {
                modal.addName = (name) => {
                    if (!name) {
                        return undefined;
                    }
                    this._sessions
                        .createApiTokenSession({ name })
                        .pipe(first())
                        .subscribe((session) => {
                        this.sessions$.next([...this.sessions$.value, session]);
                        this._overlay.closeModal();
                    });
                };
            },
        });
    }
    openExpireModal(sessionId) {
        this._overlay.createModal(this._elementRef, ExpireKeyModalComponent, {
            title: 'developer.apiKey.modal.expire.title',
            init: (modal) => {
                modal.expire = () => {
                    if (sessionId) {
                        this._sessions
                            .removeSessions({ ids: [sessionId] })
                            .pipe(first())
                            .subscribe(() => {
                            this.sessions$.next([
                                ...this.sessions$.value.filter((session) => session.sessionId !== sessionId),
                            ]);
                            this._overlay.closeModal();
                        });
                    }
                };
            },
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ApiKeysComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.OverlayService }, { token: i1$1.SessionsService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ApiKeysComponent, selector: "ax-api-keys", ngImport: i0, template: "<mat-progress-bar *ngIf=\"loading\" mode=\"indeterminate\"></mat-progress-bar>\n\n<div\n  class=\"empty\"\n  *ngIf=\"!loading && (sessions$ | async) && (sessions$ | async)?.length === 0; else sessions\"\n>\n  <h2>{{ 'developer.apiKey.absence' | translate }}</h2>\n  <p>{{ 'developer.apiKey.absence.explanation' | translate }}</p>\n</div>\n\n<ng-template #sessions>\n  <ax-token-list-cell\n    *ngFor=\"let session of sessions$ | async\"\n    (didClickButton)=\"openExpireModal(session.sessionId)\"\n    [session]=\"session\"\n  ></ax-token-list-cell>\n</ng-template>\n\n<div class=\"button-wrapper\">\n  <button\n    axButton\n    filled\n    class=\"add-button\"\n    fullWidth\n    color=\"primary\"\n    (click)=\"openCreateApiModal()\"\n  >\n    <ax-icon class=\"icon\" name=\"plus\"></ax-icon>\n    <span>{{ 'developer.apiKey.add' | translate }}</span>\n  </button>\n</div>\n", styles: [".button-wrapper{padding:1rem}.empty{padding:1rem 1rem 0}\n"], dependencies: [{ kind: "directive", type: i3$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i1.ButtonDirective, selector: "[axButton]", inputs: ["color", "labelHideMobile", "smallButton", "bigButton", "fullWidth", "filled", "outline", "icon-button", "hoverLabel", "hover", "lowercase", "disabled"] }, { kind: "component", type: i3$1.IconComponent, selector: "ax-icon", inputs: ["name", "inline"] }, { kind: "component", type: TokenListCellComponent, selector: "ax-token-list-cell", inputs: ["session"], outputs: ["didClickButton"] }, { kind: "pipe", type: i3$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ApiKeysComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-api-keys', template: "<mat-progress-bar *ngIf=\"loading\" mode=\"indeterminate\"></mat-progress-bar>\n\n<div\n  class=\"empty\"\n  *ngIf=\"!loading && (sessions$ | async) && (sessions$ | async)?.length === 0; else sessions\"\n>\n  <h2>{{ 'developer.apiKey.absence' | translate }}</h2>\n  <p>{{ 'developer.apiKey.absence.explanation' | translate }}</p>\n</div>\n\n<ng-template #sessions>\n  <ax-token-list-cell\n    *ngFor=\"let session of sessions$ | async\"\n    (didClickButton)=\"openExpireModal(session.sessionId)\"\n    [session]=\"session\"\n  ></ax-token-list-cell>\n</ng-template>\n\n<div class=\"button-wrapper\">\n  <button\n    axButton\n    filled\n    class=\"add-button\"\n    fullWidth\n    color=\"primary\"\n    (click)=\"openCreateApiModal()\"\n  >\n    <ax-icon class=\"icon\" name=\"plus\"></ax-icon>\n    <span>{{ 'developer.apiKey.add' | translate }}</span>\n  </button>\n</div>\n", styles: [".button-wrapper{padding:1rem}.empty{padding:1rem 1rem 0}\n"] }]
        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$2.OverlayService }, { type: i1$1.SessionsService }] });

class ApiKeysModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ApiKeysModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: ApiKeysModule, declarations: [ApiKeysComponent,
            CreateApiKeyModalComponent,
            ExpireKeyModalComponent,
            TokenListCellComponent], imports: [CommonModule,
            MatProgressBarModule,
            ButtonModule,
            IconsModule,
            ReactiveFormsModule,
            CopyTextModule,
            MatInputModule,
            HelperPipesModule], exports: [ApiKeysComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ApiKeysModule, imports: [CommonModule,
            MatProgressBarModule,
            ButtonModule,
            IconsModule,
            ReactiveFormsModule,
            CopyTextModule,
            MatInputModule,
            HelperPipesModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ApiKeysModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [
                        ApiKeysComponent,
                        CreateApiKeyModalComponent,
                        ExpireKeyModalComponent,
                        TokenListCellComponent,
                    ],
                    imports: [
                        CommonModule,
                        MatProgressBarModule,
                        ButtonModule,
                        IconsModule,
                        ReactiveFormsModule,
                        CopyTextModule,
                        MatInputModule,
                        HelperPipesModule,
                    ],
                    exports: [ApiKeysComponent],
                }]
        }] });

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

export { ApiKeysComponent, ApiKeysModule };
//# sourceMappingURL=aztrix-components-api-keys.mjs.map
