import { Component, Input } from '@angular/core';
import { BehaviorSubject, interval } from 'rxjs';
import { first } from 'rxjs/operators';
import { v4 as uuid } from 'uuid';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/material/input";
import * as i3 from "@angular/cdk/text-field";
import * as i4 from "./copy-button/copy-button.component";
import * as i5 from "@aztrix/helpers";
export 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 uuid() + uuid() + uuid();
    }
    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.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.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "component", type: i4.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
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29weS10ZXh0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9jb3B5LXRleHQvY29weS10ZXh0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9jb3B5LXRleHQvY29weS10ZXh0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQUUsS0FBSyxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBQy9DLE9BQU8sRUFBQyxlQUFlLEVBQUUsUUFBUSxFQUFDLE1BQU0sTUFBTSxDQUFDO0FBQy9DLE9BQU8sRUFBQyxLQUFLLEVBQUMsTUFBTSxnQkFBZ0IsQ0FBQztBQUNyQyxPQUFPLEVBQUMsRUFBRSxJQUFJLElBQUksRUFBQyxNQUFNLE1BQU0sQ0FBQzs7Ozs7OztBQU9oQyxNQUFNLE9BQU8saUJBQWlCO0lBTDlCO1FBT1csV0FBTSxHQUFHLEtBQUssQ0FBQztRQUNmLFNBQUksR0FBRyxLQUFLLENBQUM7UUFFdEIsWUFBTyxHQUFHLElBQUksZUFBZSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBRXJDLGNBQVMsR0FBRyxJQUFJLENBQUMsd0JBQXdCLEVBQUUsQ0FBQztLQWM3QztJQVpDLFlBQVk7UUFDVixJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUN4QixRQUFRLENBQUMsSUFBSSxDQUFDO2FBQ1gsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDO2FBQ2IsU0FBUyxDQUFDLEdBQUcsRUFBRTtZQUNkLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQzNCLENBQUMsQ0FBQyxDQUFDO0lBQ1AsQ0FBQztJQUVPLHdCQUF3QjtRQUM5QixPQUFPLElBQUksRUFBRSxHQUFHLElBQUksRUFBRSxHQUFHLElBQUksRUFBRSxDQUFDO0lBQ2xDLENBQUM7K0dBcEJVLGlCQUFpQjttR0FBakIsaUJBQWlCLGdIQ1Y5QixrK0JBaUNBOzs0RkR2QmEsaUJBQWlCO2tCQUw3QixTQUFTOytCQUNFLGNBQWM7OEJBS2YsS0FBSztzQkFBYixLQUFLO2dCQUNHLE1BQU07c0JBQWQsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0NvbXBvbmVudCwgSW5wdXR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtCZWhhdmlvclN1YmplY3QsIGludGVydmFsfSBmcm9tICdyeGpzJztcbmltcG9ydCB7Zmlyc3R9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcbmltcG9ydCB7djQgYXMgdXVpZH0gZnJvbSAndXVpZCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2F4LWNvcHktdGV4dCcsXG4gIHRlbXBsYXRlVXJsOiAnY29weS10ZXh0LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJ2NvcHktdGV4dC5jb21wb25lbnQuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBDb3B5VGV4dENvbXBvbmVudCB7XG4gIEBJbnB1dCgpIHZhbHVlPzogc3RyaW5nO1xuICBASW5wdXQoKSBzZWNyZXQgPSBmYWxzZTtcbiAgQElucHV0KCkgY29kZSA9IGZhbHNlO1xuXG4gIGNvcGllZCQgPSBuZXcgQmVoYXZpb3JTdWJqZWN0KGZhbHNlKTtcblxuICBmYWtlVmFsdWUgPSB0aGlzLl9nZW5lcmF0ZVJhbmRvbUZha2VWYWx1ZSgpO1xuXG4gIGRpZENsaWNrQ29weSgpIHtcbiAgICB0aGlzLmNvcGllZCQubmV4dCh0cnVlKTtcbiAgICBpbnRlcnZhbCg1MDAwKVxuICAgICAgLnBpcGUoZmlyc3QoKSlcbiAgICAgIC5zdWJzY3JpYmUoKCkgPT4ge1xuICAgICAgICB0aGlzLmNvcGllZCQubmV4dChmYWxzZSk7XG4gICAgICB9KTtcbiAgfVxuXG4gIHByaXZhdGUgX2dlbmVyYXRlUmFuZG9tRmFrZVZhbHVlKCkge1xuICAgIHJldHVybiB1dWlkKCkgKyB1dWlkKCkgKyB1dWlkKCk7XG4gIH1cbn1cbiIsIjxuZy10ZW1wbGF0ZSAjc2VjcmV0VmFsdWU+XG4gIDxkaXYgY2xhc3M9XCJoaWRkZW5cIiAqbmdJZj1cInNlY3JldFwiIChjbGljayk9XCJzZWNyZXQgPSAhc2VjcmV0XCI+XG4gICAgPHNwYW4gY2xhc3M9XCJ0ZXh0XCI+e3sgZmFrZVZhbHVlIH19PC9zcGFuPlxuICAgIDxzcGFuIGNsYXNzPVwic2hvd1wiPnt7ICdsYWJlbC5zaG93JyB8IHRyYW5zbGF0ZSB8IGxvd2VyY2FzZSB9fTwvc3Bhbj5cbiAgPC9kaXY+XG48L25nLXRlbXBsYXRlPlxuXG48ZGl2IGNsYXNzPVwiaW5wdXQtd3JhcHBlclwiICpuZ0lmPVwiIWNvZGVcIj5cbiAgPGRpdiBjbGFzcz1cImlucHV0LWNvbnRlbnRcIj5cbiAgICA8dGV4dGFyZWFcbiAgICAgIGNsYXNzPVwiaW5wdXRcIlxuICAgICAgbWF0SW5wdXRcbiAgICAgIGNka1RleHRhcmVhQXV0b3NpemVcbiAgICAgICNhdXRvc2l6ZT1cImNka1RleHRhcmVhQXV0b3NpemVcIlxuICAgICAgbWluUm93cz1cIjFcIlxuICAgICAgbWF4Um93cz1cIjVcIlxuICAgICAgZGlzYWJsZWRcbiAgICAgIFtoaWRkZW5dPVwic2VjcmV0XCJcbiAgICAgIFt2YWx1ZV09XCJzZWNyZXQgPyAnJyA6IHZhbHVlXCJcbiAgICA+PC90ZXh0YXJlYT5cbiAgPC9kaXY+XG5cbiAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cInNlY3JldFZhbHVlXCI+PC9uZy1jb250YWluZXI+XG4gIDxheC1jb3B5LWJ1dHRvbiBjbGFzcz1cInN1ZmZpeFwiIFt2YWx1ZV09XCJ2YWx1ZVwiPjwvYXgtY29weS1idXR0b24+XG48L2Rpdj5cblxuPGRpdiBjbGFzcz1cImNvZGVcIiAqbmdJZj1cImNvZGVcIj5cbiAgPGNvZGUgKm5nSWY9XCIhc2VjcmV0XCI+XG4gICAgPHByZT57eyB2YWx1ZSB9fTwvcHJlPlxuICA8L2NvZGU+XG4gIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJzZWNyZXRWYWx1ZVwiPjwvbmctY29udGFpbmVyPlxuICA8YXgtY29weS1idXR0b24gW3ZhbHVlXT1cInZhbHVlXCI+PC9heC1jb3B5LWJ1dHRvbj5cbjwvZGl2PlxuIl19