// © 2022 SolarWinds Worldwide, LLC. All rights reserved.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
//  of this software and associated documentation files (the "Software"), to
//  deal in the Software without restriction, including without limitation the
//  rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
//  sell copies of the Software, and to permit persons to whom the Software is
//  furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
//  all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
//  THE SOFTWARE.
import { DOCUMENT } from "@angular/common";
import { Component, Inject, Input } from "@angular/core";
import hljs from "highlight.js";
import javascript from "highlight.js/lib/languages/javascript";
import json from "highlight.js/lib/languages/json";
import less from "highlight.js/lib/languages/less";
import typescript from "highlight.js/lib/languages/typescript";
import xml from "highlight.js/lib/languages/xml";
import { SourcesService } from "../services/sources.service";
import { PlunkerProjectService } from "./plunker-project.service";
import * as i0 from "@angular/core";
import * as i1 from "../services/sources.service";
import * as i2 from "./plunker-project.service";
import * as i3 from "../../button/button.component";
import * as i4 from "../../tabgroup/tab-group/tab-group.component";
import * as i5 from "../../tabgroup/tab/tab.component";
import * as i6 from "../copy-text/copy-text.component";
import * as i7 from "../example-code/example-code.component";
import * as i8 from "../../image/image.component";
import * as i9 from "../../tooltip/tooltip.directive";
import * as i10 from "@angular/common";
/**
 * @dynamic
 * @ignore
 */
