@skyux/docs-tools 6.0.0-beta.2 → 6.0.0-beta.5

package/fesm2020/skyux-docs-tools.mjs

@@ -5,7 +5,7 @@ import { Component, ChangeDetectionStrategy, Input, ContentChildren, NgModule, O
 import * as i2$2 from '@blackbaud/skyux-lib-media';
 import { SkyImageModule } from '@blackbaud/skyux-lib-media';
 import * as i2$1 from '@skyux/layout';
-import { SkyFluidGridModule, SkyDefinitionListModule } from '@skyux/layout';
+import { SkyFluidGridModule, SkyDescriptionListModule, SkyDefinitionListModule } from '@skyux/layout';
 import * as i3$1 from '@blackbaud/skyux-lib-code-block';
 import { SkyCodeBlockModule, SkyCodeModule } from '@blackbaud/skyux-lib-code-block';
 import * as i1$1 from '@skyux/indicators';
@@ -16,7 +16,7 @@ import * as i4 from '@skyux/tabs';
 import { SkyVerticalTabsetModule, SkyTabsModule } from '@skyux/tabs';
 import * as i8 from '@skyux/i18n';
 import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
-import { Subject, merge } from 'rxjs';
+import { Subject, ReplaySubject, merge } from 'rxjs';
 import { takeUntil, map, share } from 'rxjs/operators';
 import * as i1 from '@skyux/theme';
 import { SkyThemeModule } from '@skyux/theme';
@@ -25,11 +25,12 @@ import * as i2$3 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i1$2 from '@skyux/forms';
 import { SkyCheckboxModule, SkyRadioModule } from '@skyux/forms';
+import { __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';
 import * as i6$1 from '@blackbaud/skyux-lib-stache';
 import { StachePageSummaryModule, StacheWrapperModule } from '@blackbaud/skyux-lib-stache';
 import * as i1$3 from '@angular/router';
 import { RouterModule } from '@angular/router';
-import marked from 'marked';
+import { marked } from 'marked';
 import * as i6 from '@blackbaud/skyux-lib-clipboard';
 import { SkyClipboardModule } from '@blackbaud/skyux-lib-clipboard';
 import * as i5 from '@skyux/popovers';
@@ -686,7 +687,7 @@ class SkyDocsDemoControlPanelCheckboxComponent {
          * Indicates whether to disable the checkbox.
          */
         this.disabled = false;
-        this.selectionChange = new Subject();
+        this.selectionChange = new ReplaySubject();
         this.initialState = {};
     }
     /**
@@ -742,6 +743,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }] } });
 
+var _SkyDocsDemoControlPanelRadioGroupComponent_instances, _SkyDocsDemoControlPanelRadioGroupComponent_notifyChange;
 /**
  * Renders a radio control group.
  * @example
@@ -762,6 +764,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 class SkyDocsDemoControlPanelRadioGroupComponent {
     constructor(changeDetector) {
         this.changeDetector = changeDetector;
+        _SkyDocsDemoControlPanelRadioGroupComponent_instances.add(this);
         /**
          * Indicates whether to disable the radio group.
          */
@@ -769,22 +772,22 @@ class SkyDocsDemoControlPanelRadioGroupComponent {
         /**
          * @internal
          */
-        this.selectionChange = new Subject();
+        this.selectionChange = new ReplaySubject();
     }
     ngOnInit() {
         this.value = this.cloneValue(this.initialValue);
+        __classPrivateFieldGet(this, _SkyDocsDemoControlPanelRadioGroupComponent_instances, "m", _SkyDocsDemoControlPanelRadioGroupComponent_notifyChange).call(this);
     }
     ngOnDestroy() {
         this.selectionChange.complete();
     }
     onModelChange(value) {
         this.value = value;
-        this.selectionChange.next({
-            [this.propertyName]: this.value,
-        });
+        __classPrivateFieldGet(this, _SkyDocsDemoControlPanelRadioGroupComponent_instances, "m", _SkyDocsDemoControlPanelRadioGroupComponent_notifyChange).call(this);
     }
     resetValue() {
         this.value = this.cloneValue(this.initialValue);
+        __classPrivateFieldGet(this, _SkyDocsDemoControlPanelRadioGroupComponent_instances, "m", _SkyDocsDemoControlPanelRadioGroupComponent_notifyChange).call(this);
         this.changeDetector.markForCheck();
     }
     cloneValue(value) {
@@ -794,6 +797,11 @@ class SkyDocsDemoControlPanelRadioGroupComponent {
         return value;
     }
 }
+_SkyDocsDemoControlPanelRadioGroupComponent_instances = new WeakSet(), _SkyDocsDemoControlPanelRadioGroupComponent_notifyChange = function _SkyDocsDemoControlPanelRadioGroupComponent_notifyChange() {
+    this.selectionChange.next({
+        [this.propertyName]: this.value,
+    });
+};
 SkyDocsDemoControlPanelRadioGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsDemoControlPanelRadioGroupComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 SkyDocsDemoControlPanelRadioGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SkyDocsDemoControlPanelRadioGroupComponent, selector: "sky-docs-demo-control-panel-radio-group", inputs: { choices: "choices", disabled: "disabled", heading: "heading", initialValue: "initialValue", propertyName: "propertyName" }, ngImport: i0, template: "<div class=\"sky-demo-control-panel-radio-group\">\n  <strong *ngIf=\"heading\">{{ heading }}</strong>\n  <sky-radio-group\n    [disabled]=\"disabled\"\n    [name]=\"propertyName\"\n    [ngModel]=\"value\"\n    (ngModelChange)=\"onModelChange($event)\"\n  >\n    <ul class=\"sky-list-unstyled\">\n      <li *ngFor=\"let choice of choices\">\n        <sky-radio [value]=\"choice.value\">\n          <sky-radio-label>{{ choice.label }}</sky-radio-label>\n        </sky-radio>\n      </li>\n    </ul>\n  </sky-radio-group>\n</div>\n", styles: [".sky-demo-control-panel-radio-group{margin-bottom:20px}ul{margin:0}\n"], components: [{ type: i1$2.λ11, selector: "sky-radio-group", inputs: ["ariaLabelledBy", "ariaLabel", "disabled", "name", "required", "value", "tabIndex"] }, { type: i1$2.λ13, selector: "sky-radio", inputs: ["checked", "disabled", "id", "label", "labelledBy", "name", "tabindex", "value", "icon", "radioType"], outputs: ["change", "checkedChange", "disabledChange"] }, { type: i1$2.λ12, selector: "sky-radio-label" }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsDemoControlPanelRadioGroupComponent, decorators: [{
@@ -1076,62 +1084,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 class SkyDocsToolsOptions {
 }
 
+var _SkyDocsModuleInfoComponent_instances, _SkyDocsModuleInfoComponent_options, _SkyDocsModuleInfoComponent_packageUrl, _SkyDocsModuleInfoComponent_updateExternalLinks, _SkyDocsModuleInfoComponent_updateInstallationCommand;
 class SkyDocsModuleInfoComponent {
     constructor(options) {
-        this.options = options;
+        _SkyDocsModuleInfoComponent_instances.add(this);
+        _SkyDocsModuleInfoComponent_options.set(this, void 0);
+        _SkyDocsModuleInfoComponent_packageUrl.set(this, void 0);
+        if (options) {
+            __classPrivateFieldSet(this, _SkyDocsModuleInfoComponent_options, options, "f");
+            this.gitRepoUrl = options.gitRepoUrl;
+            this.packageName = options.packageName;
+        }
     }
     set gitRepoUrl(value) {
-        this._gitRepoUrl = value;
-    }
-    get gitRepoUrl() {
-        return this._gitRepoUrl || (this.options && this.options.gitRepoUrl);
+        this.gitRepoUrlOrDefault = value || __classPrivateFieldGet(this, _SkyDocsModuleInfoComponent_options, "f")?.gitRepoUrl;
+        __classPrivateFieldGet(this, _SkyDocsModuleInfoComponent_instances, "m", _SkyDocsModuleInfoComponent_updateExternalLinks).call(this);
     }
     set packageName(value) {
-        this._packageName = value;
-    }
-    get packageName() {
-        return this._packageName || (this.options && this.options.packageName);
+        this.packageNameOrDefault = value || __classPrivateFieldGet(this, _SkyDocsModuleInfoComponent_options, "f")?.packageName;
+        __classPrivateFieldGet(this, _SkyDocsModuleInfoComponent_instances, "m", _SkyDocsModuleInfoComponent_updateInstallationCommand).call(this);
+        __classPrivateFieldGet(this, _SkyDocsModuleInfoComponent_instances, "m", _SkyDocsModuleInfoComponent_updateExternalLinks).call(this);
     }
     set packageUrl(value) {
-        this._packageUrl = value;
+        __classPrivateFieldSet(this, _SkyDocsModuleInfoComponent_packageUrl, value, "f");
+        __classPrivateFieldGet(this, _SkyDocsModuleInfoComponent_instances, "m", _SkyDocsModuleInfoComponent_updateExternalLinks).call(this);
     }
-    get packageUrl() {
-        if (this._packageUrl) {
-            return this._packageUrl;
-        }
-        if (this.packageName) {
-            return `https://npmjs.org/package/${this.packageName}`;
-        }
-        return '';
-    }
-    get externalLinks() {
-        const externalLinks = [];
-        if (this.packageName) {
-            externalLinks.push({
-                url: this.packageUrl,
-                label: 'View in NPM',
-            });
-        }
-        if (this.gitRepoUrl) {
-            externalLinks.push({
-                url: this.gitRepoUrl,
-                label: 'View in GitHub',
-            });
-        }
-        return externalLinks;
+}
+_SkyDocsModuleInfoComponent_options = new WeakMap(), _SkyDocsModuleInfoComponent_packageUrl = new WeakMap(), _SkyDocsModuleInfoComponent_instances = new WeakSet(), _SkyDocsModuleInfoComponent_updateExternalLinks = function _SkyDocsModuleInfoComponent_updateExternalLinks() {
+    const externalLinks = [];
+    if (this.packageNameOrDefault) {
+        externalLinks.push({
+            url: __classPrivateFieldGet(this, _SkyDocsModuleInfoComponent_packageUrl, "f") ||
+                `https://npmjs.org/package/${this.packageNameOrDefault}`,
+            label: 'View in NPM',
+        });
     }
-    get installationCommand() {
-        if (!this.packageName) {
-            return '';
-        }
-        return `npm install --save-exact ${this.packageName}`;
+    if (this.gitRepoUrlOrDefault) {
+        externalLinks.push({
+            url: this.gitRepoUrlOrDefault,
+            label: 'View in GitHub',
+        });
     }
-}
+    this.externalLinks = externalLinks;
+}, _SkyDocsModuleInfoComponent_updateInstallationCommand = function _SkyDocsModuleInfoComponent_updateInstallationCommand() {
+    this.installationCommand = this.packageNameOrDefault
+        ? `npm install --save-exact ${this.packageNameOrDefault}`
+        : '';
+};
 SkyDocsModuleInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsModuleInfoComponent, deps: [{ token: SkyDocsToolsOptions, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-SkyDocsModuleInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SkyDocsModuleInfoComponent, selector: "sky-docs-module-info", inputs: { gitRepoUrl: "gitRepoUrl", moduleName: "moduleName", packageName: "packageName", packageUrl: "packageUrl" }, ngImport: i0, template: "<div class=\"sky-docs-module-info\">\n  <sky-definition-list defaultValue=\"\" labelWidth=\"120px\">\n    <sky-definition-list-content *ngIf=\"moduleName\">\n      <sky-definition-list-label> Defined in </sky-definition-list-label>\n      <sky-definition-list-value>\n        <sky-code>{{ moduleName }}</sky-code>\n      </sky-definition-list-value>\n    </sky-definition-list-content>\n    <sky-definition-list-content *ngIf=\"packageName\">\n      <sky-definition-list-label> NPM package </sky-definition-list-label>\n      <sky-definition-list-value>\n        <span class=\"sky-docs-module-info-package-name\"\n          ><sky-code>{{ packageName }}</sky-code></span\n        >\n        <ng-container *ngFor=\"let externalLink of externalLinks; let i = index\">\n          <a [attr.href]=\"externalLink.url\">{{ externalLink.label }}</a>\n          <ng-container *ngIf=\"i < externalLinks.length - 1\"\n            >&nbsp;|\n          </ng-container>\n        </ng-container>\n      </sky-definition-list-value>\n    </sky-definition-list-content>\n\n    <sky-definition-list-content *ngIf=\"installationCommand\">\n      <sky-definition-list-label>\n        Installation\n        <sky-help-inline\n          [skyPopover]=\"installationCommandPopover\"\n          skyPopoverPlacement=\"right\"\n        >\n        </sky-help-inline>\n      </sky-definition-list-label>\n      <sky-definition-list-value>\n        <sky-popover #installationCommandPopover>\n          To use this module, you must install peer dependencies along with its\n          package. Also, after you install the package, you must add the module\n          as an export in your SPA's main module to make exports available to\n          your SPA.\n        </sky-popover>\n        <div class=\"sky-docs-module-info-installation-command\">\n          <span\n            class=\"sky-docs-module-info-installation-command-code\"\n            #copyTarget\n          >\n            <sky-code>{{ installationCommand }}</sky-code>\n          </span>\n          <sky-copy-to-clipboard\n            buttonText=\"Copy\"\n            [copyTarget]=\"copyTarget\"\n          ></sky-copy-to-clipboard>\n        </div>\n      </sky-definition-list-value>\n    </sky-definition-list-content>\n  </sky-definition-list>\n\n  <div class=\"sky-docs-module-info-additional-content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".sky-docs-module-info-installation-command{display:flex}.sky-docs-module-info-installation-command-code,.sky-docs-module-info-package-name{margin-right:10px}\n"], components: [{ type: i2$1.λ13, selector: "sky-definition-list", inputs: ["labelWidth", "defaultValue"] }, { type: i2$1.λ14, selector: "sky-definition-list-content" }, { type: i2$1.λ16, selector: "sky-definition-list-label" }, { type: i2$1.λ17, selector: "sky-definition-list-value" }, { type: i3$1.λ1, selector: "sky-code" }, { type: i1$1.λ3, selector: "sky-help-inline", outputs: ["actionClick"] }, { type: i5.λ6, selector: "sky-popover", inputs: ["alignment", "dismissOnBlur", "placement", "popoverTitle", "popoverType"], outputs: ["popoverClosed", "popoverOpened"] }, { type: i6.λ1, selector: "sky-copy-to-clipboard", inputs: ["ariaLabel", "ariaLabelledBy", "copyTarget", "buttonText", "buttonClickedText", "title"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.λ7, selector: "[skyPopover]", inputs: ["skyPopover", "skyPopoverAlignment", "skyPopoverMessageStream", "skyPopoverPlacement", "skyPopoverTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SkyDocsModuleInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SkyDocsModuleInfoComponent, selector: "sky-docs-module-info", inputs: { gitRepoUrl: "gitRepoUrl", moduleName: "moduleName", packageName: "packageName", packageUrl: "packageUrl" }, ngImport: i0, template: "<div class=\"sky-docs-module-info\">\n  <sky-description-list mode=\"vertical\">\n    <sky-description-list-content>\n      <sky-description-list-term> Defined in </sky-description-list-term>\n      <sky-description-list-description>\n        <sky-code class=\"sky-docs-module-info-module-name\">{{\n          moduleName\n        }}</sky-code>\n      </sky-description-list-description>\n    </sky-description-list-content>\n\n    <sky-description-list-content *ngIf=\"packageNameOrDefault\">\n      <sky-description-list-term>NPM package</sky-description-list-term>\n      <sky-description-list-description>\n        <span class=\"sky-docs-module-info-package-name\"\n          ><sky-code>{{ packageNameOrDefault }}</sky-code></span\n        >\n        <ng-container *ngFor=\"let externalLink of externalLinks; let i = index\">\n          <a\n            class=\"sky-docs-module-info-external-link\"\n            [href]=\"externalLink.url\"\n            >{{ externalLink.label }}</a\n          >\n          <ng-container *ngIf=\"i < externalLinks.length - 1\"\n            >&nbsp;|\n          </ng-container>\n        </ng-container>\n      </sky-description-list-description>\n    </sky-description-list-content>\n\n    <sky-description-list-content *ngIf=\"installationCommand\">\n      <sky-description-list-term>\n        Installation\n        <sky-help-inline\n          class=\"sky-control-help\"\n          [skyPopover]=\"installationCommandPopover\"\n          skyPopoverPlacement=\"right\"\n        >\n        </sky-help-inline>\n      </sky-description-list-term>\n      <sky-description-list-description>\n        <sky-popover #installationCommandPopover>\n          To use this module, you must install peer dependencies along with its\n          package. Also, after you install the package, you must add the module\n          as an export in your SPA's main module to make exports available to\n          your SPA.\n        </sky-popover>\n        <div class=\"sky-docs-module-info-installation-command\">\n          <span\n            class=\"sky-docs-module-info-installation-command-code\"\n            #copyTarget\n          >\n            <sky-code>{{ installationCommand }}</sky-code>\n          </span>\n          <sky-copy-to-clipboard\n            buttonText=\"Copy\"\n            [copyTarget]=\"copyTarget\"\n          ></sky-copy-to-clipboard>\n        </div>\n      </sky-description-list-description>\n    </sky-description-list-content>\n  </sky-description-list>\n\n  <div class=\"sky-docs-module-info-additional-content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".sky-docs-module-info-installation-command{display:flex}.sky-docs-module-info-installation-command-code,.sky-docs-module-info-package-name{margin-right:10px}\n"], components: [{ type: i2$1.λ18, selector: "sky-description-list", inputs: ["defaultDescription", "listItemWidth", "mode"] }, { type: i2$1.λ21, selector: "sky-description-list-content" }, { type: i2$1.λ19, selector: "sky-description-list-term" }, { type: i2$1.λ20, selector: "sky-description-list-description" }, { type: i3$1.λ1, selector: "sky-code" }, { type: i1$1.λ3, selector: "sky-help-inline", outputs: ["actionClick"] }, { type: i5.λ6, selector: "sky-popover", inputs: ["alignment", "dismissOnBlur", "placement", "popoverTitle", "popoverType"], outputs: ["popoverClosed", "popoverOpened"] }, { type: i6.λ1, selector: "sky-copy-to-clipboard", inputs: ["ariaLabel", "ariaLabelledBy", "copyTarget", "buttonText", "buttonClickedText", "title"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.λ7, selector: "[skyPopover]", inputs: ["skyPopover", "skyPopoverAlignment", "skyPopoverMessageStream", "skyPopoverPlacement", "skyPopoverTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsModuleInfoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-docs-module-info', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-docs-module-info\">\n  <sky-definition-list defaultValue=\"\" labelWidth=\"120px\">\n    <sky-definition-list-content *ngIf=\"moduleName\">\n      <sky-definition-list-label> Defined in </sky-definition-list-label>\n      <sky-definition-list-value>\n        <sky-code>{{ moduleName }}</sky-code>\n      </sky-definition-list-value>\n    </sky-definition-list-content>\n    <sky-definition-list-content *ngIf=\"packageName\">\n      <sky-definition-list-label> NPM package </sky-definition-list-label>\n      <sky-definition-list-value>\n        <span class=\"sky-docs-module-info-package-name\"\n          ><sky-code>{{ packageName }}</sky-code></span\n        >\n        <ng-container *ngFor=\"let externalLink of externalLinks; let i = index\">\n          <a [attr.href]=\"externalLink.url\">{{ externalLink.label }}</a>\n          <ng-container *ngIf=\"i < externalLinks.length - 1\"\n            >&nbsp;|\n          </ng-container>\n        </ng-container>\n      </sky-definition-list-value>\n    </sky-definition-list-content>\n\n    <sky-definition-list-content *ngIf=\"installationCommand\">\n      <sky-definition-list-label>\n        Installation\n        <sky-help-inline\n          [skyPopover]=\"installationCommandPopover\"\n          skyPopoverPlacement=\"right\"\n        >\n        </sky-help-inline>\n      </sky-definition-list-label>\n      <sky-definition-list-value>\n        <sky-popover #installationCommandPopover>\n          To use this module, you must install peer dependencies along with its\n          package. Also, after you install the package, you must add the module\n          as an export in your SPA's main module to make exports available to\n          your SPA.\n        </sky-popover>\n        <div class=\"sky-docs-module-info-installation-command\">\n          <span\n            class=\"sky-docs-module-info-installation-command-code\"\n            #copyTarget\n          >\n            <sky-code>{{ installationCommand }}</sky-code>\n          </span>\n          <sky-copy-to-clipboard\n            buttonText=\"Copy\"\n            [copyTarget]=\"copyTarget\"\n          ></sky-copy-to-clipboard>\n        </div>\n      </sky-definition-list-value>\n    </sky-definition-list-content>\n  </sky-definition-list>\n\n  <div class=\"sky-docs-module-info-additional-content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".sky-docs-module-info-installation-command{display:flex}.sky-docs-module-info-installation-command-code,.sky-docs-module-info-package-name{margin-right:10px}\n"] }]
+            args: [{ selector: 'sky-docs-module-info', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-docs-module-info\">\n  <sky-description-list mode=\"vertical\">\n    <sky-description-list-content>\n      <sky-description-list-term> Defined in </sky-description-list-term>\n      <sky-description-list-description>\n        <sky-code class=\"sky-docs-module-info-module-name\">{{\n          moduleName\n        }}</sky-code>\n      </sky-description-list-description>\n    </sky-description-list-content>\n\n    <sky-description-list-content *ngIf=\"packageNameOrDefault\">\n      <sky-description-list-term>NPM package</sky-description-list-term>\n      <sky-description-list-description>\n        <span class=\"sky-docs-module-info-package-name\"\n          ><sky-code>{{ packageNameOrDefault }}</sky-code></span\n        >\n        <ng-container *ngFor=\"let externalLink of externalLinks; let i = index\">\n          <a\n            class=\"sky-docs-module-info-external-link\"\n            [href]=\"externalLink.url\"\n            >{{ externalLink.label }}</a\n          >\n          <ng-container *ngIf=\"i < externalLinks.length - 1\"\n            >&nbsp;|\n          </ng-container>\n        </ng-container>\n      </sky-description-list-description>\n    </sky-description-list-content>\n\n    <sky-description-list-content *ngIf=\"installationCommand\">\n      <sky-description-list-term>\n        Installation\n        <sky-help-inline\n          class=\"sky-control-help\"\n          [skyPopover]=\"installationCommandPopover\"\n          skyPopoverPlacement=\"right\"\n        >\n        </sky-help-inline>\n      </sky-description-list-term>\n      <sky-description-list-description>\n        <sky-popover #installationCommandPopover>\n          To use this module, you must install peer dependencies along with its\n          package. Also, after you install the package, you must add the module\n          as an export in your SPA's main module to make exports available to\n          your SPA.\n        </sky-popover>\n        <div class=\"sky-docs-module-info-installation-command\">\n          <span\n            class=\"sky-docs-module-info-installation-command-code\"\n            #copyTarget\n          >\n            <sky-code>{{ installationCommand }}</sky-code>\n          </span>\n          <sky-copy-to-clipboard\n            buttonText=\"Copy\"\n            [copyTarget]=\"copyTarget\"\n          ></sky-copy-to-clipboard>\n        </div>\n      </sky-description-list-description>\n    </sky-description-list-content>\n  </sky-description-list>\n\n  <div class=\"sky-docs-module-info-additional-content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".sky-docs-module-info-installation-command{display:flex}.sky-docs-module-info-installation-command-code,.sky-docs-module-info-package-name{margin-right:10px}\n"] }]
         }], ctorParameters: function () { return [{ type: SkyDocsToolsOptions, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { gitRepoUrl: [{
@@ -1150,14 +1154,14 @@ SkyDocsModuleInfoModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0",
 SkyDocsModuleInfoModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsModuleInfoModule, declarations: [SkyDocsModuleInfoComponent], imports: [CommonModule,
         SkyCodeModule,
         SkyClipboardModule,
-        SkyDefinitionListModule,
+        SkyDescriptionListModule,
         SkyHelpInlineModule,
         SkyPopoverModule], exports: [SkyDocsModuleInfoComponent] });
 SkyDocsModuleInfoModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SkyDocsModuleInfoModule, imports: [[
             CommonModule,
             SkyCodeModule,
             SkyClipboardModule,
-            SkyDefinitionListModule,
+            SkyDescriptionListModule,
             SkyHelpInlineModule,
             SkyPopoverModule,
         ]] });
@@ -1168,7 +1172,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         CommonModule,
                         SkyCodeModule,
                         SkyClipboardModule,
-                        SkyDefinitionListModule,
+                        SkyDescriptionListModule,
                         SkyHelpInlineModule,
                         SkyPopoverModule,
                     ],