@skyux/docs-tools 5.0.0-beta.8 → 5.0.0-beta.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/skyux-docs-tools.umd.js +15 -10
- package/bundles/skyux-docs-tools.umd.js.map +1 -1
- package/documentation.json +778 -743
- package/esm2015/modules/code-examples/code-example.js +1 -1
- package/esm2015/modules/code-examples/code-examples-editor.service.js +17 -23
- package/esm2015/modules/code-examples/code-examples.component.js +6 -2
- package/fesm2015/skyux-docs-tools.js +22 -24
- package/fesm2015/skyux-docs-tools.js.map +1 -1
- package/modules/code-examples/code-example.d.ts +1 -0
- package/modules/code-examples/code-examples.component.d.ts +2 -1
- package/package.json +1 -1
|
@@ -303,7 +303,7 @@
|
|
|
303
303
|
}
|
|
304
304
|
}
|
|
305
305
|
}
|
|
306
|
-
var files = this.parseStackBlitzFiles(codeExample.sourceCode, mergedDependencies, codeExample.theme);
|
|
306
|
+
var files = this.parseStackBlitzFiles(codeExample.sourceCode, mergedDependencies, codeExample.theme, codeExample.stylesheets);
|
|
307
307
|
return {
|
|
308
308
|
files: files,
|
|
309
309
|
title: 'SKY UX Demo',
|
|
@@ -317,16 +317,16 @@
|
|
|
317
317
|
}
|
|
318
318
|
};
|
|
319
319
|
};
|
|
320
|
-
SkyDocsCodeExamplesEditorService.prototype.parseStackBlitzFiles = function (sourceCode, dependencies, theme) {
|
|
320
|
+
SkyDocsCodeExamplesEditorService.prototype.parseStackBlitzFiles = function (sourceCode, dependencies, theme, stylesheets) {
|
|
321
321
|
var _this = this;
|
|
322
|
+
if (stylesheets === void 0) { stylesheets = []; }
|
|
322
323
|
var srcPath = 'src/';
|
|
323
324
|
var appPath = srcPath + "app/";
|
|
324
325
|
var banner = "/**\n * This file is needed for the StackBlitz demo only.\n * It is automatically provided when using the Angular CLI.\n **/\n ";
|
|
325
326
|
var moduleImportStatements = [
|
|
326
|
-
"import {\n
|
|
327
|
+
"import {\n NgModule\n} from '@angular/core';",
|
|
327
328
|
"import {\n FormsModule,\n ReactiveFormsModule\n} from '@angular/forms';",
|
|
328
|
-
"import {\n
|
|
329
|
-
"import {\n BrowserModule\n} from '@angular/platform-browser';",
|
|
329
|
+
"import {\n BrowserAnimationsModule\n} from '@angular/platform-browser/animations';",
|
|
330
330
|
"import {\n RouterModule\n} from '@angular/router';",
|
|
331
331
|
"import {\n SkyAppLocaleProvider\n} from '@skyux/i18n';",
|
|
332
332
|
"import {\n SkyThemeService\n} from '@skyux/theme';",
|
|
@@ -334,7 +334,7 @@
|
|
|
334
334
|
"import {\n AppComponent\n} from './app.component';"
|
|
335
335
|
];
|
|
336
336
|
var moduleImports = [
|
|
337
|
-
'
|
|
337
|
+
'BrowserAnimationsModule',
|
|
338
338
|
'FormsModule',
|
|
339
339
|
'ReactiveFormsModule',
|
|
340
340
|
'RouterModule.forRoot([])'
|
|
@@ -354,13 +354,14 @@
|
|
|
354
354
|
moduleImportStatements.push("import {\n " + moduleName + "\n} from '" + importPath + "';");
|
|
355
355
|
}
|
|
356
356
|
});
|
|
357
|
-
files[appPath + "app.component.ts"] = banner + "\nimport {\n Component,\n Renderer2\n} from '@angular/core';\n\nimport {\n SkyTheme,\n SkyThemeMode,\n SkyThemeService,\n SkyThemeSettings\n} from '@skyux/theme';\n\n@Component({\n selector: 'sky-demo-app',\n template: '" + appComponentTemplate + "'\n})\nexport class AppComponent {\n\n constructor(\n themeSvc: SkyThemeService,\n renderer?: Renderer2\n ) {\n
|
|
357
|
+
files[appPath + "app.component.ts"] = banner + "\nimport {\n Component,\n Renderer2\n} from '@angular/core';\n\nimport {\n SkyTheme,\n SkyThemeMode,\n SkyThemeService,\n SkyThemeSettings\n} from '@skyux/theme';\n\n@Component({\n selector: 'sky-demo-app',\n template: '" + appComponentTemplate + "'\n})\nexport class AppComponent {\n\n constructor(\n themeSvc: SkyThemeService,\n renderer?: Renderer2\n ) {\n const themeSettings = new SkyThemeSettings(\n SkyTheme.presets['" + (theme === exports.SkyDocsCodeExampleTheme.Modern ? 'modern' : 'default') + "'],\n SkyThemeMode.presets.light\n );\n\n themeSvc.init(\n document.body,\n renderer,\n themeSettings\n );\n }\n\n}";
|
|
358
358
|
files[appPath + "app.module.ts"] = moduleImportStatements.join('\n\n') + "\n\n@NgModule({\n imports: [\n " + moduleImports.join(',\n ') + "\n ],\n declarations: [\n AppComponent\n ],\n bootstrap: [\n AppComponent\n ],\n providers: [\n SkyThemeService,\n {\n provide: SkyAppLocaleProvider,\n useValue: {\n getLocaleInfo: () => observableOf({\n locale: 'en-US'\n })\n }\n }\n ]\n})\nexport class AppModule { }\n";
|
|
359
359
|
files[srcPath + "index.html"] = "<!--\n The CSS links are needed for the StackBlitz demo only.\n This is a workaround for a known bug that prevents external imports in CSS.\n https://github.com/stackblitz/core/issues/133\n-->\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css\" />" + (theme === exports.SkyDocsCodeExampleTheme.Modern ? "<link rel=\"stylesheet\" type=\"text/css\" href=\"https://sky.blackbaudcdn.net/static/skyux-icons/5.0.0/assets/css/skyux-icons.min.css\" />" : "") + "\n\n<sky-demo-app>\n Loading...\n</sky-demo-app>";
|
|
360
|
-
files[srcPath + "main.ts"] = banner + "\nimport './polyfills';\n\nimport {\n
|
|
360
|
+
files[srcPath + "main.ts"] = banner + "\nimport './polyfills';\n\nimport {\n platformBrowserDynamic\n} from '@angular/platform-browser-dynamic';\n\nimport {\n AppModule\n} from './app/app.module';\n\nplatformBrowserDynamic().bootstrapModule(AppModule).then(ref => {\n if (window['ngRef']) {\n window['ngRef'].destroy();\n }\n\n window['ngRef'] = ref;\n}).catch(err => console.error(err));\n";
|
|
361
361
|
files[srcPath + "polyfills.ts"] = banner + "\nimport 'zone.js';\n";
|
|
362
362
|
files[srcPath + "styles.scss"] = "@import '~@skyux/theme/css/sky';\n" + (theme === exports.SkyDocsCodeExampleTheme.Modern ? "@import '~@skyux/theme/css/themes/modern/styles';" : "") + "\nbody {\n background-color: #fff;\n margin: 15px;\n}";
|
|
363
|
-
|
|
363
|
+
stylesheets.push("src/styles.scss");
|
|
364
|
+
files['angular.json'] = "{\n \"projects\": {\n \"demo\": {\n \"architect\": {\n \"build\": {\n \"options\": {\n \"index\": \"src/index.html\",\n \"styles\": " + JSON.stringify(stylesheets) + "\n }\n }\n }\n }\n }\n}";
|
|
364
365
|
files['package.json'] = JSON.stringify({
|
|
365
366
|
dependencies: dependencies
|
|
366
367
|
}, undefined, 2);
|
|
@@ -480,6 +481,7 @@
|
|
|
480
481
|
function SkyDocsCodeExamplesComponent(editorService, sourceCodeService) {
|
|
481
482
|
this.editorService = editorService;
|
|
482
483
|
this.sourceCodeService = sourceCodeService;
|
|
484
|
+
this.stylesheets = [];
|
|
483
485
|
this.codeExamples = [];
|
|
484
486
|
}
|
|
485
487
|
Object.defineProperty(SkyDocsCodeExamplesComponent.prototype, "packageDependencies", {
|
|
@@ -513,6 +515,7 @@
|
|
|
513
515
|
heading: component.heading,
|
|
514
516
|
packageDependencies: _this.packageDependencies,
|
|
515
517
|
sourceCode: sourceCode,
|
|
518
|
+
stylesheets: _this.stylesheets,
|
|
516
519
|
theme: component.theme
|
|
517
520
|
});
|
|
518
521
|
});
|
|
@@ -538,7 +541,7 @@
|
|
|
538
541
|
return SkyDocsCodeExamplesComponent;
|
|
539
542
|
}());
|
|
540
543
|
SkyDocsCodeExamplesComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDocsCodeExamplesComponent, deps: [{ token: SkyDocsCodeExamplesEditorService }, { token: SkyDocsSourceCodeService }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
541
|
-
SkyDocsCodeExamplesComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: SkyDocsCodeExamplesComponent, selector: "sky-docs-code-examples", inputs: { packageDependencies: "packageDependencies" }, queries: [{ propertyName: "codeExampleComponents", predicate: SkyDocsCodeExampleComponent }], ngImport: i0__namespace, template: "<div *ngIf=\"codeExamples && codeExamples.length\"\n class=\"sky-docs-code-examples\"\n>\n <sky-repeater *ngIf=\"codeExamples.length > 1 else singleCodeExample\"\n expandMode=\"multiple\"\n >\n <sky-repeater-item *ngFor=\"let codeExample of codeExamples\"\n [isExpanded]=\"false\"\n >\n <sky-repeater-item-title>\n <ng-container *ngTemplateOutlet=\"codeExampleHeaderTemplate; context: {$implicit: codeExample}\">\n </ng-container>\n </sky-repeater-item-title>\n <sky-repeater-item-content>\n <ng-container *ngTemplateOutlet=\"codeExampleTemplate; context: {$implicit: codeExample}\">\n </ng-container>\n </sky-repeater-item-content>\n </sky-repeater-item>\n </sky-repeater>\n</div>\n\n<ng-template>\n <ng-content\n select=\"sky-docs-code-example\"\n >\n </ng-content>\n</ng-template>\n\n<ng-template\n let-item\n #codeExampleTemplate\n>\n <div class=\"sky-docs-code-example-wrapper\">\n <sky-vertical-tabset *ngIf=\"item.sourceCode && item.sourceCode.length\">\n <sky-vertical-tab *ngFor=\"let file of item.sourceCode; let i = index;\"\n [active]=\"i === 0\"\n [tabHeading]=\"file.fileName\"\n >\n <sky-code-block\n [code]=\"file.rawContents\"\n [languageType]=\"parseCodeLanguageType(file.fileName)\"\n >\n </sky-code-block>\n </sky-vertical-tab>\n </sky-vertical-tabset>\n </div>\n</ng-template>\n\n<ng-template\n #singleCodeExample\n>\n <ng-container *ngTemplateOutlet=\"codeExampleHeaderTemplate; context: {$implicit: codeExamples[0]}\">\n </ng-container>\n <ng-container *ngTemplateOutlet=\"codeExampleTemplate; context: {$implicit: codeExamples[0]}\">\n </ng-container>\n</ng-template>\n\n<ng-template\n let-codeExample\n #codeExampleHeaderTemplate\n>\n <div\n class=\"sky-docs-code-example-header\"\n >\n <div\n class=\"sky-docs-code-example-header-title sky-emphasized\"\n >\n {{ codeExample.heading }}\n </div>\n <div\n class=\"sky-docs-code-example-header-controls\"\n >\n <button\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n (click)=\"launchEditor(codeExample);$event.stopPropagation();\"\n >\n <sky-icon\n icon=\"pencil\"\n ></sky-icon>\n {{ 'sky-docs-code-example-launch-button-label' | skyLibResources }}\n </button>\n </div>\n </div>\n</ng-template>", styles: [".sky-docs-code-example-header{display:flex;align-items:baseline}.sky-docs-code-example-header-title{flex-grow:1}.sky-docs-code-example-header-controls{flex-grow:0}.sky-docs-code-example-header-controls .sky-btn{font-weight:normal}.sky-docs-code-example-wrapper{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;margin-top:10px}.sky-docs-code-example-wrapper ::ng-deep .sky-vertical-tabset-content{margin:0}.sky-docs-code-example-wrapper ::ng-deep sky-code-block{margin:0!important}.sky-docs-code-example-wrapper ::ng-deep .sky-code-block-header{border:0}.sky-docs-code-example-wrapper ::ng-deep .sky-code-output{border-left:0;border-right:0;border-bottom:0}\n"], components: [{ type: i3__namespace.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { type: i3__namespace.λ10, selector: "sky-repeater-item", inputs: ["inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { type: i3__namespace.λ12, selector: "sky-repeater-item-title" }, { type: i3__namespace.λ8, selector: "sky-repeater-item-content" }, { type: i4__namespace.λ6, selector: "sky-vertical-tabset", inputs: ["showTabsText", "ariaRole", "maintainTabContent"], outputs: ["activeChange"] }, { type: i4__namespace.λ4, selector: "sky-vertical-tab", inputs: ["active", "ariaControls", "ariaInvalid", "ariaRequired", "ariaRole", "disabled", "errorIndicator", "tabHeaderCount", "tabHeading", "showTabRightArrow", "tabId"] }, { type: i3__namespace$1.λ2, selector: "sky-code-block", inputs: ["code", "fileName", "languageType", "hideCopyToClipboard", "hideHeader"] }, { type: i1__namespace$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "skyLibResources": i8__namespace.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
|
|
544
|
+
SkyDocsCodeExamplesComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: SkyDocsCodeExamplesComponent, selector: "sky-docs-code-examples", inputs: { packageDependencies: "packageDependencies", stylesheets: "stylesheets" }, queries: [{ propertyName: "codeExampleComponents", predicate: SkyDocsCodeExampleComponent }], ngImport: i0__namespace, template: "<div *ngIf=\"codeExamples && codeExamples.length\"\n class=\"sky-docs-code-examples\"\n>\n <sky-repeater *ngIf=\"codeExamples.length > 1 else singleCodeExample\"\n expandMode=\"multiple\"\n >\n <sky-repeater-item *ngFor=\"let codeExample of codeExamples\"\n [isExpanded]=\"false\"\n >\n <sky-repeater-item-title>\n <ng-container *ngTemplateOutlet=\"codeExampleHeaderTemplate; context: {$implicit: codeExample}\">\n </ng-container>\n </sky-repeater-item-title>\n <sky-repeater-item-content>\n <ng-container *ngTemplateOutlet=\"codeExampleTemplate; context: {$implicit: codeExample}\">\n </ng-container>\n </sky-repeater-item-content>\n </sky-repeater-item>\n </sky-repeater>\n</div>\n\n<ng-template>\n <ng-content\n select=\"sky-docs-code-example\"\n >\n </ng-content>\n</ng-template>\n\n<ng-template\n let-item\n #codeExampleTemplate\n>\n <div class=\"sky-docs-code-example-wrapper\">\n <sky-vertical-tabset *ngIf=\"item.sourceCode && item.sourceCode.length\">\n <sky-vertical-tab *ngFor=\"let file of item.sourceCode; let i = index;\"\n [active]=\"i === 0\"\n [tabHeading]=\"file.fileName\"\n >\n <sky-code-block\n [code]=\"file.rawContents\"\n [languageType]=\"parseCodeLanguageType(file.fileName)\"\n >\n </sky-code-block>\n </sky-vertical-tab>\n </sky-vertical-tabset>\n </div>\n</ng-template>\n\n<ng-template\n #singleCodeExample\n>\n <ng-container *ngTemplateOutlet=\"codeExampleHeaderTemplate; context: {$implicit: codeExamples[0]}\">\n </ng-container>\n <ng-container *ngTemplateOutlet=\"codeExampleTemplate; context: {$implicit: codeExamples[0]}\">\n </ng-container>\n</ng-template>\n\n<ng-template\n let-codeExample\n #codeExampleHeaderTemplate\n>\n <div\n class=\"sky-docs-code-example-header\"\n >\n <div\n class=\"sky-docs-code-example-header-title sky-emphasized\"\n >\n {{ codeExample.heading }}\n </div>\n <div\n class=\"sky-docs-code-example-header-controls\"\n >\n <button\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n (click)=\"launchEditor(codeExample);$event.stopPropagation();\"\n >\n <sky-icon\n icon=\"pencil\"\n ></sky-icon>\n {{ 'sky-docs-code-example-launch-button-label' | skyLibResources }}\n </button>\n </div>\n </div>\n</ng-template>", styles: [".sky-docs-code-example-header{display:flex;align-items:baseline}.sky-docs-code-example-header-title{flex-grow:1}.sky-docs-code-example-header-controls{flex-grow:0}.sky-docs-code-example-header-controls .sky-btn{font-weight:normal}.sky-docs-code-example-wrapper{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;margin-top:10px}.sky-docs-code-example-wrapper ::ng-deep .sky-vertical-tabset-content{margin:0}.sky-docs-code-example-wrapper ::ng-deep sky-code-block{margin:0!important}.sky-docs-code-example-wrapper ::ng-deep .sky-code-block-header{border:0}.sky-docs-code-example-wrapper ::ng-deep .sky-code-output{border-left:0;border-right:0;border-bottom:0}\n"], components: [{ type: i3__namespace.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { type: i3__namespace.λ10, selector: "sky-repeater-item", inputs: ["inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { type: i3__namespace.λ12, selector: "sky-repeater-item-title" }, { type: i3__namespace.λ8, selector: "sky-repeater-item-content" }, { type: i4__namespace.λ6, selector: "sky-vertical-tabset", inputs: ["showTabsText", "ariaRole", "maintainTabContent"], outputs: ["activeChange"] }, { type: i4__namespace.λ4, selector: "sky-vertical-tab", inputs: ["active", "ariaControls", "ariaInvalid", "ariaRequired", "ariaRole", "disabled", "errorIndicator", "tabHeaderCount", "tabHeading", "showTabRightArrow", "tabId"] }, { type: i3__namespace$1.λ2, selector: "sky-code-block", inputs: ["code", "fileName", "languageType", "hideCopyToClipboard", "hideHeader"] }, { type: i1__namespace$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "skyLibResources": i8__namespace.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
|
|
542
545
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDocsCodeExamplesComponent, decorators: [{
|
|
543
546
|
type: i0.Component,
|
|
544
547
|
args: [{
|
|
@@ -549,6 +552,8 @@
|
|
|
549
552
|
}]
|
|
550
553
|
}], ctorParameters: function () { return [{ type: SkyDocsCodeExamplesEditorService }, { type: SkyDocsSourceCodeService }]; }, propDecorators: { packageDependencies: [{
|
|
551
554
|
type: i0.Input
|
|
555
|
+
}], stylesheets: [{
|
|
556
|
+
type: i0.Input
|
|
552
557
|
}], codeExampleComponents: [{
|
|
553
558
|
type: i0.ContentChildren,
|
|
554
559
|
args: [SkyDocsCodeExampleComponent]
|