export class ExampleWrapperComponent {
    constructor(sourcesService, document, plunkerProjectService) {
        this.sourcesService = sourcesService;
        this.document = document;
        this.plunkerProjectService = plunkerProjectService;
        // Prefix of the example component's filenames
        this.filenamePrefix = "";
        // Title to be displayed at the top of the example
        this.exampleTitle = "";
        // Indicates whether the source code is being displayed
        this.showSource = false;
        this.availableThemes = ["light theme", "dark theme"];
        this.selectedTheme = this.availableThemes[0];
        hljs.registerLanguage("typescript", typescript);
        hljs.registerLanguage("javascript", javascript);
        hljs.registerLanguage("xml", xml);
        hljs.registerLanguage("json", json);
        hljs.registerLanguage("less", less);
    }
    getTooltip() {
        return this.showSource ? "Hide source code" : "Show source code";
    }
    openPlunker() {
        this.plunkerProjectService.open(this.filenamePrefix, this.componentSources, this.sourcesService.getTranslations());
    }
    ngOnInit() {
        this.componentSources =
            this.sourcesService.getSourcesByFilenamePrefix(this.filenamePrefix) ?? {};
    }
}
ExampleWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ExampleWrapperComponent, deps: [{ token: i1.SourcesService }, { token: DOCUMENT }, { token: i2.PlunkerProjectService }], target: i0.ɵɵFactoryTarget.Component });
ExampleWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ExampleWrapperComponent, selector: "nui-example-wrapper", inputs: { filenamePrefix: "filenamePrefix", exampleTitle: "exampleTitle", showSource: "showSource" }, providers: [SourcesService], ngImport: i0, template: "<div class=\"nui-example-wrapper__container\">\n    <div class=\"nui-example-wrapper__header\">\n        <h4 class=\"nui-example-wrapper__title\">{{ exampleTitle }}</h4>\n        <div>\n            <button\n                nui-button\n                type=\"button\"\n                displayStyle=\"action\"\n                icon=\"{{\n                    showSource ? 'double-caret-up' : 'double-caret-down'\n                }}\"\n                title=\"Show source\"\n                [nuiTooltip]=\"getTooltip()\"\n                tooltipPlacement=\"bottom\"\n                (click)=\"showSource = !showSource\"\n            ></button>\n            <button\n                nui-button\n                type=\"button\"\n                displayStyle=\"action\"\n                icon=\"external-link\"\n                title=\"Open in Plunker\"\n                nuiTooltip=\"Open in Plunker (only self-contained examples are opened properly)\"\n                tooltipPlacement=\"bottom\"\n                (click)=\"openPlunker()\"\n            ></button>\n        </div>\n    </div>\n    <div *ngIf=\"showSource\" class=\"nui-example-wrapper__source\">\n        <nui-tab-group>\n            <nui-tab *ngIf=\"!!componentSources.html\" heading=\"HTML\">\n                <div class=\"media-body\">\n                    <nui-copy-text\n                        fileContent=\"{{ componentSources.html }}\"\n                    ></nui-copy-text>\n                    <nui-example-code language=\"html\">{{\n                        componentSources.html\n                    }}</nui-example-code>\n                </div>\n            </nui-tab>\n            <nui-tab *ngIf=\"!!componentSources.ts\" heading=\"Typescript\">\n                <nui-copy-text\n                    fileContent=\"{{ componentSources.ts }}\"\n                ></nui-copy-text>\n                <div class=\"media-body\">\n                    <nui-example-code language=\"typescript\">{{\n                        componentSources.ts\n                    }}</nui-example-code>\n                </div>\n            </nui-tab>\n            <nui-tab *ngIf=\"!!componentSources.less\" heading=\"Less\">\n                <nui-copy-text\n                    fileContent=\"{{ componentSources.less }}\"\n                ></nui-copy-text>\n                <div class=\"media-body\">\n                    <nui-example-code\n                        *ngIf=\"!!componentSources.less; else noLess\"\n                        >{{ componentSources.less }}</nui-example-code\n                    >\n                    <ng-template #noLess>\n                        <nui-image image=\"no-data-to-show\"></nui-image>\n                    </ng-template>\n                </div>\n            </nui-tab>\n        </nui-tab-group>\n    </div>\n    <div class=\"nui-example-wrapper__content\">\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [".nui-example-wrapper__theme{display:inline-block}.nui-example-wrapper__content{background-color:var(--nui-color-bg-light,#fff)}.nui-example-wrapper__container{display:flex;flex-direction:column;border:1px solid;border-color:var(--nui-color-line-default,#d9d9d9);box-shadow:0 2px 2px #1111114d;margin-bottom:20px}.nui-example-wrapper__header{display:flex;flex-direction:row;background-color:var(--page-header-border-color,#d9d9d9);color:var(--nui-color-line-default,#d9d9d9);padding:5px 10px}.nui-example-wrapper__header button{outline:none}.nui-example-wrapper__title{flex-grow:1}.nui-example-wrapper__content{padding:20px}\n"], components: [{ type: i3.ButtonComponent, selector: "[nui-button]", inputs: ["displayStyle", "icon", "iconColor", "iconRight", "isBusy", "isEmpty", "ariaLabel", "isRepeat", "size"] }, { type: i4.TabGroupComponent, selector: "nui-tab-group", inputs: ["vertical"] }, { type: i5.TabComponent, selector: "nui-tab", inputs: ["heading", "disabled", "templateRef", "active"], outputs: ["selected", "deselected"] }, { type: i6.CopyTextComponent, selector: "nui-copy-text", inputs: ["fileContent"] }, { type: i7.ExampleCodeComponent, selector: "nui-example-code", inputs: ["language"] }, { type: i8.ImageComponent, selector: "nui-image", inputs: ["image", "description", "float", "margin", "isWatermark", "width", "height", "autoFill"] }], directives: [{ type: i9.TooltipDirective, selector: "[nuiTooltip]", inputs: ["tooltipPlacement", "nuiTooltipDisabled", "nuiTooltip"], exportAs: ["nuiTooltip"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ExampleWrapperComponent, decorators: [{
            type: Component,
            args: [{ selector: "nui-example-wrapper", providers: [SourcesService], template: "<div class=\"nui-example-wrapper__container\">\n    <div class=\"nui-example-wrapper__header\">\n        <h4 class=\"nui-example-wrapper__title\">{{ exampleTitle }}</h4>\n        <div>\n            <button\n                nui-button\n                type=\"button\"\n                displayStyle=\"action\"\n                icon=\"{{\n                    showSource ? 'double-caret-up' : 'double-caret-down'\n                }}\"\n                title=\"Show source\"\n                [nuiTooltip]=\"getTooltip()\"\n                tooltipPlacement=\"bottom\"\n                (click)=\"showSource = !showSource\"\n            ></button>\n            <button\n                nui-button\n                type=\"button\"\n                displayStyle=\"action\"\n                icon=\"external-link\"\n                title=\"Open in Plunker\"\n                nuiTooltip=\"Open in Plunker (only self-contained examples are opened properly)\"\n                tooltipPlacement=\"bottom\"\n                (click)=\"openPlunker()\"\n            ></button>\n        </div>\n    </div>\n    <div *ngIf=\"showSource\" class=\"nui-example-wrapper__source\">\n        <nui-tab-group>\n            <nui-tab *ngIf=\"!!componentSources.html\" heading=\"HTML\">\n                <div class=\"media-body\">\n                    <nui-copy-text\n                        fileContent=\"{{ componentSources.html }}\"\n                    ></nui-copy-text>\n                    <nui-example-code language=\"html\">{{\n                        componentSources.html\n                    }}</nui-example-code>\n                </div>\n            </nui-tab>\n            <nui-tab *ngIf=\"!!componentSources.ts\" heading=\"Typescript\">\n                <nui-copy-text\n                    fileContent=\"{{ componentSources.ts }}\"\n                ></nui-copy-text>\n                <div class=\"media-body\">\n                    <nui-example-code language=\"typescript\">{{\n                        componentSources.ts\n                    }}</nui-example-code>\n                </div>\n            </nui-tab>\n            <nui-tab *ngIf=\"!!componentSources.less\" heading=\"Less\">\n                <nui-copy-text\n                    fileContent=\"{{ componentSources.less }}\"\n                ></nui-copy-text>\n                <div class=\"media-body\">\n                    <nui-example-code\n                        *ngIf=\"!!componentSources.less; else noLess\"\n                        >{{ componentSources.less }}</nui-example-code\n                    >\n                    <ng-template #noLess>\n                        <nui-image image=\"no-data-to-show\"></nui-image>\n                    </ng-template>\n                </div>\n            </nui-tab>\n        </nui-tab-group>\n    </div>\n    <div class=\"nui-example-wrapper__content\">\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [".nui-example-wrapper__theme{display:inline-block}.nui-example-wrapper__content{background-color:var(--nui-color-bg-light,#fff)}.nui-example-wrapper__container{display:flex;flex-direction:column;border:1px solid;border-color:var(--nui-color-line-default,#d9d9d9);box-shadow:0 2px 2px #1111114d;margin-bottom:20px}.nui-example-wrapper__header{display:flex;flex-direction:row;background-color:var(--page-header-border-color,#d9d9d9);color:var(--nui-color-line-default,#d9d9d9);padding:5px 10px}.nui-example-wrapper__header button{outline:none}.nui-example-wrapper__title{flex-grow:1}.nui-example-wrapper__content{padding:20px}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.SourcesService }, { type: Document, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }, { type: i2.PlunkerProjectService }]; }, propDecorators: { filenamePrefix: [{
                type: Input
            }], exampleTitle: [{
                type: Input
            }], showSource: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 