@mantic-ui/angular-doc/fesm2022/mantic-ui-angular-doc.mjs

mantic UI Components for Documentation for Angular

import * as i0 from '@angular/core';
import { EventEmitter, Output, Input, Component, HostBinding, Injectable, makeEnvironmentProviders, NgModule } from '@angular/core';
import { SegmentComponent, ButtonComponent, SafePipe, HeaderDirective, TabComponent, TabGroupComponent, toBoolean } from '@mantic-ui/angular';
import * as i1 from 'ngx-highlightjs';
import { HighlightModule, HIGHLIGHT_OPTIONS } from 'ngx-highlightjs';
import { ReplaySubject } from 'rxjs';
import { map } from 'rxjs/operators';
import * as i1$1 from '@angular/common/http';

class ExampleCodeComponent extends SegmentComponent {
    get live() {
        return this.isLive;
    }
    set live(value) {
        this.isLive = this.toBoolean(value);
    }
    constructor() {
        super();
        this.isLive = false;
        this.languages = ['html'];
        this.liveClick = new EventEmitter();
        this.classes.register('label', 'code', 'languages');
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ExampleCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: ExampleCodeComponent, isStandalone: true, selector: "m-example-code", inputs: { label: "label", code: "code", languages: "languages", live: "live" }, outputs: { liveClick: "liveClick" }, providers: [...SegmentComponent.providers], usesInheritance: true, ngImport: i0, template: "@if (label) {\n  <div class=\"label\">{{label}}</div>\n}\n@if (live) {\n  <m-button class=\"live\" basic color=\"red\" m-flex alignItems=\"center\" title=\"See this example Live in action\" (click)=\"liveClick.emit($event)\">\n    <div class=\"circle\"></div>\n    Live\n  </m-button>\n}\n@if (code) {\n  <pre><code [highlight]=\"code\" [languages]=\"languages\"><ng-content></ng-content></code></pre>\n}\n", styles: [":host{position:relative;display:block}.live{position:absolute;top:0;right:0;margin:0}.live .circle{border-radius:50%;width:14px;height:14px;background-color:#db2828;margin-right:.5rem}.label{transform:translateY(-1em);font-size:.75em;font-weight:700}pre{margin:0;word-break:break-word}code{white-space:pre-wrap}code.hljs{background-color:initial;padding:initial}\n"], dependencies: [{ kind: "ngmodule", type: HighlightModule }, { kind: "directive", type: i1.Highlight, selector: "[highlight]", inputs: ["highlight", "languages", "lineNumbers"], outputs: ["highlighted"] }, { kind: "component", type: ButtonComponent, selector: "m-button", inputs: ["icon", "iconSize", "iconPosition", "social"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ExampleCodeComponent, decorators: [{
            type: Component,
            args: [{ selector: 'm-example-code', imports: [
                        HighlightModule,
                        ButtonComponent
                    ], providers: [...SegmentComponent.providers], template: "@if (label) {\n  <div class=\"label\">{{label}}</div>\n}\n@if (live) {\n  <m-button class=\"live\" basic color=\"red\" m-flex alignItems=\"center\" title=\"See this example Live in action\" (click)=\"liveClick.emit($event)\">\n    <div class=\"circle\"></div>\n    Live\n  </m-button>\n}\n@if (code) {\n  <pre><code [highlight]=\"code\" [languages]=\"languages\"><ng-content></ng-content></code></pre>\n}\n", styles: [":host{position:relative;display:block}.live{position:absolute;top:0;right:0;margin:0}.live .circle{border-radius:50%;width:14px;height:14px;background-color:#db2828;margin-right:.5rem}.label{transform:translateY(-1em);font-size:.75em;font-weight:700}pre{margin:0;word-break:break-word}code{white-space:pre-wrap}code.hljs{background-color:initial;padding:initial}\n"] }]
        }], ctorParameters: () => [], propDecorators: { label: [{
                type: Input
            }], code: [{
                type: Input
            }], languages: [{
                type: Input
            }], live: [{
                type: Input
            }], liveClick: [{
                type: Output
            }] } });

class ExampleDescriptionComponent {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ExampleDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: ExampleDescriptionComponent, isStandalone: true, selector: "m-example-description", ngImport: i0, template: "<ng-content />\r\n", styles: [""] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ExampleDescriptionComponent, decorators: [{
            type: Component,
            args: [{ selector: 'm-example-description', imports: [], template: "<ng-content />\r\n" }]
        }] });

class ExampleFrameComponent {
    constructor() {
        this.src = '';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ExampleFrameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: ExampleFrameComponent, isStandalone: true, selector: "m-example-frame", inputs: { src: "src" }, ngImport: i0, template: "<iframe [src]=\"src | mSafe\" class=\"ui segment\"></iframe>", styles: ["iframe.ui.segment{padding:0}\n"], dependencies: [{ kind: "pipe", type: SafePipe, name: "mSafe" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ExampleFrameComponent, decorators: [{
            type: Component,
            args: [{ selector: 'm-example-frame', imports: [
                        SafePipe
                    ], template: "<iframe [src]=\"src | mSafe\" class=\"ui segment\"></iframe>", styles: ["iframe.ui.segment{padding:0}\n"] }]
        }], propDecorators: { src: [{
                type: Input,
                args: [{ required: true }]
            }] } });

class ExampleComponent {
    constructor() {
        this.showCode = false;
        this.languages = ['html'];
        this.hintClass = 'black';
        this.hintTarget = '_blank';
    }
    get header() {
        return this.headerField;
    }
    set header(value) {
        this.headerField = value;
        this.refreshId();
    }
    toggleCode() {
        this.showCode = !this.showCode;
    }
    refreshId() {
        this.id = this.header ? this.header.replace(/[^a-zA-Z0-9]/g, '').toLocaleLowerCase() : undefined;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: ExampleComponent, isStandalone: true, selector: "m-example", inputs: { header: "header", description: "description", code: "code", showCode: "showCode", languages: "languages", hint: "hint", hintClass: "hintClass", hintLink: "hintLink", hintTarget: "hintTarget" }, host: { properties: { "id": "this.id" } }, ngImport: i0, template: "<div class=\"description\">\n    @if (header) {\n        <h4 m-header>\n            {{ header }}\n            @if (hint && !hintLink) {\n                <span class=\"ui {{hintClass}} label\">{{ hint }}</span>\n            }\n            @if (hint && hintLink) {\n                <a [href]=\"hintLink\" class=\"ui {{hintClass}} label\" [target]=\"hintTarget\">{{ hint }}</a>\n            }\n        </h4>\n    }\n    <ng-content select=\"m-example-description\">\n        @if (description) {\n            <p>{{ description }}</p>\n        }\n    </ng-content>\n    @if (code) {\n        <button class=\"show-code\" (click)=\"toggleCode()\">\n            <i class=\"icon code\"></i>\n        </button>\n    }\n</div>\n<div class=\"example-box\" [class.hide-code]=\"!showCode\">\n    <div class=\"header\">Example</div>\n    <div class=\"live\">\n        <ng-content />\n    </div>\n    @if (code) {\n        <code [highlight]=\"code\" [languages]=\"languages\"></code>\n    }\n</div>\n", styles: [":host{display:flex;flex-direction:column;position:relative}:host:not(:first-child){padding-top:2rem}:host:not(:last-child){padding-bottom:2rem}.description{position:relative}h4.ui.header{margin:0}p{margin-bottom:1em}.show-code{position:absolute;right:0;top:calc(100% - .5em);background-color:transparent;border:none;color:#000;font-size:1.5em;font-weight:700;transform:translateY(-100%)}.example-box{display:flex;border:1px solid #d4d4d5;border-radius:4px;background-color:#fff;flex-direction:column}.example-box::ng-deep m-info,.example-box::ng-deep m-warning,.example-box::ng-deep m-error{display:none}.example-box::ng-deep m-info code,.example-box::ng-deep m-warning code,.example-box::ng-deep m-error code{background-color:#00000014;border-radius:3px;display:inline-block;font-size:.875em;font-weight:700;padding:1px 6px;vertical-align:baseline}.example-box.hide-code{border:none}.example-box.hide-code .header,.example-box.hide-code code{display:none}.example-box.hide-code .live{border:none;padding:0}.example-box.hide-code .live::ng-deep m-info,.example-box.hide-code .live::ng-deep m-warning,.example-box.hide-code .live::ng-deep m-error{display:block}.example-box .header{background-color:#f8f8f8;padding:.75em 1em;flex:0 0 auto;font-size:.75em;font-weight:700;border-bottom:1px solid #d4d4d5;color:#0009}.live,code{flex:1;padding:1em}.live{border-bottom:1px solid #d4d4d5}code{white-space:pre-wrap}:host::ng-deep iframe{border:none;width:100%;height:350px}\n"], dependencies: [{ kind: "ngmodule", type: HighlightModule }, { kind: "directive", type: i1.Highlight, selector: "[highlight]", inputs: ["highlight", "languages", "lineNumbers"], outputs: ["highlighted"] }, { kind: "directive", type: HeaderDirective, selector: "[m-header]", inputs: ["dividing", "icon", "sub"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ExampleComponent, decorators: [{
            type: Component,
            args: [{ selector: 'm-example', imports: [
                        HighlightModule,
                        HeaderDirective
                    ], template: "<div class=\"description\">\n    @if (header) {\n        <h4 m-header>\n            {{ header }}\n            @if (hint && !hintLink) {\n                <span class=\"ui {{hintClass}} label\">{{ hint }}</span>\n            }\n            @if (hint && hintLink) {\n                <a [href]=\"hintLink\" class=\"ui {{hintClass}} label\" [target]=\"hintTarget\">{{ hint }}</a>\n            }\n        </h4>\n    }\n    <ng-content select=\"m-example-description\">\n        @if (description) {\n            <p>{{ description }}</p>\n        }\n    </ng-content>\n    @if (code) {\n        <button class=\"show-code\" (click)=\"toggleCode()\">\n            <i class=\"icon code\"></i>\n        </button>\n    }\n</div>\n<div class=\"example-box\" [class.hide-code]=\"!showCode\">\n    <div class=\"header\">Example</div>\n    <div class=\"live\">\n        <ng-content />\n    </div>\n    @if (code) {\n        <code [highlight]=\"code\" [languages]=\"languages\"></code>\n    }\n</div>\n", styles: [":host{display:flex;flex-direction:column;position:relative}:host:not(:first-child){padding-top:2rem}:host:not(:last-child){padding-bottom:2rem}.description{position:relative}h4.ui.header{margin:0}p{margin-bottom:1em}.show-code{position:absolute;right:0;top:calc(100% - .5em);background-color:transparent;border:none;color:#000;font-size:1.5em;font-weight:700;transform:translateY(-100%)}.example-box{display:flex;border:1px solid #d4d4d5;border-radius:4px;background-color:#fff;flex-direction:column}.example-box::ng-deep m-info,.example-box::ng-deep m-warning,.example-box::ng-deep m-error{display:none}.example-box::ng-deep m-info code,.example-box::ng-deep m-warning code,.example-box::ng-deep m-error code{background-color:#00000014;border-radius:3px;display:inline-block;font-size:.875em;font-weight:700;padding:1px 6px;vertical-align:baseline}.example-box.hide-code{border:none}.example-box.hide-code .header,.example-box.hide-code code{display:none}.example-box.hide-code .live{border:none;padding:0}.example-box.hide-code .live::ng-deep m-info,.example-box.hide-code .live::ng-deep m-warning,.example-box.hide-code .live::ng-deep m-error{display:block}.example-box .header{background-color:#f8f8f8;padding:.75em 1em;flex:0 0 auto;font-size:.75em;font-weight:700;border-bottom:1px solid #d4d4d5;color:#0009}.live,code{flex:1;padding:1em}.live{border-bottom:1px solid #d4d4d5}code{white-space:pre-wrap}:host::ng-deep iframe{border:none;width:100%;height:350px}\n"] }]
        }], propDecorators: { header: [{
                type: Input
            }], description: [{
                type: Input
            }], code: [{
                type: Input
            }], showCode: [{
                type: Input
            }], languages: [{
                type: Input
            }], id: [{
                type: HostBinding,
                args: ['id']
            }], hint: [{
                type: Input
            }], hintClass: [{
                type: Input
            }], hintLink: [{
                type: Input
            }], hintTarget: [{
                type: Input
            }] } });

const sortByPackageVersionAsc = (left, right) => left.version > right.version ? 1 : left.version < right.version ? -1 : 0;
const sortByPackageVersionDesc$1 = (left, right) => left.version > right.version ? -1 : left.version < right.version ? 1 : 0;

class NugetApiService {
    constructor(http) {
        this.http = http;
        this.cache = {};
    }
    find(packageName, version) {
        return this.get(packageName).pipe(map(infos => infos.filter(info => !version || info.version.startsWith(version))));
    }
    get(packageName) {
        packageName = packageName.toLowerCase();
        if (!this.cache[packageName]) {
            this.cache[packageName] = new ReplaySubject(1);
            this.http.get(`https://api.nuget.org/v3/registration5-gz-semver2/${packageName}/index.json`).subscribe(response => {
                const versions = [];
                for (let page of response.items) {
                    versions.push(...page.items.map(x => x.catalogEntry));
                }
                this.cache[packageName].next(versions.sort(sortByPackageVersionDesc$1));
            });
        }
        return this.cache[packageName].asObservable();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: NugetApiService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: NugetApiService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: NugetApiService, decorators: [{
            type: Injectable,
            args: [{
                    providedIn: 'root'
                }]
        }], ctorParameters: () => [{ type: i1$1.HttpClient }] });

class NugetInstallComponent {
    get package() {
        return this.packageValue;
    }
    set package(value) {
        this.packageValue = value;
        this.refreshVersion();
    }
    get searchVersion() {
        return this.searchVersionValue;
    }
    set searchVersion(value) {
        this.searchVersionValue = value;
        this.refreshVersion();
    }
    constructor(nugetApiService) {
        this.nugetApiService = nugetApiService;
    }
    refreshVersion() {
        if (!this.searchVersion || !this.package) {
            return;
        }
        this.nugetApiService.find(this.package, this.searchVersion).subscribe(versions => this.version = versions[0]?.version);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: NugetInstallComponent, deps: [{ token: NugetApiService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: NugetInstallComponent, isStandalone: true, selector: "m-nuget-install", inputs: { package: "package", version: "version", searchVersion: "searchVersion" }, ngImport: i0, template: "<m-tab-group>\n  <m-tab label=\"Package Manager\">\n    <pre><code><span class=\"ignore\">PM&gt;</span> Install-Package {{package}}@if (version) {\n    -Version {{version}}\n  }</code></pre>\n</m-tab>\n<m-tab label=\".NET CLI\">\n  <pre><code><span class=\"ignore\">&gt;</span> dotnet add package {{package}}@if (version) {\n  -version {{version}}\n}</code></pre>\n</m-tab>\n</m-tab-group>\n", styles: [":host{display:block;margin-bottom:1em}.ignore{-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "component", type: TabComponent, selector: "m-tab", inputs: ["name", "label", "icon", "iconSize", "template"], outputs: ["activate", "deactivate"] }, { kind: "component", type: TabGroupComponent, selector: "m-tab-group", inputs: ["menu", "pointing", "secondary", "loading", "selectByRoute", "selectedIndex", "noPadding", "scrollable"], outputs: ["selectedIndexChange"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: NugetInstallComponent, decorators: [{
            type: Component,
            args: [{ selector: 'm-nuget-install', imports: [
                        TabComponent,
                        TabGroupComponent
                    ], template: "<m-tab-group>\n  <m-tab label=\"Package Manager\">\n    <pre><code><span class=\"ignore\">PM&gt;</span> Install-Package {{package}}@if (version) {\n    -Version {{version}}\n  }</code></pre>\n</m-tab>\n<m-tab label=\".NET CLI\">\n  <pre><code><span class=\"ignore\">&gt;</span> dotnet add package {{package}}@if (version) {\n  -version {{version}}\n}</code></pre>\n</m-tab>\n</m-tab-group>\n", styles: [":host{display:block;margin-bottom:1em}.ignore{-webkit-user-select:none;user-select:none}\n"] }]
        }], ctorParameters: () => [{ type: NugetApiService }], propDecorators: { package: [{
                type: Input
            }], version: [{
                type: Input
            }], searchVersion: [{
                type: Input
            }] } });

class NugetComponent {
    get package() {
        return this.packageValue;
    }
    set package(value) {
        this.packageValue = value;
        this.refreshVersion();
    }
    get searchVersion() {
        return this.searchVersionValue;
    }
    set searchVersion(value) {
        this.searchVersionValue = value;
        this.refreshVersion();
    }
    constructor(nugetApiService) {
        this.nugetApiService = nugetApiService;
    }
    refreshVersion() {
        if (!this.searchVersion || !this.package) {
            return;
        }
        this.nugetApiService.find(this.package, this.searchVersion).subscribe(versions => this.version = versions[0]?.version);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: NugetComponent, deps: [{ token: NugetApiService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: NugetComponent, isStandalone: true, selector: "m-nuget", inputs: { package: "package", version: "version", searchVersion: "searchVersion" }, ngImport: i0, template: "<a href=\"https://www.nuget.org/packages/{{package}}/{{version}}\" target=\"_blank\">\n  {{package}}\n  @if (!version) {\n    <img src=\"https://img.shields.io/nuget/v/{{package}}.svg?style=flat\">\n  }\n  @if (version) {\n    <img src=\"https://img.shields.io/badge/nuget-v{{version}}-blue\">\n  }\n</a>\n", styles: ["a{display:inline-flex}img{margin-left:.25em}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: NugetComponent, decorators: [{
            type: Component,
            args: [{ selector: 'm-nuget', imports: [], template: "<a href=\"https://www.nuget.org/packages/{{package}}/{{version}}\" target=\"_blank\">\n  {{package}}\n  @if (!version) {\n    <img src=\"https://img.shields.io/nuget/v/{{package}}.svg?style=flat\">\n  }\n  @if (version) {\n    <img src=\"https://img.shields.io/badge/nuget-v{{version}}-blue\">\n  }\n</a>\n", styles: ["a{display:inline-flex}img{margin-left:.25em}\n"] }]
        }], ctorParameters: () => [{ type: NugetApiService }], propDecorators: { package: [{
                type: Input
            }], version: [{
                type: Input
            }], searchVersion: [{
                type: Input
            }] } });

class NpmApiService {
    constructor(http) {
        this.http = http;
        this.cache = {};
    }
    find(packageName, version) {
        return this.get(packageName).pipe(map(infos => infos.filter(info => !version || info.startsWith(version))));
    }
    get(packageName) {
        packageName = packageName.toLowerCase();
        if (!this.cache[packageName]) {
            this.cache[packageName] = new ReplaySubject(1);
            this.http.get(`https://registry.npmjs.org/${packageName}`).subscribe(response => {
                const versions = Object.keys(response.versions);
                this.cache[packageName].next(versions.sort(sortByPackageVersionDesc));
            });
        }
        return this.cache[packageName].asObservable();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: NpmApiService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: NpmApiService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: NpmApiService, decorators: [{
            type: Injectable,
            args: [{
                    providedIn: 'root'
                }]
        }], ctorParameters: () => [{ type: i1$1.HttpClient }] });
const sortByPackageVersionDesc = (left, right) => left > right ? -1 : left < right ? 1 : 0;

class NpmComponent {
    get package() {
        return this.packageValue;
    }
    set package(value) {
        this.packageValue = value;
        this.refreshVersion();
    }
    get searchVersion() {
        return this.searchVersionValue;
    }
    set searchVersion(value) {
        this.searchVersionValue = value;
        this.refreshVersion();
    }
    get npmLink() {
        return this.version ? `https://www.npmjs.com/package/${this.package}/v/${this.version}` : `https://www.npmjs.com/package/${this.package}`;
    }
    constructor(npmApiService) {
        this.npmApiService = npmApiService;
    }
    refreshVersion() {
        if (!this.searchVersion || !this.package) {
            return;
        }
        this.npmApiService.find(this.package, this.searchVersion).subscribe(versions => this.version = versions[0]);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: NpmComponent, deps: [{ token: NpmApiService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: NpmComponent, isStandalone: true, selector: "m-npm", inputs: { package: "package", version: "version", searchVersion: "searchVersion" }, ngImport: i0, template: "<a [href]=\"npmLink\" target=\"_blank\">\n  {{package}}\n  @if (!version) {\n    <img src=\"https://img.shields.io/npm/v/{{package}}.svg?style=flat\">\n  }\n  @if (version) {\n    <img src=\"https://img.shields.io/badge/npm-v{{version}}-blue\">\n  }\n</a>\n", styles: ["a{display:inline-flex}img{margin-left:.25em}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: NpmComponent, decorators: [{
            type: Component,
            args: [{ selector: 'm-npm', imports: [], template: "<a [href]=\"npmLink\" target=\"_blank\">\n  {{package}}\n  @if (!version) {\n    <img src=\"https://img.shields.io/npm/v/{{package}}.svg?style=flat\">\n  }\n  @if (version) {\n    <img src=\"https://img.shields.io/badge/npm-v{{version}}-blue\">\n  }\n</a>\n", styles: ["a{display:inline-flex}img{margin-left:.25em}\n"] }]
        }], ctorParameters: () => [{ type: NpmApiService }], propDecorators: { package: [{
                type: Input
            }], version: [{
                type: Input
            }], searchVersion: [{
                type: Input
            }] } });

class NpmInstallComponent {
    get package() {
        return this.packageValue;
    }
    set package(value) {
        this.packageValue = value;
        this.refreshVersion();
    }
    get searchVersion() {
        return this.searchVersionValue;
    }
    set searchVersion(value) {
        this.searchVersionValue = value;
        this.refreshVersion();
    }
    get dev() {
        return this.isDev;
    }
    set dev(value) {
        this.isDev = toBoolean(value);
    }
    constructor(nugetApiService) {
        this.nugetApiService = nugetApiService;
        this.isDev = false;
    }
    refreshVersion() {
        if (!this.searchVersion || !this.package) {
            return;
        }
        this.nugetApiService.find(this.package, this.searchVersion).subscribe(versions => this.version = versions[0]);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: NpmInstallComponent, deps: [{ token: NpmApiService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: NpmInstallComponent, isStandalone: true, selector: "m-npm-install", inputs: { package: "package", version: "version", searchVersion: "searchVersion", dev: "dev" }, ngImport: i0, template: "<m-segment>\n    <pre><code><span class=\"ignore\">&gt;</span> npm i {{ package }}{{ version ? '@' + version : '' }} {{ dev ? '--save-dev' : '' }}</code></pre>\n</m-segment>\n", styles: [":host{display:block;margin-bottom:1em}.ignore{-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "component", type: SegmentComponent, selector: "m-segment", inputs: ["raised", "vertical", "placeholder", "secondary", "tertiary", "attached", "noPadding", "noMargin"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: NpmInstallComponent, decorators: [{
            type: Component,
            args: [{ selector: 'm-npm-install', imports: [
                        SegmentComponent
                    ], template: "<m-segment>\n    <pre><code><span class=\"ignore\">&gt;</span> npm i {{ package }}{{ version ? '@' + version : '' }} {{ dev ? '--save-dev' : '' }}</code></pre>\n</m-segment>\n", styles: [":host{display:block;margin-bottom:1em}.ignore{-webkit-user-select:none;user-select:none}\n"] }]
        }], ctorParameters: () => [{ type: NpmApiService }], propDecorators: { package: [{
                type: Input
            }], version: [{
                type: Input
            }], searchVersion: [{
                type: Input
            }], dev: [{
                type: Input
            }] } });

function provideHighlightJs() {
    return makeEnvironmentProviders([
        {
            provide: HIGHLIGHT_OPTIONS,
            useValue: {
                coreLibraryLoader: () => import('highlight.js/lib/core'),
                languages: getHighlightLanguages()
            }
        }
    ]);
}
function getHighlightLanguages() {
    return {
        cs: () => import('highlight.js/lib/languages/csharp'),
        css: () => import('highlight.js/lib/languages/css'),
        html: () => import('highlight.js/lib/languages/xml'),
        js: () => import('highlight.js/lib/languages/javascript'),
        scss: () => import('highlight.js/lib/languages/scss'),
        ts: () => import('highlight.js/lib/languages/typescript'),
        json: () => import('highlight.js/lib/languages/json')
    };
}

const standalone = [
    ExampleComponent,
    ExampleCodeComponent,
    ExampleFrameComponent,
    NugetComponent,
    NugetInstallComponent,
    NpmComponent,
    NpmInstallComponent
];
class ManticUiDocModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ManticUiDocModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: ManticUiDocModule, imports: [ExampleComponent,
            ExampleCodeComponent,
            ExampleFrameComponent,
            NugetComponent,
            NugetInstallComponent,
            NpmComponent,
            NpmInstallComponent], exports: [ExampleComponent,
            ExampleCodeComponent,
            ExampleFrameComponent,
            NugetComponent,
            NugetInstallComponent,
            NpmComponent,
            NpmInstallComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ManticUiDocModule, imports: [ExampleComponent,
            ExampleCodeComponent,
            NugetInstallComponent,
            NpmInstallComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ManticUiDocModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [
                        ...standalone
                    ],
                    exports: [
                        ...standalone
                    ]
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { ExampleCodeComponent, ExampleComponent, ExampleDescriptionComponent, ExampleFrameComponent, ManticUiDocModule, NpmComponent, NpmInstallComponent, NugetComponent, NugetInstallComponent, getHighlightLanguages, provideHighlightJs };
//# sourceMappingURL=mantic-ui-angular-doc.mjs.map