import * as tslib_1 from "tslib";
import { Component, Input, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
var CodeBoxComponent = /** @class */ (function () {
    function CodeBoxComponent() {
        /**
         * ts/js code
         * @default ''
         */
        this.tsCode = '';
        /**
         * html code
         * @default ''
         */
        this.htmlCode = '';
        /**
         * less/css code
         * @default ''
         */
        this.lessCode = '';
        /**
         * whether show source code
         * @docs-private
         */
        this.showSource = false;
        /**
         * whether show demo
         * @docs-private
         */
        this._showDemo = true;
    }
    /**
     * @docs-private
     */
    CodeBoxComponent.prototype.onToggleDemo = function () {
        this._showDemo = !this._showDemo;
    };
    /**
     * @docs-private
     * @param {MouseEvent} event - mouse event
     */
    CodeBoxComponent.prototype.onToggleViewSource = function (event) {
        this.showSource = !this.showSource;
        event.stopPropagation();
    };
    tslib_1.__decorate([
        Input(),
        tslib_1.__metadata("design:type", String)
    ], CodeBoxComponent.prototype, "tsCode", void 0);
    tslib_1.__decorate([
        Input(),
        tslib_1.__metadata("design:type", String)
    ], CodeBoxComponent.prototype, "htmlCode", void 0);
    tslib_1.__decorate([
        Input(),
        tslib_1.__metadata("design:type", String)
    ], CodeBoxComponent.prototype, "lessCode", void 0);
    CodeBoxComponent = tslib_1.__decorate([
        Component({
            selector: 'nb-code-box',
            template: "<div class=\"nb-codebox-title\" (click)=\"onToggleDemo()\"><ng-content select=\"[nb-codebox-title]\"></ng-content><div class=\"toggle-view-source\" nbTooltip=\"View Source\" placement=\"left\" hasArrow (click)=\"onToggleViewSource($event)\"><i class=\"iconfont icon-account-code\"></i></div></div><ng-container *ngIf=\"_showDemo\"><div class=\"nb-codebox-content\"><ng-content></ng-content></div><div class=\"nb-codebox-desc\"><ng-content select=\"[nb-codebox-desc]\"></ng-content></div><div class=\"nb-codebox-source\" *ngIf=\"showSource\"><nb-tabs underline><nb-tab title=\"HTML\" *ngIf=\"htmlCode && htmlCode.length\"><nb-code-highlighter linenumbers language=\"markup\" [rawCode]=\"htmlCode\"></nb-code-highlighter></nb-tab><nb-tab title=\"TS\" *ngIf=\"tsCode && tsCode.length\"><nb-code-highlighter linenumbers language=\"js\" [rawCode]=\"tsCode\"></nb-code-highlighter></nb-tab><nb-tab title=\"LESS\" *ngIf=\"lessCode && lessCode.length\"><nb-code-highlighter linenumbers language=\"css\" [rawCode]=\"lessCode\"></nb-code-highlighter></nb-tab></nb-tabs></div></ng-container>",
            encapsulation: ViewEncapsulation.None,
            changeDetection: ChangeDetectionStrategy.OnPush,
            preserveWhitespaces: true,
            host: {
                'class': 'nb-widget nb-codebox'
            },
            exportAs: 'nbCodeBox'
        })
    ], CodeBoxComponent);
    return CodeBoxComponent;
}());
export { CodeBoxComponent };
//# sourceMappingURL=code-box.js.map