@koalarx/ui
Version:
Koala UI is a modern and accessible component library designed to speed up interface development in Angular projects. With simple integration and clear documentation, you can easily build robust and visually appealing applications.
69 lines (65 loc) • 6.31 kB
JavaScript
import 'prismjs/prism';
import 'prismjs/components/prism-bash';
import 'prismjs/components/prism-css';
import 'prismjs/components/prism-json';
import 'prismjs/components/prism-markup';
import 'prismjs/components/prism-typescript';
import 'prismjs/plugins/line-highlight/prism-line-highlight';
import 'prismjs/plugins/line-numbers/prism-line-numbers';
import * as i0 from '@angular/core';
import { inject, signal, input, booleanAttribute, linkedSignal, Component } from '@angular/core';
import { AppConfig } from '@koalarx/ui/core/config';
import { Tooltip } from '@koalarx/ui/shared/directives';
import * as i1 from 'ngx-markdown';
import { MarkdownModule } from 'ngx-markdown';
class CodeViewer {
translations = inject(AppConfig).translation.codeViewer;
copied = signal(false);
content = signal('');
name = input.required();
src = input.required();
language = input('other');
lineHighlight = input();
lineNumbers = input(false, { transform: booleanAttribute });
icon = linkedSignal(() => {
const language = this.language();
if (language) {
switch (language) {
case 'bash':
return 'fa-solid fa-terminal p-1 text-[0.5rem]';
case 'typescript':
return 'fa-brands fa-angular py-0 px-[0.2rem] text-[1rem]';
case 'html':
return 'fa-brands fa-html5 py-[0.1rem] px-[0.2rem] text-[1rem]';
case 'css':
return 'fa-brands fa-css3 py-[0.1rem] px-[0.2rem] text-[1rem]';
case 'json':
return 'fa-regular fa-file-code py-[0.1rem] px-[0.2rem] text-[1rem]';
}
}
return 'fa-solid fa-code';
});
clipboard(event) {
this.content.set(event.replace(/^[^\n]*\n?/, '').replace(/`/g, ''));
}
copyCode() {
const code = this.content();
if (code) {
navigator.clipboard.writeText(code).then(() => {
this.copied.set(true);
setTimeout(() => this.copied.set(false), 2000);
});
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CodeViewer, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: CodeViewer, isStandalone: true, selector: "kl-code-viewer", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: true, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, lineHighlight: { classPropertyName: "lineHighlight", publicName: "lineHighlight", isSignal: true, isRequired: false, transformFunction: null }, lineNumbers: { classPropertyName: "lineNumbers", publicName: "lineNumbers", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"relative rounded-xl bg-neutral-900 border border-base-300 mt-5 overflow-hidden\">\n <div class=\"flex items-center justify-between p-3\">\n <span class=\"flex items-center gap-2\">\n <i class=\"bg-neutral-400 text-neutral-950 rounded-sm\"\n [class]=\"icon()\">\n </i>\n <span class=\"text-neutral-500\">{{ name() }}</span>\n </span>\n\n <button class=\"hover:cursor-pointer px-2 text-md text-neutral-500 hover:text-neutral-300 hover:bg-neutral-800 rounded-sm\"\n type=\"button\"\n [tooltip]=\"copied()\n ? translations.copiedToClipboard\n : translations.copyToClipboard\"\n tooltipPosition=\"left\"\n (click)=\"copyCode()\">\n\n @if (copied()) {\n <i class=\"fa-solid fa-check\"></i>\n } @else {\n <i class=\"fa-regular fa-clipboard\"></i>\n }\n </button>\n </div>\n\n <markdown\n [src]=\"src()\"\n [disableSanitizer]=\"true\"\n [lineNumbers]=\"lineNumbers()\"\n lineHighlight\n [line]=\"lineHighlight()\"\n (load)=\"clipboard($event)\"\n />\n</div>\n", dependencies: [{ kind: "ngmodule", type: MarkdownModule }, { kind: "component", type: i1.MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }, { kind: "directive", type: Tooltip, selector: "[tooltip]", inputs: ["tooltip", "tooltipPosition"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CodeViewer, decorators: [{
type: Component,
args: [{ selector: 'kl-code-viewer', imports: [MarkdownModule, Tooltip], template: "<div class=\"relative rounded-xl bg-neutral-900 border border-base-300 mt-5 overflow-hidden\">\n <div class=\"flex items-center justify-between p-3\">\n <span class=\"flex items-center gap-2\">\n <i class=\"bg-neutral-400 text-neutral-950 rounded-sm\"\n [class]=\"icon()\">\n </i>\n <span class=\"text-neutral-500\">{{ name() }}</span>\n </span>\n\n <button class=\"hover:cursor-pointer px-2 text-md text-neutral-500 hover:text-neutral-300 hover:bg-neutral-800 rounded-sm\"\n type=\"button\"\n [tooltip]=\"copied()\n ? translations.copiedToClipboard\n : translations.copyToClipboard\"\n tooltipPosition=\"left\"\n (click)=\"copyCode()\">\n\n @if (copied()) {\n <i class=\"fa-solid fa-check\"></i>\n } @else {\n <i class=\"fa-regular fa-clipboard\"></i>\n }\n </button>\n </div>\n\n <markdown\n [src]=\"src()\"\n [disableSanitizer]=\"true\"\n [lineNumbers]=\"lineNumbers()\"\n lineHighlight\n [line]=\"lineHighlight()\"\n (load)=\"clipboard($event)\"\n />\n</div>\n" }]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { CodeViewer };
//# sourceMappingURL=koalarx-ui-shared-components-code-viewer.mjs.map