import { CommonModule } from '@angular/common';
import { ChangeDetectorRef, Component, inject, Input, ViewChild, } from '@angular/core';
import { Clipboard } from '@capacitor/clipboard';
import { ToastController } from '@ionic/angular';
import { IonButton, IonIcon } from '@ionic/angular/standalone';
import { I18nService } from '../../../services/i18n';
import * as Prism from 'prismjs';
import 'prismjs/components/prism-bash';
import 'prismjs/components/prism-css';
import 'prismjs/components/prism-javascript';
import 'prismjs/components/prism-markup';
import 'prismjs/components/prism-typescript';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class PlainCodeBoxComponent {
    constructor() {
        this.toast = inject(ToastController);
        this.cdr = inject(ChangeDetectorRef);
        this.i18n = inject(I18nService);
        this.props = { lines: [] };
    }
    ngOnChanges(changes) {
        if (changes['props'] && !changes['props'].firstChange) {
            this.cdr.detectChanges();
            setTimeout(() => this.highlightCode());
        }
    }
    ngAfterViewInit() {
        setTimeout(() => this.highlightCode());
    }
    highlightCode() {
        if (this.codeBlock && this.props.lines && this.props.lines.length > 0) {
            Prism.highlightElement(this.codeBlock.nativeElement);
        }
    }
    async copyCode() {
        const fullCode = this.props.lines.map(line => line.text).join('\n');
        if (fullCode) {
            await Clipboard.write({
                string: fullCode,
            });
            this.presentToast(this.i18n.t('copiedToClipboard'));
        }
    }
    async presentToast(message) {
        const toast = await this.toast.create({
            message: message,
            duration: 2000,
            position: 'bottom',
            color: 'dark',
        });
        toast.present();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PlainCodeBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: PlainCodeBoxComponent, isStandalone: true, selector: "val-plain-code-box", inputs: { props: "props" }, viewQueries: [{ propertyName: "codeBlock", first: true, predicate: ["codeBlock"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
    <div class="code-box-container">
      <ion-button *ngIf="props.showCopyButton !== false" fill="clear" class="copy-button" (click)="copyCode()">
        <ion-icon name="copy-outline"></ion-icon>
      </ion-button>
      <pre><code [class]="'language-' + (props.language || 'bash')" #codeBlock><ng-container *ngFor="let line of props.lines; let i = index"><span [class]="line.type ? 'line-' + line.type : 'line-normal'">{{ line.text }}</span><br *ngIf="i < props.lines.length - 1">
</ng-container></code></pre>
    </div>
  `, isInline: true, styles: [".code-box-container{position:relative;background-color:#282c34;border-radius:16px;overflow:hidden;box-shadow:0 4px 15px #0009;margin:0}@media (prefers-color-scheme: light){.code-box-container{background-color:#fff;box-shadow:0 2px 4px #0000001a}}.copy-button{position:absolute;top:8px;right:8px;z-index:10;--padding-start: 2px;--padding-end: 2px;--padding-top: 2px;--padding-bottom: 2px;min-width:28px;min-height:28px;height:28px;width:28px;color:#61afef;background:#0006;border-radius:6px;box-shadow:0 1px 4px #0000000d;display:flex;align-items:center;justify-content:center;transition:background .2s ease,color .2s ease}.copy-button:hover{background:#00000080;color:#8cc4ff}.copy-button ion-icon{font-size:1.2em;margin:0}@media (prefers-color-scheme: light){.copy-button{color:var(--ion-color-primary, #007bff);background:#ffffffb3}.copy-button:hover{background:#ffffffe6;color:var(--ion-color-primary-tint, #3880ff)}}pre{margin:0;padding:0;background-color:transparent;min-width:100%;min-height:100%;white-space:pre-wrap;word-break:normal;font-family:Roboto Mono,monospace}code{font-family:Roboto Mono,monospace;font-size:.9em;line-height:1.6;display:block;white-space:inherit;word-break:inherit;color:#abb2bf;margin:0}@media (prefers-color-scheme: light){code{color:#333}}code .line-normal{color:#abb2bf}@media (prefers-color-scheme: light){code .line-normal{color:#333}}code .line-command{color:#c678dd}@media (prefers-color-scheme: light){code .line-command{color:var(--ion-color-primary, #3880ff)}}code .line-error{color:#e06c75}@media (prefers-color-scheme: light){code .line-error{color:var(--ion-color-danger, #eb445a)}}code .line-success{color:#98c379}@media (prefers-color-scheme: light){code .line-success{color:var(--ion-color-success, #2dd36f)}}code .token.comment{color:#5c6370}code .token.selector,code .token.string{color:#98c379}code .token.punctuation{color:#abb2bf}code .token.operator{color:#c678dd}code .token.boolean,code .token.number{color:#d19a66}code .token.function{color:#61afef}code .token.keyword{color:#c678dd}code .token.class-name{color:#e6c07b}code .token.tag{color:#e06c75}code .token.attr-name{color:#d19a66}code .token.attr-value{color:#98c379}code .token.property{color:#56b6c2}code .token.variable{color:#e06c75}@media (max-width: 600px){.code-box-container{border-radius:16px}.copy-button{top:6px;right:6px;min-width:24px;min-height:24px;height:24px;width:24px}.copy-button ion-icon{font-size:1em}pre{padding:0;margin:0}code{font-size:.8em;line-height:1.5;margin:0}}@media (min-width: 601px) and (max-width: 1024px){code{font-size:.9em}}@media (min-width: 1025px){code{font-size:1em}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PlainCodeBoxComponent, decorators: [{
            type: Component,
            args: [{ selector: 'val-plain-code-box', standalone: true, imports: [CommonModule, IonIcon, IonButton], template: `
    <div class="code-box-container">
      <ion-button *ngIf="props.showCopyButton !== false" fill="clear" class="copy-button" (click)="copyCode()">
        <ion-icon name="copy-outline"></ion-icon>
      </ion-button>
      <pre><code [class]="'language-' + (props.language || 'bash')" #codeBlock><ng-container *ngFor="let line of props.lines; let i = index"><span [class]="line.type ? 'line-' + line.type : 'line-normal'">{{ line.text }}</span><br *ngIf="i < props.lines.length - 1">
</ng-container></code></pre>
    </div>
  `, styles: [".code-box-container{position:relative;background-color:#282c34;border-radius:16px;overflow:hidden;box-shadow:0 4px 15px #0009;margin:0}@media (prefers-color-scheme: light){.code-box-container{background-color:#fff;box-shadow:0 2px 4px #0000001a}}.copy-button{position:absolute;top:8px;right:8px;z-index:10;--padding-start: 2px;--padding-end: 2px;--padding-top: 2px;--padding-bottom: 2px;min-width:28px;min-height:28px;height:28px;width:28px;color:#61afef;background:#0006;border-radius:6px;box-shadow:0 1px 4px #0000000d;display:flex;align-items:center;justify-content:center;transition:background .2s ease,color .2s ease}.copy-button:hover{background:#00000080;color:#8cc4ff}.copy-button ion-icon{font-size:1.2em;margin:0}@media (prefers-color-scheme: light){.copy-button{color:var(--ion-color-primary, #007bff);background:#ffffffb3}.copy-button:hover{background:#ffffffe6;color:var(--ion-color-primary-tint, #3880ff)}}pre{margin:0;padding:0;background-color:transparent;min-width:100%;min-height:100%;white-space:pre-wrap;word-break:normal;font-family:Roboto Mono,monospace}code{font-family:Roboto Mono,monospace;font-size:.9em;line-height:1.6;display:block;white-space:inherit;word-break:inherit;color:#abb2bf;margin:0}@media (prefers-color-scheme: light){code{color:#333}}code .line-normal{color:#abb2bf}@media (prefers-color-scheme: light){code .line-normal{color:#333}}code .line-command{color:#c678dd}@media (prefers-color-scheme: light){code .line-command{color:var(--ion-color-primary, #3880ff)}}code .line-error{color:#e06c75}@media (prefers-color-scheme: light){code .line-error{color:var(--ion-color-danger, #eb445a)}}code .line-success{color:#98c379}@media (prefers-color-scheme: light){code .line-success{color:var(--ion-color-success, #2dd36f)}}code .token.comment{color:#5c6370}code .token.selector,code .token.string{color:#98c379}code .token.punctuation{color:#abb2bf}code .token.operator{color:#c678dd}code .token.boolean,code .token.number{color:#d19a66}code .token.function{color:#61afef}code .token.keyword{color:#c678dd}code .token.class-name{color:#e6c07b}code .token.tag{color:#e06c75}code .token.attr-name{color:#d19a66}code .token.attr-value{color:#98c379}code .token.property{color:#56b6c2}code .token.variable{color:#e06c75}@media (max-width: 600px){.code-box-container{border-radius:16px}.copy-button{top:6px;right:6px;min-width:24px;min-height:24px;height:24px;width:24px}.copy-button ion-icon{font-size:1em}pre{padding:0;margin:0}code{font-size:.8em;line-height:1.5;margin:0}}@media (min-width: 601px) and (max-width: 1024px){code{font-size:.9em}}@media (min-width: 1025px){code{font-size:1em}}\n"] }]
        }], propDecorators: { props: [{
                type: Input
            }], codeBlock: [{
                type: ViewChild,
                args: ['codeBlock']
            }] } });
//# sourceMappingURL=data:application/json;base64, 