@skyux/docs-tools 4.9.5 → 4.10.0

package/fesm2015/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';
@@ -131,7 +131,20 @@ let SkyDocsSourceCodeService = class SkyDocsSourceCodeService {
         return sourceCode
             .filter(file => file.filePath.indexOf(path) === 0)
             .map(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.
+            let 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;
         });
     }
@@ -235,7 +248,7 @@ let SkyDocsCodeExamplesEditorService = class SkyDocsCodeExamplesEditorService {
     }
     getPayload(codeExample) {
         const angularVersion = '^9.0.0';
-        const skyuxVersion = '*';
+        const skyuxVersion = '^4';
         const defaultDependencies = {
             '@angular/animations': angularVersion,
             '@angular/common': angularVersion,
@@ -266,6 +279,16 @@ let SkyDocsCodeExamplesEditorService = class SkyDocsCodeExamplesEditorService {
             'zone.js': '~0.11.4'
         };
         const 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 (const packageName in mergedDependencies) {
+            if (mergedDependencies.hasOwnProperty(packageName)) {
+                const version = mergedDependencies[packageName];
+                if (version === '*' && /^(@blackbaud\/skyux-lib-|@skyux)/.test(packageName)) {
+                    mergedDependencies[packageName] = skyuxVersion;
+                }
+            }
+        }
         const files = this.parseStackBlitzFiles(codeExample.sourceCode, mergedDependencies, codeExample.theme);
         return {
             files,
@@ -2814,7 +2837,7 @@ __decorate([
 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
         ],
@@ -2866,6 +2889,7 @@ SkyDocsDemoPageModule = __decorate([
         imports: [
             CommonModule,
             RouterModule,
+            SkyAlertModule,
             SkyCodeBlockModule,
             SkyCodeModule,
             SkyDocsDemoModule,