import * as i0 from '@angular/core';
import { Component, Input, NgModule } from '@angular/core';
import { BehaviorSubject, interval } from 'rxjs';
import { first } from 'rxjs/operators';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from '@aztrix/icons';
import { IconsModule } from '@aztrix/icons';
import * as i3 from '@aztrix/components/button';
import { ButtonModule } from '@aztrix/components/button';
import * as i4 from '@angular/cdk/clipboard';
import { ClipboardModule } from '@angular/cdk/clipboard';
import { v4 } from 'uuid';
import * as i2$1 from '@angular/material/input';
import { MatInputModule } from '@angular/material/input';
import * as i3$1 from '@angular/cdk/text-field';
import { TextFieldModule } from '@angular/cdk/text-field';
import * as i5 from '@aztrix/helpers';
import { HelperPipesModule } from '@aztrix/helpers';

class CopyButtonComponent {
    constructor() {
        this.color = 'grey';
        this.copied$ = new BehaviorSubject(false);
    }
    didClickCopy() {
        this.copied$.next(true);
        interval(5000)
            .pipe(first())
            .subscribe(() => {
            this.copied$.next(false);
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CopyButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CopyButtonComponent, selector: "ax-copy-button", inputs: { value: "value", color: "color" }, ngImport: i0, template: "<button\n  axButton\n  icon-button\n  [cdkCopyToClipboard]=\"value || ''\"\n  (cdkCopyToClipboardCopied)=\"didClickCopy()\"\n  [color]=\"color === 'grey' ? undefined : 'white'\"\n>\n  <ax-icon\n    class=\"icon\"\n    [ngClass]=\"{copied: copied$ | async, white: color === 'white'}\"\n    [name]=\"(copied$ | async) ? 'check-circle' : 'content-copy'\"\n  ></ax-icon>\n</button>\n", styles: [":host{display:flex;align-items:center;justify-content:center}.copied{color:var(--primary-color-500)}.copied.white{color:#fff}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.IconComponent, selector: "ax-icon", inputs: ["name", "inline"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[axButton]", inputs: ["color", "labelHideMobile", "smallButton", "bigButton", "fullWidth", "filled", "outline", "icon-button", "hoverLabel", "hover", "lowercase", "disabled"] }, { kind: "directive", type: i4.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CopyButtonComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-copy-button', template: "<button\n  axButton\n  icon-button\n  [cdkCopyToClipboard]=\"value || ''\"\n  (cdkCopyToClipboardCopied)=\"didClickCopy()\"\n  [color]=\"color === 'grey' ? undefined : 'white'\"\n>\n  <ax-icon\n    class=\"icon\"\n    [ngClass]=\"{copied: copied$ | async, white: color === 'white'}\"\n    [name]=\"(copied$ | async) ? 'check-circle' : 'content-copy'\"\n  ></ax-icon>\n</button>\n", styles: [":host{display:flex;align-items:center;justify-content:center}.copied{color:var(--primary-color-500)}.copied.white{color:#fff}\n"] }]
        }], propDecorators: { value: [{
                type: Input
            }], color: [{
                type: Input
            }] } });

class CopyTextComponent {
    constructor() {
        this.secret = false;
        this.code = false;
        this.copied$ = new BehaviorSubject(false);
        this.fakeValue = this._generateRandomFakeValue();
    }
    didClickCopy() {
        this.copied$.next(true);
        interval(5000)
            .pipe(first())
            .subscribe(() => {
            this.copied$.next(false);
        });
    }
    _generateRandomFakeValue() {
        return v4() + v4() + v4();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CopyTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CopyTextComponent, selector: "ax-copy-text", inputs: { value: "value", secret: "secret", code: "code" }, ngImport: i0, template: "<ng-template #secretValue>\n  <div class=\"hidden\" *ngIf=\"secret\" (click)=\"secret = !secret\">\n    <span class=\"text\">{{ fakeValue }}</span>\n    <span class=\"show\">{{ 'label.show' | translate | lowercase }}</span>\n  </div>\n</ng-template>\n\n<div class=\"input-wrapper\" *ngIf=\"!code\">\n  <div class=\"input-content\">\n    <textarea\n      class=\"input\"\n      matInput\n      cdkTextareaAutosize\n      #autosize=\"cdkTextareaAutosize\"\n      minRows=\"1\"\n      maxRows=\"5\"\n      disabled\n      [hidden]=\"secret\"\n      [value]=\"secret ? '' : value\"\n    ></textarea>\n  </div>\n\n  <ng-container *ngTemplateOutlet=\"secretValue\"></ng-container>\n  <ax-copy-button class=\"suffix\" [value]=\"value\"></ax-copy-button>\n</div>\n\n<div class=\"code\" *ngIf=\"code\">\n  <code *ngIf=\"!secret\">\n    <pre>{{ value }}</pre>\n  </code>\n  <ng-container *ngTemplateOutlet=\"secretValue\"></ng-container>\n  <ax-copy-button [value]=\"value\"></ax-copy-button>\n</div>\n", styles: [":host{--copy-text-border-radius: 10px;--copy-text-background-color: #ebebeb;display:flex;align-items:center;width:100%}:host .suffix ::ng-deep .ax-button{width:24px;height:24px}:host .suffix ::ng-deep .ax-button .icon{width:1rem;height:1rem}.input-wrapper{display:flex;align-items:center;position:relative;width:100%;overflow:hidden;padding:.5rem;border-radius:var(--copy-text-border-radius, 0);background-color:var(--copy-text-background-color, transparent)}.input-content{display:inline-flex;min-height:24px;flex:1 0 auto}textarea{border:none;overflow:hidden;outline:none;box-shadow:none;resize:none;min-height:24px}.input{color:#555;background-color:transparent;width:100%;line-break:anywhere;white-space:normal}.suffix{width:24px;height:24px;flex:0 0 24px}.hidden{display:inline-block;font-size:1rem;position:absolute;z-index:1;left:0;right:40px;pointer-events:all;overflow:hidden}.hidden .text{display:inline-flex;width:100%;overflow:hidden;padding-left:.25rem;filter:blur(3px);white-space:nowrap}.show{position:absolute;left:50%;transform:translate(-50%);background-color:var(--copy-text-background-color, #fff);box-shadow:0 0 5px 10px var(--copy-text-background-color, #fff)}.copied{color:var(--primary-color-500)}.code{display:grid;grid-template-columns:1fr 34px;background-color:#efefef;padding:1rem}.code>code{min-width:0}.code pre{white-space:pre-wrap;word-break:break-word;margin:0}@keyframes slide-in{to{margin-left:1rem}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.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: "directive", type: i3$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "component", type: CopyButtonComponent, selector: "ax-copy-button", inputs: ["value", "color"] }, { kind: "pipe", type: i1.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CopyTextComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-copy-text', template: "<ng-template #secretValue>\n  <div class=\"hidden\" *ngIf=\"secret\" (click)=\"secret = !secret\">\n    <span class=\"text\">{{ fakeValue }}</span>\n    <span class=\"show\">{{ 'label.show' | translate | lowercase }}</span>\n  </div>\n</ng-template>\n\n<div class=\"input-wrapper\" *ngIf=\"!code\">\n  <div class=\"input-content\">\n    <textarea\n      class=\"input\"\n      matInput\n      cdkTextareaAutosize\n      #autosize=\"cdkTextareaAutosize\"\n      minRows=\"1\"\n      maxRows=\"5\"\n      disabled\n      [hidden]=\"secret\"\n      [value]=\"secret ? '' : value\"\n    ></textarea>\n  </div>\n\n  <ng-container *ngTemplateOutlet=\"secretValue\"></ng-container>\n  <ax-copy-button class=\"suffix\" [value]=\"value\"></ax-copy-button>\n</div>\n\n<div class=\"code\" *ngIf=\"code\">\n  <code *ngIf=\"!secret\">\n    <pre>{{ value }}</pre>\n  </code>\n  <ng-container *ngTemplateOutlet=\"secretValue\"></ng-container>\n  <ax-copy-button [value]=\"value\"></ax-copy-button>\n</div>\n", styles: [":host{--copy-text-border-radius: 10px;--copy-text-background-color: #ebebeb;display:flex;align-items:center;width:100%}:host .suffix ::ng-deep .ax-button{width:24px;height:24px}:host .suffix ::ng-deep .ax-button .icon{width:1rem;height:1rem}.input-wrapper{display:flex;align-items:center;position:relative;width:100%;overflow:hidden;padding:.5rem;border-radius:var(--copy-text-border-radius, 0);background-color:var(--copy-text-background-color, transparent)}.input-content{display:inline-flex;min-height:24px;flex:1 0 auto}textarea{border:none;overflow:hidden;outline:none;box-shadow:none;resize:none;min-height:24px}.input{color:#555;background-color:transparent;width:100%;line-break:anywhere;white-space:normal}.suffix{width:24px;height:24px;flex:0 0 24px}.hidden{display:inline-block;font-size:1rem;position:absolute;z-index:1;left:0;right:40px;pointer-events:all;overflow:hidden}.hidden .text{display:inline-flex;width:100%;overflow:hidden;padding-left:.25rem;filter:blur(3px);white-space:nowrap}.show{position:absolute;left:50%;transform:translate(-50%);background-color:var(--copy-text-background-color, #fff);box-shadow:0 0 5px 10px var(--copy-text-background-color, #fff)}.copied{color:var(--primary-color-500)}.code{display:grid;grid-template-columns:1fr 34px;background-color:#efefef;padding:1rem}.code>code{min-width:0}.code pre{white-space:pre-wrap;word-break:break-word;margin:0}@keyframes slide-in{to{margin-left:1rem}}\n"] }]
        }], propDecorators: { value: [{
                type: Input
            }], secret: [{
                type: Input
            }], code: [{
                type: Input
            }] } });

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

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

export { CopyButtonComponent, CopyTextComponent, CopyTextModule };
//# sourceMappingURL=aztrix-components-copy-text.mjs.map
