@skyux/docs-tools 4.9.5 → 4.10.0

package/fesm5/skyux-docs-tools.js

@@ -4,7 +4,7 @@ import { Input, Component, ChangeDetectionStrategy, ContentChildren, NgModule, I
 import { SkyImageModule } from '@blackbaud/skyux-lib-media';
 import { SkyFluidGridModule, SkyDefinitionListModule } from '@skyux/layout';
 import { SkyCodeBlockModule, SkyCodeModule } from '@blackbaud/skyux-lib-code-block';
-import { SkyIconModule, SkyHelpInlineModule } from '@skyux/indicators';
+import { SkyIconModule, SkyHelpInlineModule, SkyAlertModule } from '@skyux/indicators';
 import { SkyRepeaterModule } from '@skyux/lists';
 import { SkyVerticalTabsetModule, SkyTabsModule } from '@skyux/tabs';
 import { getStringForLocale, SKY_LIB_RESOURCES_PROVIDERS, SkyI18nModule } from '@skyux/i18n';
@@ -145,7 +145,20 @@ var SkyDocsSourceCodeService = /** @class */ (function () {
         return sourceCode
             .filter(function (file) { return file.filePath.indexOf(path) === 0; })
             .map(function (file) {
-            file.rawContents = decodeURIComponent(file.rawContents);
+            // TODO: Remove decoding after migrating to Angular CLI. Code examples will not be encoded for SKY UX 5 libraries.
+            // SKY UX 4 libraries will return rawContents encoded, while later libraries will
+            // return rawContents decoded. Check if the contents need decoded before returning them.
+            var decodedContents;
+            try {
+                decodedContents = decodeURIComponent(file.rawContents);
+                if (decodedContents !== file.rawContents) {
+                    file.rawContents = decodedContents;
+                }
+            }
+            catch (error) {
+                // Pre-decoded contents may contain characters like '%' that would throw errors.
+                // In these cases, pass along the original rawContents.
+            }
             return file;
         });
     };
@@ -261,7 +274,7 @@ var SkyDocsCodeExamplesEditorService = /** @class */ (function () {
     };
     SkyDocsCodeExamplesEditorService.prototype.getPayload = function (codeExample) {
         var angularVersion = '^9.0.0';
-        var skyuxVersion = '*';
+        var skyuxVersion = '^4';
         var defaultDependencies = {
             '@angular/animations': angularVersion,
             '@angular/common': angularVersion,
@@ -292,6 +305,16 @@ var SkyDocsCodeExamplesEditorService = /** @class */ (function () {
             'zone.js': '~0.11.4'
         };
         var mergedDependencies = Object.assign({}, defaultDependencies, codeExample.packageDependencies);
+        // Ensure any @skyux dependencies list the correct version of SKY UX.
+        // e.g. `"@skyux/core": "*"` --> `"@skyux/core": "4.0.0"`
+        for (var packageName in mergedDependencies) {
+            if (mergedDependencies.hasOwnProperty(packageName)) {
+                var version = mergedDependencies[packageName];
+                if (version === '*' && /^(@blackbaud\/skyux-lib-|@skyux)/.test(packageName)) {
+                    mergedDependencies[packageName] = skyuxVersion;
+                }
+            }
+        }
         var files = this.parseStackBlitzFiles(codeExample.sourceCode, mergedDependencies, codeExample.theme);
         return {
             files: files,
@@ -2916,7 +2939,7 @@ var SkyDocsDemoPageComponent = /** @class */ (function () {
     SkyDocsDemoPageComponent = __decorate([
         Component({
             selector: 'sky-docs-demo-page',
-            template: "<div class=\"sky-docs-demo-page\">\n  <stache\n    layout=\"sidebar\"\n    [pageTitle]=\"pageTitle\"\n    [showBreadcrumbs]=\"false\"\n    [showTableOfContents]=\"false\"\n    [sidebarRoutes]=\"sidebarRoutes\"\n  >\n    <ng-content\n      select=\"sky-docs-demo-page-summary\"\n    ></ng-content>\n\n    <ng-content\n      select=\"sky-docs-demo\"\n    ></ng-content>\n\n    <div\n      class=\"sky-docs-demo-page-main\"\n    >\n      <sky-tabset *ngIf=\"enableTabLayout else content\"\n        permalinkId=\"docs\"\n      >\n        <sky-tab tabHeading=\"Design\">\n          <ng-content\n            select=\"sky-docs-design-guidelines\"\n          ></ng-content>\n        </sky-tab>\n\n        <sky-tab tabHeading=\"Development\">\n          <ng-container\n            [ngTemplateOutlet]=\"content\"\n          ></ng-container>\n        </sky-tab>\n      </sky-tabset>\n    </div>\n  </stache>\n</div>\n\n<ng-template #content>\n  <sky-docs-demo-page-section *ngIf=\"moduleName\"\n    heading=\"Installation\"\n  >\n    <sky-docs-module-info\n      [gitRepoUrl]=\"gitRepoUrl\"\n      [moduleName]=\"moduleName\"\n      [packageName]=\"packageName\"\n      [packageUrl]=\"packageUrl\"\n    >\n      <ng-content\n        select=\"sky-docs-demo-page-module-info\"\n      ></ng-content>\n    </sky-docs-module-info>\n  </sky-docs-demo-page-section>\n\n  <ng-content></ng-content>\n\n  <sky-docs-demo-page-type-definitions\n    [moduleSourceCodePath]=\"moduleSourceCodePath\"\n  >\n  </sky-docs-demo-page-type-definitions>\n\n  <sky-docs-demo-page-section *ngIf=\"enableCodeExamples\"\n    heading=\"Code examples\"\n  >\n    <ng-content\n      select=\"sky-docs-code-examples\"\n    ></ng-content>\n  </sky-docs-demo-page-section>\n</ng-template>",
+            template: "<div class=\"sky-docs-demo-page\">\n  <stache\n    layout=\"sidebar\"\n    [pageTitle]=\"pageTitle\"\n    [showBreadcrumbs]=\"false\"\n    [showTableOfContents]=\"false\"\n    [sidebarRoutes]=\"sidebarRoutes\"\n  >\n    <sky-alert alertType=\"warning\">\n      This site describes an older version of the SKY UX framework, and we strongly recommend using the most recent version. For more information, see the <a href=\"https://developer.blackbaud.com/skyux\">primary SKY UX website</a>.\n    </sky-alert>\n\n    <ng-content\n      select=\"sky-docs-demo-page-summary\"\n    ></ng-content>\n\n    <ng-content\n      select=\"sky-docs-demo\"\n    ></ng-content>\n\n    <div\n      class=\"sky-docs-demo-page-main\"\n    >\n      <sky-tabset *ngIf=\"enableTabLayout else content\"\n        permalinkId=\"docs\"\n      >\n        <sky-tab tabHeading=\"Design\">\n          <ng-content\n            select=\"sky-docs-design-guidelines\"\n          ></ng-content>\n        </sky-tab>\n\n        <sky-tab tabHeading=\"Development\">\n          <ng-container\n            [ngTemplateOutlet]=\"content\"\n          ></ng-container>\n        </sky-tab>\n      </sky-tabset>\n    </div>\n  </stache>\n</div>\n\n<ng-template #content>\n  <sky-docs-demo-page-section *ngIf=\"moduleName\"\n    heading=\"Installation\"\n  >\n    <sky-docs-module-info\n      [gitRepoUrl]=\"gitRepoUrl\"\n      [moduleName]=\"moduleName\"\n      [packageName]=\"packageName\"\n      [packageUrl]=\"packageUrl\"\n    >\n      <ng-content\n        select=\"sky-docs-demo-page-module-info\"\n      ></ng-content>\n    </sky-docs-module-info>\n  </sky-docs-demo-page-section>\n\n  <ng-content></ng-content>\n\n  <sky-docs-demo-page-type-definitions\n    [moduleSourceCodePath]=\"moduleSourceCodePath\"\n  >\n  </sky-docs-demo-page-type-definitions>\n\n  <sky-docs-demo-page-section *ngIf=\"enableCodeExamples\"\n    heading=\"Code examples\"\n  >\n    <ng-content\n      select=\"sky-docs-code-examples\"\n    ></ng-content>\n  </sky-docs-demo-page-section>\n</ng-template>\n",
             providers: [
                 SkyDocsDemoPageDomAdapterService
             ],
@@ -2975,6 +2998,7 @@ var SkyDocsDemoPageModule = /** @class */ (function () {
             imports: [
                 CommonModule,
                 RouterModule,
+                SkyAlertModule,
                 SkyCodeBlockModule,
                 SkyCodeModule,
                 SkyDocsDemoModule,