@skyux/docs-tools 12.0.0-alpha.11 → 12.0.0-alpha.12
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/css/styles.css +1 -0
- package/fesm2022/skyux-docs-tools.mjs +80 -48
- package/fesm2022/skyux-docs-tools.mjs.map +1 -1
- package/lib/modules/code-example-viewer/help.service.d.ts +11 -0
- package/lib/modules/showcase/showcase-host.service.d.ts +1 -1
- package/lib/modules/showcase/showcase.component.d.ts +1 -1
- package/package.json +10 -10
package/css/styles.css
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, ChangeDetectionStrategy, Component, NgModule, inject, Injectable, Directive, booleanAttribute, ViewEncapsulation, computed, signal, Pipe, ElementRef, numberAttribute, InjectionToken,
|
|
2
|
+
import { input, ChangeDetectionStrategy, Component, NgModule, inject, Injectable, Directive, booleanAttribute, ViewEncapsulation, computed, signal, makeEnvironmentProviders, Pipe, ElementRef, numberAttribute, InjectionToken, DestroyRef, ChangeDetectorRef, contentChild, effect } from '@angular/core';
|
|
3
3
|
import * as i5 from '@skyux/core';
|
|
4
|
-
import { SkyAppWindowRef, SkyIdModule, SkyTrimModule, SkyScrollableHostService, SkyMediaQueryService } from '@skyux/core';
|
|
4
|
+
import { SkyAppWindowRef, SkyIdModule, SkyHelpService, SkyTrimModule, SkyScrollableHostService, SkyMediaQueryService } from '@skyux/core';
|
|
5
5
|
import { SkyToastService } from '@skyux/toast';
|
|
6
6
|
import { KeyValuePipe, NgComponentOutlet, NgTemplateOutlet } from '@angular/common';
|
|
7
7
|
import * as i2 from '@skyux/icon';
|
|
@@ -38,14 +38,14 @@ class SkyDocsCategoryTagComponent {
|
|
|
38
38
|
this.color = input.required();
|
|
39
39
|
}
|
|
40
40
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyDocsCategoryTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
41
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.1", type: SkyDocsCategoryTagComponent, isStandalone: true, selector: "sky-docs-category-tag", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class": "\"sky-docs-category-tag-color-\" + color()" }, classAttribute: "sky-rounded-corners" }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:inline-flex;padding:.2em .6em;background-color:var(--sky-docs-category-tag-background-color);color:var(--sky-text-color-default);color:color-mix(in srgb,var(--sky-docs-category-tag-background-color) 20%,var(--sky-text-color-default))}:host(.sky-docs-category-tag-color-blue){--sky-docs-category-tag-background-color: var(--sky-category-color-blue)}:host(.sky-docs-category-tag-color-light-blue){--sky-docs-category-tag-background-color: var( --sky-category-color-light-blue )}:host(.sky-docs-category-tag-color-orange){--sky-docs-category-tag-background-color: var(--sky-category-color-orange)}:host(.sky-docs-category-tag-color-purple){--sky-docs-category-tag-background-color: var(--sky-category-color-purple)}:host(.sky-docs-category-tag-color-red){--sky-docs-category-tag-background-color: var(--sky-category-color-red)}:host(.sky-docs-category-tag-color-teal){--sky-docs-category-tag-background-color: var(--sky-category-color-teal)}:host(.sky-docs-category-tag-color-yellow){--sky-docs-category-tag-background-color: var(--sky-category-color-yellow)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
41
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.1", type: SkyDocsCategoryTagComponent, isStandalone: true, selector: "sky-docs-category-tag", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class": "\"sky-docs-category-tag-color-\" + color()" }, classAttribute: "sky-rounded-corners" }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:inline-flex;padding:.2em .6em;background-color:var(--sky-docs-category-tag-background-color);box-shadow:inset 0 -1px #0000000d;color:var(--sky-text-color-default);color:color-mix(in srgb,var(--sky-docs-category-tag-background-color) 20%,var(--sky-text-color-default))}:host(.sky-docs-category-tag-color-blue){--sky-docs-category-tag-background-color: var(--sky-category-color-blue)}:host(.sky-docs-category-tag-color-light-blue){--sky-docs-category-tag-background-color: var( --sky-category-color-light-blue )}:host(.sky-docs-category-tag-color-orange){--sky-docs-category-tag-background-color: var(--sky-category-color-orange)}:host(.sky-docs-category-tag-color-purple){--sky-docs-category-tag-background-color: var(--sky-category-color-purple)}:host(.sky-docs-category-tag-color-red){--sky-docs-category-tag-background-color: var(--sky-category-color-red)}:host(.sky-docs-category-tag-color-teal){--sky-docs-category-tag-background-color: var(--sky-category-color-teal)}:host(.sky-docs-category-tag-color-yellow){--sky-docs-category-tag-background-color: var(--sky-category-color-yellow)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
42
42
|
}
|
|
43
43
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyDocsCategoryTagComponent, decorators: [{
|
|
44
44
|
type: Component,
|
|
45
45
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
46
46
|
class: 'sky-rounded-corners',
|
|
47
47
|
'[class]': '"sky-docs-category-tag-color-" + color()',
|
|
48
|
-
}, selector: 'sky-docs-category-tag', template: '<ng-content />', styles: [":host{display:inline-flex;padding:.2em .6em;background-color:var(--sky-docs-category-tag-background-color);color:var(--sky-text-color-default);color:color-mix(in srgb,var(--sky-docs-category-tag-background-color) 20%,var(--sky-text-color-default))}:host(.sky-docs-category-tag-color-blue){--sky-docs-category-tag-background-color: var(--sky-category-color-blue)}:host(.sky-docs-category-tag-color-light-blue){--sky-docs-category-tag-background-color: var( --sky-category-color-light-blue )}:host(.sky-docs-category-tag-color-orange){--sky-docs-category-tag-background-color: var(--sky-category-color-orange)}:host(.sky-docs-category-tag-color-purple){--sky-docs-category-tag-background-color: var(--sky-category-color-purple)}:host(.sky-docs-category-tag-color-red){--sky-docs-category-tag-background-color: var(--sky-category-color-red)}:host(.sky-docs-category-tag-color-teal){--sky-docs-category-tag-background-color: var(--sky-category-color-teal)}:host(.sky-docs-category-tag-color-yellow){--sky-docs-category-tag-background-color: var(--sky-category-color-yellow)}\n"] }]
|
|
48
|
+
}, selector: 'sky-docs-category-tag', template: '<ng-content />', styles: [":host{display:inline-flex;padding:.2em .6em;background-color:var(--sky-docs-category-tag-background-color);box-shadow:inset 0 -1px #0000000d;color:var(--sky-text-color-default);color:color-mix(in srgb,var(--sky-docs-category-tag-background-color) 20%,var(--sky-text-color-default))}:host(.sky-docs-category-tag-color-blue){--sky-docs-category-tag-background-color: var(--sky-category-color-blue)}:host(.sky-docs-category-tag-color-light-blue){--sky-docs-category-tag-background-color: var( --sky-category-color-light-blue )}:host(.sky-docs-category-tag-color-orange){--sky-docs-category-tag-background-color: var(--sky-category-color-orange)}:host(.sky-docs-category-tag-color-purple){--sky-docs-category-tag-background-color: var(--sky-category-color-purple)}:host(.sky-docs-category-tag-color-red){--sky-docs-category-tag-background-color: var(--sky-category-color-red)}:host(.sky-docs-category-tag-color-teal){--sky-docs-category-tag-background-color: var(--sky-category-color-teal)}:host(.sky-docs-category-tag-color-yellow){--sky-docs-category-tag-background-color: var(--sky-category-color-yellow)}\n"] }]
|
|
49
49
|
}] });
|
|
50
50
|
|
|
51
51
|
/**
|
|
@@ -706,8 +706,8 @@ context.keys().map(context);
|
|
|
706
706
|
}, { openFile: config.primaryFile });
|
|
707
707
|
}
|
|
708
708
|
async #fetchTemplateFileContents(file) {
|
|
709
|
-
const filePath = `
|
|
710
|
-
const url = this.#assetsSvc?.getUrl(filePath) ?? filePath
|
|
709
|
+
const filePath = `stack-blitz/${file}`;
|
|
710
|
+
const url = this.#assetsSvc?.getUrl(filePath) ?? `assets/${filePath}`;
|
|
711
711
|
if (!this.#http) {
|
|
712
712
|
return undefined;
|
|
713
713
|
}
|
|
@@ -777,19 +777,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
|
|
|
777
777
|
], selector: 'sky-docs-code-example-viewer', template: "<sky-box headingLevel=\"3\" headingStyle=\"3\" [headingText]=\"headingText()\">\n <sky-box-controls>\n <button\n class=\"sky-btn sky-btn-default\"\n data-sky-id=\"stackblitz-btn\"\n type=\"button\"\n (click)=\"launchStackBlitz()\"\n >\n <sky-icon iconName=\"edit\" />\n {{\n 'sky_docs_code_example_viewer_demo_stack_blitz_button' | skyLibResources\n }}\n </button>\n </sky-box-controls>\n\n <sky-box-content>\n <div\n class=\"sky-docs-code-example-viewer-demo sky-padding-even-md sky-margin-stacked-lg\"\n >\n @if (!demoHidden()) {\n <ng-template [ngComponentOutlet]=\"componentType()\" />\n } @else {\n {{\n 'sky_docs_code_example_viewer_demo_hidden_message' | skyLibResources\n }}\n }\n </div>\n\n <div class=\"sky-margin-stacked-sm\">\n <button\n class=\"sky-btn sky-btn-link\"\n data-sky-id=\"toggle-code-visibility-btn\"\n type=\"button\"\n [attr.aria-controls]=\"codeRef.id\"\n [attr.aria-expanded]=\"isCodeVisible()\"\n (click)=\"toggleCodeVisibility()\"\n >\n <sky-icon\n [iconName]=\"isCodeVisible() ? 'chevron-down' : 'chevron-right'\"\n />\n {{\n isCodeVisible()\n ? ('sky_docs_code_example_viewer_hide_code_button_label'\n | skyLibResources)\n : ('sky_docs_code_example_viewer_show_code_button_label'\n | skyLibResources)\n }}\n </button>\n </div>\n\n <sky-vertical-tabset #codeRef=\"skyId\" skyId [hidden]=\"!isCodeVisible()\">\n @for (obj of files() | keyvalue; track obj.key) {\n <sky-vertical-tab\n [active]=\"obj.key === primaryFile()\"\n [tabHeading]=\"obj.key\"\n >\n <sky-docs-code-snippet\n [code]=\"obj.value\"\n [language]=\"getCodeLanguage(obj.key)\"\n />\n </sky-vertical-tab>\n }\n </sky-vertical-tabset>\n </sky-box-content>\n</sky-box>\n", styles: [":host{display:block}.sky-docs-code-example-viewer-demo{border:1px solid var(--sky-border-color-neutral-medium)}\n"] }]
|
|
778
778
|
}] });
|
|
779
779
|
|
|
780
|
+
/**
|
|
781
|
+
* @internal
|
|
782
|
+
*/
|
|
783
|
+
class ExampleHelpService extends SkyHelpService {
|
|
784
|
+
openHelp(args) {
|
|
785
|
+
console.log(`Help opened with key '${args?.helpKey}'.`);
|
|
786
|
+
}
|
|
787
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
788
|
+
updateHelp(args) {
|
|
789
|
+
/* */
|
|
790
|
+
}
|
|
791
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ExampleHelpService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
792
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ExampleHelpService }); }
|
|
793
|
+
}
|
|
794
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ExampleHelpService, decorators: [{
|
|
795
|
+
type: Injectable
|
|
796
|
+
}] });
|
|
797
|
+
|
|
798
|
+
/**
|
|
799
|
+
* Provide a mock help service for the code example viewer so that examples
|
|
800
|
+
* with help keys work properly. (StackBlitz pulls in its own version of the
|
|
801
|
+
* help service; this is needed for this live demos on the docs site.)
|
|
802
|
+
*/
|
|
803
|
+
function provideExampleHelpService() {
|
|
804
|
+
return makeEnvironmentProviders([
|
|
805
|
+
{ provide: SkyHelpService, useClass: ExampleHelpService },
|
|
806
|
+
]);
|
|
807
|
+
}
|
|
780
808
|
/**
|
|
781
809
|
* @internal
|
|
782
810
|
*/
|
|
783
811
|
class SkyDocsCodeExampleViewerModule {
|
|
784
812
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyDocsCodeExampleViewerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
785
813
|
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.1", ngImport: i0, type: SkyDocsCodeExampleViewerModule, imports: [SkyDocsCodeExampleViewerComponent], exports: [SkyDocsCodeExampleViewerComponent] }); }
|
|
786
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyDocsCodeExampleViewerModule, imports: [SkyDocsCodeExampleViewerComponent] }); }
|
|
814
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyDocsCodeExampleViewerModule, providers: [provideExampleHelpService()], imports: [SkyDocsCodeExampleViewerComponent] }); }
|
|
787
815
|
}
|
|
788
816
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyDocsCodeExampleViewerModule, decorators: [{
|
|
789
817
|
type: NgModule,
|
|
790
818
|
args: [{
|
|
791
819
|
imports: [SkyDocsCodeExampleViewerComponent],
|
|
792
820
|
exports: [SkyDocsCodeExampleViewerComponent],
|
|
821
|
+
providers: [provideExampleHelpService()],
|
|
793
822
|
}]
|
|
794
823
|
}] });
|
|
795
824
|
|
|
@@ -905,7 +934,7 @@ class SkyDocsHeadingAnchorComponent {
|
|
|
905
934
|
this.#anchorSvc?.unregister(this);
|
|
906
935
|
}
|
|
907
936
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyDocsHeadingAnchorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
908
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SkyDocsHeadingAnchorComponent, isStandalone: true, selector: "sky-docs-heading-anchor", inputs: { anchorId: { classPropertyName: "anchorId", publicName: "anchorId", isSignal: true, isRequired: true, transformFunction: null }, headingText: { classPropertyName: "headingText", publicName: "headingText", isSignal: true, isRequired: true, transformFunction: null }, headingTextFormat: { classPropertyName: "headingTextFormat", publicName: "headingTextFormat", isSignal: true, isRequired: false, transformFunction: null }, categoryColor: { classPropertyName: "categoryColor", publicName: "categoryColor", isSignal: true, isRequired: false, transformFunction: null }, categoryTemplate: { classPropertyName: "categoryTemplate", publicName: "categoryTemplate", isSignal: true, isRequired: false, transformFunction: null }, categoryText: { classPropertyName: "categoryText", publicName: "categoryText", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null }, strikethrough: { classPropertyName: "strikethrough", publicName: "strikethrough", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.id": "anchorId()" } }, ngImport: i0, template: "@switch (headingLevel()) {\n @case (1) {\n <h1 class=\"sky-docs-heading-anchor-heading\">\n <ng-container [ngTemplateOutlet]=\"headingTextRef\" />\n </h1>\n }\n @case (2) {\n <h2 class=\"sky-docs-heading-anchor-heading\">\n <ng-container [ngTemplateOutlet]=\"headingTextRef\" />\n </h2>\n }\n @case (3) {\n <h3 class=\"sky-docs-heading-anchor-heading\">\n <ng-container [ngTemplateOutlet]=\"headingTextRef\" />\n </h3>\n }\n @case (4) {\n <h4 class=\"sky-docs-heading-anchor-heading\">\n <ng-container [ngTemplateOutlet]=\"headingTextRef\" />\n </h4>\n }\n @case (5) {\n <h5 class=\"sky-docs-heading-anchor-heading\">\n <ng-container [ngTemplateOutlet]=\"headingTextRef\" />\n </h5>\n }\n @case (6) {\n <h6 class=\"sky-docs-heading-anchor-heading\">\n <ng-container [ngTemplateOutlet]=\"headingTextRef\" />\n </h6>\n }\n}\n\n@if (categoryColor(); as categoryColor) {\n <sky-docs-category-tag [color]=\"categoryColor\">\n @if (categoryTemplate(); as categoryTemplate) {\n <ng-container [ngTemplateOutlet]=\"categoryTemplate\" />\n } @else {\n {{ categoryText() }}\n }\n </sky-docs-category-tag>\n}\n\n<ng-content />\n\n<ng-template #headingTextRef>\n <a\n class=\"sky-docs-heading-anchor-link\"\n queryParamsHandling=\"merge\"\n [fragment]=\"anchorId()\"\n [routerLink]=\"[]\"\n >\n <sky-icon iconName=\"link\" />\n <span class=\"sky-screen-reader-only\"\n >Link for section titled {{ headingText() }}</span\n >\n </a>\n <span skyTrim [class.sky-docs-text-strikethrough]=\"strikethrough()\">\n @if (headingTextFormat() === 'code') {\n <code>{{ headingText() }}</code>\n } @else {\n {{ headingText() }}\n }\n </span>\n</ng-template>\n", styles: [":host{display:flex;flex-wrap:wrap;align-items:center;gap:10px}:host([id]){padding-top:
|
|
937
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SkyDocsHeadingAnchorComponent, isStandalone: true, selector: "sky-docs-heading-anchor", inputs: { anchorId: { classPropertyName: "anchorId", publicName: "anchorId", isSignal: true, isRequired: true, transformFunction: null }, headingText: { classPropertyName: "headingText", publicName: "headingText", isSignal: true, isRequired: true, transformFunction: null }, headingTextFormat: { classPropertyName: "headingTextFormat", publicName: "headingTextFormat", isSignal: true, isRequired: false, transformFunction: null }, categoryColor: { classPropertyName: "categoryColor", publicName: "categoryColor", isSignal: true, isRequired: false, transformFunction: null }, categoryTemplate: { classPropertyName: "categoryTemplate", publicName: "categoryTemplate", isSignal: true, isRequired: false, transformFunction: null }, categoryText: { classPropertyName: "categoryText", publicName: "categoryText", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null }, strikethrough: { classPropertyName: "strikethrough", publicName: "strikethrough", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.id": "anchorId()" } }, ngImport: i0, template: "@switch (headingLevel()) {\n @case (1) {\n <h1 class=\"sky-docs-heading-anchor-heading\">\n <ng-container [ngTemplateOutlet]=\"headingTextRef\" />\n </h1>\n }\n @case (2) {\n <h2 class=\"sky-docs-heading-anchor-heading\">\n <ng-container [ngTemplateOutlet]=\"headingTextRef\" />\n </h2>\n }\n @case (3) {\n <h3 class=\"sky-docs-heading-anchor-heading\">\n <ng-container [ngTemplateOutlet]=\"headingTextRef\" />\n </h3>\n }\n @case (4) {\n <h4 class=\"sky-docs-heading-anchor-heading\">\n <ng-container [ngTemplateOutlet]=\"headingTextRef\" />\n </h4>\n }\n @case (5) {\n <h5 class=\"sky-docs-heading-anchor-heading\">\n <ng-container [ngTemplateOutlet]=\"headingTextRef\" />\n </h5>\n }\n @case (6) {\n <h6 class=\"sky-docs-heading-anchor-heading\">\n <ng-container [ngTemplateOutlet]=\"headingTextRef\" />\n </h6>\n }\n}\n\n@if (categoryColor(); as categoryColor) {\n <sky-docs-category-tag [color]=\"categoryColor\">\n @if (categoryTemplate(); as categoryTemplate) {\n <ng-container [ngTemplateOutlet]=\"categoryTemplate\" />\n } @else {\n {{ categoryText() }}\n }\n </sky-docs-category-tag>\n}\n\n<ng-content />\n\n<ng-template #headingTextRef>\n <a\n class=\"sky-docs-heading-anchor-link\"\n queryParamsHandling=\"merge\"\n [fragment]=\"anchorId()\"\n [routerLink]=\"[]\"\n >\n <sky-icon iconName=\"link\" iconSize=\"m\" />\n <span class=\"sky-screen-reader-only\"\n >Link for section titled {{ headingText() }}</span\n >\n </a>\n <span skyTrim [class.sky-docs-text-strikethrough]=\"strikethrough()\">\n @if (headingTextFormat() === 'code') {\n <code>{{ headingText() }}</code>\n } @else {\n {{ headingText() }}\n }\n </span>\n</ng-template>\n", styles: [":host{display:flex;flex-wrap:wrap;align-items:center;gap:10px}:host([id]){padding-top:var(--sky-margin-stacked-xl);margin-top:-1em}.sky-docs-heading-anchor-heading{word-break:break-all;position:relative;margin:0}.sky-docs-heading-anchor-heading:hover .sky-docs-heading-anchor-link{opacity:1}.sky-docs-heading-anchor-link{opacity:0;position:absolute;transition:opacity .25s;display:inline-block;left:-22px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: SkyDocsCategoryTagModule }, { kind: "component", type: SkyDocsCategoryTagComponent, selector: "sky-docs-category-tag", inputs: ["color"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i2.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyTrimModule }, { kind: "directive", type: i5.λ4, selector: "[skyTrim]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
909
938
|
}
|
|
910
939
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyDocsHeadingAnchorComponent, decorators: [{
|
|
911
940
|
type: Component,
|
|
@@ -917,7 +946,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
|
|
|
917
946
|
SkyDocsCategoryTagModule,
|
|
918
947
|
SkyIconModule,
|
|
919
948
|
SkyTrimModule,
|
|
920
|
-
], selector: 'sky-docs-heading-anchor', template: "@switch (headingLevel()) {\n @case (1) {\n <h1 class=\"sky-docs-heading-anchor-heading\">\n <ng-container [ngTemplateOutlet]=\"headingTextRef\" />\n </h1>\n }\n @case (2) {\n <h2 class=\"sky-docs-heading-anchor-heading\">\n <ng-container [ngTemplateOutlet]=\"headingTextRef\" />\n </h2>\n }\n @case (3) {\n <h3 class=\"sky-docs-heading-anchor-heading\">\n <ng-container [ngTemplateOutlet]=\"headingTextRef\" />\n </h3>\n }\n @case (4) {\n <h4 class=\"sky-docs-heading-anchor-heading\">\n <ng-container [ngTemplateOutlet]=\"headingTextRef\" />\n </h4>\n }\n @case (5) {\n <h5 class=\"sky-docs-heading-anchor-heading\">\n <ng-container [ngTemplateOutlet]=\"headingTextRef\" />\n </h5>\n }\n @case (6) {\n <h6 class=\"sky-docs-heading-anchor-heading\">\n <ng-container [ngTemplateOutlet]=\"headingTextRef\" />\n </h6>\n }\n}\n\n@if (categoryColor(); as categoryColor) {\n <sky-docs-category-tag [color]=\"categoryColor\">\n @if (categoryTemplate(); as categoryTemplate) {\n <ng-container [ngTemplateOutlet]=\"categoryTemplate\" />\n } @else {\n {{ categoryText() }}\n }\n </sky-docs-category-tag>\n}\n\n<ng-content />\n\n<ng-template #headingTextRef>\n <a\n class=\"sky-docs-heading-anchor-link\"\n queryParamsHandling=\"merge\"\n [fragment]=\"anchorId()\"\n [routerLink]=\"[]\"\n >\n <sky-icon iconName=\"link\" />\n <span class=\"sky-screen-reader-only\"\n >Link for section titled {{ headingText() }}</span\n >\n </a>\n <span skyTrim [class.sky-docs-text-strikethrough]=\"strikethrough()\">\n @if (headingTextFormat() === 'code') {\n <code>{{ headingText() }}</code>\n } @else {\n {{ headingText() }}\n }\n </span>\n</ng-template>\n", styles: [":host{display:flex;flex-wrap:wrap;align-items:center;gap:10px}:host([id]){padding-top:
|
|
949
|
+
], selector: 'sky-docs-heading-anchor', template: "@switch (headingLevel()) {\n @case (1) {\n <h1 class=\"sky-docs-heading-anchor-heading\">\n <ng-container [ngTemplateOutlet]=\"headingTextRef\" />\n </h1>\n }\n @case (2) {\n <h2 class=\"sky-docs-heading-anchor-heading\">\n <ng-container [ngTemplateOutlet]=\"headingTextRef\" />\n </h2>\n }\n @case (3) {\n <h3 class=\"sky-docs-heading-anchor-heading\">\n <ng-container [ngTemplateOutlet]=\"headingTextRef\" />\n </h3>\n }\n @case (4) {\n <h4 class=\"sky-docs-heading-anchor-heading\">\n <ng-container [ngTemplateOutlet]=\"headingTextRef\" />\n </h4>\n }\n @case (5) {\n <h5 class=\"sky-docs-heading-anchor-heading\">\n <ng-container [ngTemplateOutlet]=\"headingTextRef\" />\n </h5>\n }\n @case (6) {\n <h6 class=\"sky-docs-heading-anchor-heading\">\n <ng-container [ngTemplateOutlet]=\"headingTextRef\" />\n </h6>\n }\n}\n\n@if (categoryColor(); as categoryColor) {\n <sky-docs-category-tag [color]=\"categoryColor\">\n @if (categoryTemplate(); as categoryTemplate) {\n <ng-container [ngTemplateOutlet]=\"categoryTemplate\" />\n } @else {\n {{ categoryText() }}\n }\n </sky-docs-category-tag>\n}\n\n<ng-content />\n\n<ng-template #headingTextRef>\n <a\n class=\"sky-docs-heading-anchor-link\"\n queryParamsHandling=\"merge\"\n [fragment]=\"anchorId()\"\n [routerLink]=\"[]\"\n >\n <sky-icon iconName=\"link\" iconSize=\"m\" />\n <span class=\"sky-screen-reader-only\"\n >Link for section titled {{ headingText() }}</span\n >\n </a>\n <span skyTrim [class.sky-docs-text-strikethrough]=\"strikethrough()\">\n @if (headingTextFormat() === 'code') {\n <code>{{ headingText() }}</code>\n } @else {\n {{ headingText() }}\n }\n </span>\n</ng-template>\n", styles: [":host{display:flex;flex-wrap:wrap;align-items:center;gap:10px}:host([id]){padding-top:var(--sky-margin-stacked-xl);margin-top:-1em}.sky-docs-heading-anchor-heading{word-break:break-all;position:relative;margin:0}.sky-docs-heading-anchor-heading:hover .sky-docs-heading-anchor-link{opacity:1}.sky-docs-heading-anchor-link{opacity:0;position:absolute;transition:opacity .25s;display:inline-block;left:-22px}\n"] }]
|
|
921
950
|
}] });
|
|
922
951
|
|
|
923
952
|
/**
|
|
@@ -1050,13 +1079,13 @@ class SkyDocsTableOfContentsPageComponent {
|
|
|
1050
1079
|
: 0;
|
|
1051
1080
|
}
|
|
1052
1081
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyDocsTableOfContentsPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1053
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SkyDocsTableOfContentsPageComponent, isStandalone: true, selector: "sky-docs-toc-page", inputs: { menuHeadingText: { classPropertyName: "menuHeadingText", publicName: "menuHeadingText", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.sky-docs-toc-page-with-links": "links().length > 0" } }, ngImport: i0, template: "@if (links().length > 0) {\n <div class=\"sky-docs-toc-menu\">\n <sky-docs-toc [headingText]=\"menuHeadingText()\" [links]=\"links()\" />\n </div>\n}\n<div class=\"sky-docs-toc-body\">\n <ng-content />\n</div>\n", styles: [":host{display:flex;align-items:flex-start;flex-direction:row-reverse;gap:40px}:host(:not(.sky-docs-toc-page-with-links)) .sky-docs-toc-body{width:100%}:host(.sky-docs-toc-page-with-links) .sky-docs-toc-body{min-width:50%;flex:1}:host(.sky-docs-toc-page-with-links) .sky-docs-toc-menu{position:sticky;top:
|
|
1082
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SkyDocsTableOfContentsPageComponent, isStandalone: true, selector: "sky-docs-toc-page", inputs: { menuHeadingText: { classPropertyName: "menuHeadingText", publicName: "menuHeadingText", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.sky-docs-toc-page-with-links": "links().length > 0" } }, ngImport: i0, template: "@if (links().length > 0) {\n <div class=\"sky-docs-toc-menu\">\n <sky-docs-toc [headingText]=\"menuHeadingText()\" [links]=\"links()\" />\n </div>\n}\n<div class=\"sky-docs-toc-body\">\n <ng-content />\n</div>\n", styles: [":host{display:flex;align-items:flex-start;flex-direction:row-reverse;gap:40px}:host(:not(.sky-docs-toc-page-with-links)) .sky-docs-toc-body{width:100%}:host(.sky-docs-toc-page-with-links) .sky-docs-toc-body{min-width:50%;flex:1}:host(.sky-docs-toc-page-with-links) .sky-docs-toc-menu{position:sticky;top:var(--sky-viewport-top);flex-shrink:1;max-width:40%;min-width:20%}\n"], dependencies: [{ kind: "component", type: SkyDocsTableOfContentsComponent, selector: "sky-docs-toc", inputs: ["headingText", "links"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1054
1083
|
}
|
|
1055
1084
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyDocsTableOfContentsPageComponent, decorators: [{
|
|
1056
1085
|
type: Component,
|
|
1057
1086
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1058
1087
|
'[class.sky-docs-toc-page-with-links]': 'links().length > 0',
|
|
1059
|
-
}, imports: [SkyDocsTableOfContentsComponent], selector: 'sky-docs-toc-page', template: "@if (links().length > 0) {\n <div class=\"sky-docs-toc-menu\">\n <sky-docs-toc [headingText]=\"menuHeadingText()\" [links]=\"links()\" />\n </div>\n}\n<div class=\"sky-docs-toc-body\">\n <ng-content />\n</div>\n", styles: [":host{display:flex;align-items:flex-start;flex-direction:row-reverse;gap:40px}:host(:not(.sky-docs-toc-page-with-links)) .sky-docs-toc-body{width:100%}:host(.sky-docs-toc-page-with-links) .sky-docs-toc-body{min-width:50%;flex:1}:host(.sky-docs-toc-page-with-links) .sky-docs-toc-menu{position:sticky;top:
|
|
1088
|
+
}, imports: [SkyDocsTableOfContentsComponent], selector: 'sky-docs-toc-page', template: "@if (links().length > 0) {\n <div class=\"sky-docs-toc-menu\">\n <sky-docs-toc [headingText]=\"menuHeadingText()\" [links]=\"links()\" />\n </div>\n}\n<div class=\"sky-docs-toc-body\">\n <ng-content />\n</div>\n", styles: [":host{display:flex;align-items:flex-start;flex-direction:row-reverse;gap:40px}:host(:not(.sky-docs-toc-page-with-links)) .sky-docs-toc-body{width:100%}:host(.sky-docs-toc-page-with-links) .sky-docs-toc-body{min-width:50%;flex:1}:host(.sky-docs-toc-page-with-links) .sky-docs-toc-menu{position:sticky;top:var(--sky-viewport-top);flex-shrink:1;max-width:40%;min-width:20%}\n"] }]
|
|
1060
1089
|
}] });
|
|
1061
1090
|
|
|
1062
1091
|
/**
|
|
@@ -1707,20 +1736,18 @@ class SkyDocsShowcaseAreaDevelopmentComponent {
|
|
|
1707
1736
|
}
|
|
1708
1737
|
#hostSvc;
|
|
1709
1738
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyDocsShowcaseAreaDevelopmentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1710
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SkyDocsShowcaseAreaDevelopmentComponent, isStandalone: true, selector: "sky-docs-showcase-area-development",
|
|
1739
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SkyDocsShowcaseAreaDevelopmentComponent, isStandalone: true, selector: "sky-docs-showcase-area-development", providers: [SkyDocsHeadingAnchorService], ngImport: i0, template: "<sky-docs-toc-page menuHeadingText=\"Development\">\n @if (documentationGroup()?.packageInfo; as packageInfo) {\n <div\n class=\"sky-docs-showcase-section sky-margin-stacked-xxl sky-border-bottom-row\"\n >\n <sky-docs-heading-anchor\n anchorId=\"installation\"\n class=\"sky-margin-stacked-lg\"\n headingText=\"Installation\"\n />\n <sky-description-list>\n <sky-description-list-content>\n <sky-description-list-term> NPM package </sky-description-list-term>\n <sky-description-list-description>\n <code class=\"sky-docs-codespan sky-margin-inline-sm\">{{\n packageInfo.packageName\n }}</code>\n <a [attr.href]=\"packageInfo.registryUrl\">View in NPM</a\n ><span> | </span\n ><a [attr.href]=\"packageInfo.repoUrl\">View in GitHub</a>\n </sky-description-list-description>\n </sky-description-list-content>\n <sky-description-list-content\n helpPopoverContent=\"To use this module, you must install peer dependencies along with its package. Also, after you install the package, you must add the module as an export in your SPA's main module to make exports available to your SPA.\"\n >\n <sky-description-list-term>\n Install with NPM\n </sky-description-list-term>\n <sky-description-list-description>\n <code\n #installationRef\n class=\"sky-docs-codespan sky-margin-inline-sm sky-margin-stacked-sm\"\n >\n npm install --save-exact {{ packageInfo.packageName }}\n </code>\n <button\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n skyDocsClipboardButton\n copySuccessMessage=\"Command copied\"\n [clipboardTarget]=\"installationRef\"\n >\n <sky-icon iconName=\"clipboard-multiple\" />\n Copy\n </button>\n </sky-description-list-description>\n </sky-description-list-content>\n </sky-description-list>\n </div>\n }\n <div\n class=\"sky-docs-showcase-section sky-margin-stacked-xxl sky-border-bottom-row\"\n >\n <ng-content />\n </div>\n @if (documentationGroup()?.publicApi; as definitions) {\n @for (\n definition of definitions;\n track definition.docsId;\n let last = $last\n ) {\n <sky-docs-type-definition [definition]=\"definition\" [stacked]=\"!last\" />\n }\n }\n</sky-docs-toc-page>\n", styles: [":host{display:block;padding-top:var(--sky-padding-even-xl)}.sky-docs-showcase-section{padding-bottom:var(--sky-padding-even-xl)}.sky-docs-showcase-section:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: SkyDescriptionListModule }, { kind: "component", type: i1.λ18, selector: "sky-description-list", inputs: ["defaultDescription", "listItemWidth", "mode"] }, { kind: "component", type: i1.λ21, selector: "sky-description-list-content", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: i1.λ19, selector: "sky-description-list-term" }, { kind: "component", type: i1.λ20, selector: "sky-description-list-description" }, { kind: "ngmodule", type: SkyDocsClipboardModule }, { kind: "directive", type: SkyDocsClipboardButtonDirective, selector: "[skyDocsClipboardButton]", inputs: ["clipboardTarget", "copySuccessMessage"] }, { kind: "ngmodule", type: SkyDocsHeadingAnchorModule }, { kind: "component", type: SkyDocsHeadingAnchorComponent, selector: "sky-docs-heading-anchor", inputs: ["anchorId", "headingText", "headingTextFormat", "categoryColor", "categoryTemplate", "categoryText", "headingLevel", "strikethrough"] }, { kind: "ngmodule", type: SkyDocsTableOfContentsModule }, { kind: "component", type: SkyDocsTableOfContentsPageComponent, selector: "sky-docs-toc-page", inputs: ["menuHeadingText"] }, { kind: "ngmodule", type: SkyDocsTypeDefinitionModule }, { kind: "component", type: SkyDocsTypeDefinitionComponent, selector: "sky-docs-type-definition", inputs: ["definition", "stacked"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i2.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant", "iconSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1711
1740
|
}
|
|
1712
1741
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyDocsShowcaseAreaDevelopmentComponent, decorators: [{
|
|
1713
1742
|
type: Component,
|
|
1714
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1715
|
-
class: 'sky-padding-even-xl',
|
|
1716
|
-
}, imports: [
|
|
1743
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
1717
1744
|
SkyDescriptionListModule,
|
|
1718
1745
|
SkyDocsClipboardModule,
|
|
1719
1746
|
SkyDocsHeadingAnchorModule,
|
|
1720
1747
|
SkyDocsTableOfContentsModule,
|
|
1721
1748
|
SkyDocsTypeDefinitionModule,
|
|
1722
1749
|
SkyIconModule,
|
|
1723
|
-
], providers: [SkyDocsHeadingAnchorService], selector: 'sky-docs-showcase-area-development', template: "<sky-docs-toc-page menuHeadingText=\"Development\">\n @if (documentationGroup()?.packageInfo; as packageInfo) {\n <div\n class=\"sky-docs-showcase-section sky-margin-stacked-xxl sky-border-bottom-row\"\n >\n <sky-docs-heading-anchor\n anchorId=\"installation\"\n class=\"sky-margin-stacked-lg\"\n headingText=\"Installation\"\n />\n <sky-description-list>\n <sky-description-list-content>\n <sky-description-list-term> NPM package </sky-description-list-term>\n <sky-description-list-description>\n <code class=\"sky-docs-codespan sky-margin-inline-sm\">{{\n packageInfo.packageName\n }}</code>\n <a [attr.href]=\"packageInfo.registryUrl\">View in NPM</a\n ><span> | </span\n ><a [attr.href]=\"packageInfo.repoUrl\">View in GitHub</a>\n </sky-description-list-description>\n </sky-description-list-content>\n <sky-description-list-content\n helpPopoverContent=\"To use this module, you must install peer dependencies along with its package. Also, after you install the package, you must add the module as an export in your SPA's main module to make exports available to your SPA.\"\n >\n <sky-description-list-term>\n Install with NPM\n </sky-description-list-term>\n <sky-description-list-description>\n <code\n #installationRef\n class=\"sky-docs-codespan sky-margin-inline-sm sky-margin-stacked-sm\"\n >\n npm install --save-exact {{ packageInfo.packageName }}\n </code>\n <button\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n skyDocsClipboardButton\n copySuccessMessage=\"Command copied\"\n [clipboardTarget]=\"installationRef\"\n >\n <sky-icon iconName=\"clipboard-multiple\" />\n Copy\n </button>\n </sky-description-list-description>\n </sky-description-list-content>\n </sky-description-list>\n </div>\n }\n <div\n class=\"sky-docs-showcase-section sky-margin-stacked-xxl sky-border-bottom-row\"\n >\n <ng-content />\n </div>\n @if (documentationGroup()?.publicApi; as definitions) {\n @for (\n definition of definitions;\n track definition.docsId;\n let last = $last\n ) {\n <sky-docs-type-definition [definition]=\"definition\" [stacked]=\"!last\" />\n }\n }\n</sky-docs-toc-page>\n", styles: [":host{display:block}.sky-docs-showcase-section{padding-bottom:var(--sky-padding-even-xl)}.sky-docs-showcase-section:empty{display:none}\n"] }]
|
|
1750
|
+
], providers: [SkyDocsHeadingAnchorService], selector: 'sky-docs-showcase-area-development', template: "<sky-docs-toc-page menuHeadingText=\"Development\">\n @if (documentationGroup()?.packageInfo; as packageInfo) {\n <div\n class=\"sky-docs-showcase-section sky-margin-stacked-xxl sky-border-bottom-row\"\n >\n <sky-docs-heading-anchor\n anchorId=\"installation\"\n class=\"sky-margin-stacked-lg\"\n headingText=\"Installation\"\n />\n <sky-description-list>\n <sky-description-list-content>\n <sky-description-list-term> NPM package </sky-description-list-term>\n <sky-description-list-description>\n <code class=\"sky-docs-codespan sky-margin-inline-sm\">{{\n packageInfo.packageName\n }}</code>\n <a [attr.href]=\"packageInfo.registryUrl\">View in NPM</a\n ><span> | </span\n ><a [attr.href]=\"packageInfo.repoUrl\">View in GitHub</a>\n </sky-description-list-description>\n </sky-description-list-content>\n <sky-description-list-content\n helpPopoverContent=\"To use this module, you must install peer dependencies along with its package. Also, after you install the package, you must add the module as an export in your SPA's main module to make exports available to your SPA.\"\n >\n <sky-description-list-term>\n Install with NPM\n </sky-description-list-term>\n <sky-description-list-description>\n <code\n #installationRef\n class=\"sky-docs-codespan sky-margin-inline-sm sky-margin-stacked-sm\"\n >\n npm install --save-exact {{ packageInfo.packageName }}\n </code>\n <button\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n skyDocsClipboardButton\n copySuccessMessage=\"Command copied\"\n [clipboardTarget]=\"installationRef\"\n >\n <sky-icon iconName=\"clipboard-multiple\" />\n Copy\n </button>\n </sky-description-list-description>\n </sky-description-list-content>\n </sky-description-list>\n </div>\n }\n <div\n class=\"sky-docs-showcase-section sky-margin-stacked-xxl sky-border-bottom-row\"\n >\n <ng-content />\n </div>\n @if (documentationGroup()?.publicApi; as definitions) {\n @for (\n definition of definitions;\n track definition.docsId;\n let last = $last\n ) {\n <sky-docs-type-definition [definition]=\"definition\" [stacked]=\"!last\" />\n }\n }\n</sky-docs-toc-page>\n", styles: [":host{display:block;padding-top:var(--sky-padding-even-xl)}.sky-docs-showcase-section{padding-bottom:var(--sky-padding-even-xl)}.sky-docs-showcase-section:empty{display:none}\n"] }]
|
|
1724
1751
|
}] });
|
|
1725
1752
|
|
|
1726
1753
|
/**
|
|
@@ -1752,39 +1779,40 @@ class SkyDocsShowcaseAreaExamplesComponent {
|
|
|
1752
1779
|
}
|
|
1753
1780
|
#hostSvc;
|
|
1754
1781
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyDocsShowcaseAreaExamplesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1755
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SkyDocsShowcaseAreaExamplesComponent, isStandalone: true, selector: "sky-docs-showcase-area-examples",
|
|
1782
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SkyDocsShowcaseAreaExamplesComponent, isStandalone: true, selector: "sky-docs-showcase-area-examples", providers: [SkyDocsHeadingAnchorService], ngImport: i0, template: "@if (documentationGroup()?.codeExamples; as codeExamples) {\n @for (\n example of codeExamples;\n track example.componentName;\n let last = $last\n ) {\n <sky-docs-code-example-viewer\n [componentName]=\"example.componentName\"\n [componentSelector]=\"example.selector\"\n [componentType]=\"\n example.componentName | skyDocsCodeExampleNameToComponentType\n \"\n [demoHidden]=\"!!example.demoHidden\"\n [files]=\"example.files\"\n [headingText]=\"example.title || 'Example'\"\n [primaryFile]=\"example.primaryFile\"\n [stacked]=\"!last\"\n />\n }\n}\n", styles: [":host{display:block;padding-top:var(--sky-padding-even-xl)}\n"], dependencies: [{ kind: "pipe", type: SkyDocsCodeExampleNameToComponentTypePipe, name: "skyDocsCodeExampleNameToComponentType" }, { kind: "ngmodule", type: SkyDocsCodeExampleViewerModule }, { kind: "component", type: SkyDocsCodeExampleViewerComponent, selector: "sky-docs-code-example-viewer", inputs: ["componentName", "componentSelector", "componentType", "files", "headingText", "primaryFile", "demoHidden", "stacked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1756
1783
|
}
|
|
1757
1784
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyDocsShowcaseAreaExamplesComponent, decorators: [{
|
|
1758
1785
|
type: Component,
|
|
1759
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1760
|
-
class: 'sky-padding-even-xl',
|
|
1761
|
-
}, imports: [
|
|
1786
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
1762
1787
|
SkyDocsCodeExampleNameToComponentTypePipe,
|
|
1763
1788
|
SkyDocsCodeExampleViewerModule,
|
|
1764
|
-
], providers: [SkyDocsHeadingAnchorService], selector: 'sky-docs-showcase-area-examples', template: "@if (documentationGroup()?.codeExamples; as codeExamples) {\n @for (\n example of codeExamples;\n track example.componentName;\n let last = $last\n ) {\n <sky-docs-code-example-viewer\n [componentName]=\"example.componentName\"\n [componentSelector]=\"example.selector\"\n [componentType]=\"\n example.componentName | skyDocsCodeExampleNameToComponentType\n \"\n [demoHidden]=\"!!example.demoHidden\"\n [files]=\"example.files\"\n [headingText]=\"example.title || 'Example'\"\n [primaryFile]=\"example.primaryFile\"\n [stacked]=\"!last\"\n />\n }\n}\n", styles: [":host{display:block}\n"] }]
|
|
1789
|
+
], providers: [SkyDocsHeadingAnchorService], selector: 'sky-docs-showcase-area-examples', template: "@if (documentationGroup()?.codeExamples; as codeExamples) {\n @for (\n example of codeExamples;\n track example.componentName;\n let last = $last\n ) {\n <sky-docs-code-example-viewer\n [componentName]=\"example.componentName\"\n [componentSelector]=\"example.selector\"\n [componentType]=\"\n example.componentName | skyDocsCodeExampleNameToComponentType\n \"\n [demoHidden]=\"!!example.demoHidden\"\n [files]=\"example.files\"\n [headingText]=\"example.title || 'Example'\"\n [primaryFile]=\"example.primaryFile\"\n [stacked]=\"!last\"\n />\n }\n}\n", styles: [":host{display:block;padding-top:var(--sky-padding-even-xl)}\n"] }]
|
|
1765
1790
|
}] });
|
|
1766
1791
|
|
|
1792
|
+
var showcaseAreaExamples_component = /*#__PURE__*/Object.freeze({
|
|
1793
|
+
__proto__: null,
|
|
1794
|
+
SkyDocsShowcaseAreaExamplesComponent: SkyDocsShowcaseAreaExamplesComponent
|
|
1795
|
+
});
|
|
1796
|
+
|
|
1767
1797
|
/**
|
|
1768
1798
|
* Content for the "Overview" tab.
|
|
1769
1799
|
* @internal
|
|
1770
1800
|
*/
|
|
1771
1801
|
class SkyDocsShowcaseAreaOverviewComponent {
|
|
1772
1802
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyDocsShowcaseAreaOverviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1773
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: SkyDocsShowcaseAreaOverviewComponent, isStandalone: true, selector: "sky-docs-showcase-area-overview",
|
|
1803
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: SkyDocsShowcaseAreaOverviewComponent, isStandalone: true, selector: "sky-docs-showcase-area-overview", providers: [SkyDocsHeadingAnchorService], ngImport: i0, template: `
|
|
1774
1804
|
<sky-docs-toc-page menuHeadingText="Overview">
|
|
1775
1805
|
<ng-content />
|
|
1776
1806
|
</sky-docs-toc-page>
|
|
1777
|
-
`, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: SkyDocsTableOfContentsModule }, { kind: "component", type: SkyDocsTableOfContentsPageComponent, selector: "sky-docs-toc-page", inputs: ["menuHeadingText"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1807
|
+
`, isInline: true, styles: [":host{display:block;padding-top:var(--sky-padding-even-xl)}\n"], dependencies: [{ kind: "ngmodule", type: SkyDocsTableOfContentsModule }, { kind: "component", type: SkyDocsTableOfContentsPageComponent, selector: "sky-docs-toc-page", inputs: ["menuHeadingText"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1778
1808
|
}
|
|
1779
1809
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyDocsShowcaseAreaOverviewComponent, decorators: [{
|
|
1780
1810
|
type: Component,
|
|
1781
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1782
|
-
class: 'sky-padding-even-xl',
|
|
1783
|
-
}, imports: [SkyDocsTableOfContentsModule], providers: [SkyDocsHeadingAnchorService], selector: 'sky-docs-showcase-area-overview', template: `
|
|
1811
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [SkyDocsTableOfContentsModule], providers: [SkyDocsHeadingAnchorService], selector: 'sky-docs-showcase-area-overview', template: `
|
|
1784
1812
|
<sky-docs-toc-page menuHeadingText="Overview">
|
|
1785
1813
|
<ng-content />
|
|
1786
1814
|
</sky-docs-toc-page>
|
|
1787
|
-
`, styles: [":host{display:block}\n"] }]
|
|
1815
|
+
`, styles: [":host{display:block;padding-top:var(--sky-padding-even-xl)}\n"] }]
|
|
1788
1816
|
}] });
|
|
1789
1817
|
|
|
1790
1818
|
/**
|
|
@@ -1798,13 +1826,11 @@ class SkyDocsShowcaseAreaTestingComponent {
|
|
|
1798
1826
|
}
|
|
1799
1827
|
#hostSvc;
|
|
1800
1828
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyDocsShowcaseAreaTestingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1801
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SkyDocsShowcaseAreaTestingComponent, isStandalone: true, selector: "sky-docs-showcase-area-testing",
|
|
1829
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SkyDocsShowcaseAreaTestingComponent, isStandalone: true, selector: "sky-docs-showcase-area-testing", providers: [SkyDocsHeadingAnchorService], ngImport: i0, template: "<sky-docs-toc-page menuHeadingText=\"Testing\">\n <div\n class=\"sky-docs-showcase-section sky-margin-stacked-xxl sky-border-bottom-row\"\n >\n <p class=\"sky-margin-stacked-xl\">\n SKY UX test harnesses are built upon Angular CDK component harnesses. For\n more information see the\n <a href=\"https://material.angular.io/cdk/test-harnesses/overview\"\n >Angular CDK component harness documentation</a\n >.\n </p>\n <ng-content />\n </div>\n @if (documentationGroup()?.testing; as definitions) {\n @for (\n definition of definitions;\n track definition.docsId;\n let last = $last\n ) {\n <sky-docs-type-definition [definition]=\"definition\" [stacked]=\"!last\" />\n }\n }\n</sky-docs-toc-page>\n", styles: [":host{display:block;padding-top:var(--sky-padding-even-xl)}.sky-docs-showcase-section{padding-bottom:var(--sky-padding-even-xl)}.sky-docs-showcase-section:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: SkyDocsTableOfContentsModule }, { kind: "component", type: SkyDocsTableOfContentsPageComponent, selector: "sky-docs-toc-page", inputs: ["menuHeadingText"] }, { kind: "ngmodule", type: SkyDocsTypeDefinitionModule }, { kind: "component", type: SkyDocsTypeDefinitionComponent, selector: "sky-docs-type-definition", inputs: ["definition", "stacked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1802
1830
|
}
|
|
1803
1831
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyDocsShowcaseAreaTestingComponent, decorators: [{
|
|
1804
1832
|
type: Component,
|
|
1805
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host:
|
|
1806
|
-
class: 'sky-padding-even-xl',
|
|
1807
|
-
}, imports: [SkyDocsTableOfContentsModule, SkyDocsTypeDefinitionModule], providers: [SkyDocsHeadingAnchorService], selector: 'sky-docs-showcase-area-testing', template: "<sky-docs-toc-page menuHeadingText=\"Testing\">\n <div\n class=\"sky-docs-showcase-section sky-margin-stacked-xxl sky-border-bottom-row\"\n >\n <ng-content />\n </div>\n @if (documentationGroup()?.testing; as definitions) {\n @for (\n definition of definitions;\n track definition.docsId;\n let last = $last\n ) {\n <sky-docs-type-definition [definition]=\"definition\" [stacked]=\"!last\" />\n }\n }\n</sky-docs-toc-page>\n", styles: [":host{display:block}.sky-docs-showcase-section{padding-bottom:var(--sky-padding-even-xl)}.sky-docs-showcase-section:empty{display:none}\n"] }]
|
|
1833
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [SkyDocsTableOfContentsModule, SkyDocsTypeDefinitionModule], providers: [SkyDocsHeadingAnchorService], selector: 'sky-docs-showcase-area-testing', template: "<sky-docs-toc-page menuHeadingText=\"Testing\">\n <div\n class=\"sky-docs-showcase-section sky-margin-stacked-xxl sky-border-bottom-row\"\n >\n <p class=\"sky-margin-stacked-xl\">\n SKY UX test harnesses are built upon Angular CDK component harnesses. For\n more information see the\n <a href=\"https://material.angular.io/cdk/test-harnesses/overview\"\n >Angular CDK component harness documentation</a\n >.\n </p>\n <ng-content />\n </div>\n @if (documentationGroup()?.testing; as definitions) {\n @for (\n definition of definitions;\n track definition.docsId;\n let last = $last\n ) {\n <sky-docs-type-definition [definition]=\"definition\" [stacked]=\"!last\" />\n }\n }\n</sky-docs-toc-page>\n", styles: [":host{display:block;padding-top:var(--sky-padding-even-xl)}.sky-docs-showcase-section{padding-bottom:var(--sky-padding-even-xl)}.sky-docs-showcase-section:empty{display:none}\n"] }]
|
|
1808
1834
|
}] });
|
|
1809
1835
|
|
|
1810
1836
|
/**
|
|
@@ -1821,7 +1847,13 @@ class SkyDocsShowcaseComponent {
|
|
|
1821
1847
|
this.docsGroup = computed(() => {
|
|
1822
1848
|
const groupName = this.groupName();
|
|
1823
1849
|
const packageName = this.packageName();
|
|
1824
|
-
|
|
1850
|
+
try {
|
|
1851
|
+
const group = getDocumentationGroup(packageName, groupName);
|
|
1852
|
+
return group;
|
|
1853
|
+
}
|
|
1854
|
+
catch {
|
|
1855
|
+
return;
|
|
1856
|
+
}
|
|
1825
1857
|
});
|
|
1826
1858
|
this.developmentContent = contentChild(SkyDocsShowcaseAreaDevelopmentComponent);
|
|
1827
1859
|
this.overviewContent = contentChild(SkyDocsShowcaseAreaOverviewComponent);
|
|
@@ -1829,10 +1861,10 @@ class SkyDocsShowcaseComponent {
|
|
|
1829
1861
|
effect(() => {
|
|
1830
1862
|
const docsGroup = this.docsGroup();
|
|
1831
1863
|
const anchorIds = {};
|
|
1832
|
-
docsGroup
|
|
1864
|
+
docsGroup?.publicApi.forEach((def) => {
|
|
1833
1865
|
anchorIds[def.name] = def.anchorId;
|
|
1834
1866
|
});
|
|
1835
|
-
docsGroup
|
|
1867
|
+
docsGroup?.testing.forEach((def) => {
|
|
1836
1868
|
anchorIds[def.name] = def.anchorId;
|
|
1837
1869
|
});
|
|
1838
1870
|
this.#anchorIdsSvc.updateAnchorIds(anchorIds);
|
|
@@ -1843,21 +1875,21 @@ class SkyDocsShowcaseComponent {
|
|
|
1843
1875
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SkyDocsShowcaseComponent, isStandalone: true, selector: "sky-docs-showcase", inputs: { groupName: { classPropertyName: "groupName", publicName: "groupName", isSignal: true, isRequired: true, transformFunction: null }, packageName: { classPropertyName: "packageName", publicName: "packageName", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
|
|
1844
1876
|
SkyDocsTypeDefinitionAnchorIdsService,
|
|
1845
1877
|
SkyDocsShowcaseHostService,
|
|
1846
|
-
], queries: [{ propertyName: "developmentContent", first: true, predicate: SkyDocsShowcaseAreaDevelopmentComponent, descendants: true, isSignal: true }, { propertyName: "overviewContent", first: true, predicate: SkyDocsShowcaseAreaOverviewComponent, descendants: true, isSignal: true }, { propertyName: "testingContent", first: true, predicate: SkyDocsShowcaseAreaTestingComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<sky-tabset permalinkId=\"docs\">\n @if (overviewContent()) {\n <sky-tab tabHeading=\"Design\">\n <ng-container [ngTemplateOutlet]=\"overviewContentRef\" />\n </sky-tab>\n }\n @if (
|
|
1878
|
+
], queries: [{ propertyName: "developmentContent", first: true, predicate: SkyDocsShowcaseAreaDevelopmentComponent, descendants: true, isSignal: true }, { propertyName: "overviewContent", first: true, predicate: SkyDocsShowcaseAreaOverviewComponent, descendants: true, isSignal: true }, { propertyName: "testingContent", first: true, predicate: SkyDocsShowcaseAreaTestingComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@let group = docsGroup();\n<sky-tabset permalinkId=\"docs\">\n @if (overviewContent()) {\n <sky-tab tabHeading=\"Design\">\n <ng-container [ngTemplateOutlet]=\"overviewContentRef\" />\n </sky-tab>\n }\n @if ((group && group.publicApi.length > 0) || developmentContent()) {\n <sky-tab tabHeading=\"Development\">\n @if (developmentContent()) {\n <ng-container [ngTemplateOutlet]=\"developmentContentRef\" />\n } @else {\n <sky-docs-showcase-area-development />\n }\n </sky-tab>\n }\n @if ((group && group.testing.length > 0) || testingContent()) {\n <sky-tab tabHeading=\"Testing\">\n @if (testingContent()) {\n <ng-container [ngTemplateOutlet]=\"testingContentRef\" />\n } @else {\n <sky-docs-showcase-area-testing />\n }\n </sky-tab>\n }\n @if (group && group.codeExamples.length > 0) {\n <sky-tab tabHeading=\"Examples\">\n @defer (on viewport) {\n <sky-docs-showcase-area-examples />\n } @placeholder {\n <p>Loading...</p>\n }\n </sky-tab>\n }\n</sky-tabset>\n<ng-template #overviewContentRef>\n <ng-content select=\"sky-docs-showcase-area-overview\" />\n</ng-template>\n<ng-template #developmentContentRef>\n <ng-content select=\"sky-docs-showcase-area-development\" />\n</ng-template>\n<ng-template #testingContentRef>\n <ng-content select=\"sky-docs-showcase-area-testing\" />\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SkyDocsShowcaseAreaDevelopmentComponent, selector: "sky-docs-showcase-area-development" }, { kind: "component", type: SkyDocsShowcaseAreaTestingComponent, selector: "sky-docs-showcase-area-testing" }, { kind: "ngmodule", type: SkyTabsModule }, { kind: "component", type: i6.λ1, selector: "sky-tab", inputs: ["active", "disabled", "permalinkValue", "tabHeaderCount", "tabHeading", "tabIndexValue", "layout"], outputs: ["close"] }, { kind: "component", type: i6.λ2, selector: "sky-tabset", inputs: ["active", "ariaLabel", "ariaLabelledBy", "permalinkId", "tabStyle"], outputs: ["activeChange", "newTab", "openTab", "tabIndexesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [Promise.resolve().then(function () { return showcaseAreaExamples_component; }).then(m => m.SkyDocsShowcaseAreaExamplesComponent)]] }); }
|
|
1847
1879
|
}
|
|
1848
|
-
i0.ɵɵ
|
|
1849
|
-
|
|
1850
|
-
|
|
1851
|
-
|
|
1852
|
-
|
|
1853
|
-
|
|
1854
|
-
|
|
1855
|
-
|
|
1856
|
-
|
|
1857
|
-
|
|
1858
|
-
|
|
1859
|
-
|
|
1860
|
-
|
|
1880
|
+
i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.1", ngImport: i0, type: SkyDocsShowcaseComponent, resolveDeferredDeps: () => [Promise.resolve().then(function () { return showcaseAreaExamples_component; }).then(m => m.SkyDocsShowcaseAreaExamplesComponent)], resolveMetadata: SkyDocsShowcaseAreaExamplesComponent => ({ decorators: [{
|
|
1881
|
+
type: Component,
|
|
1882
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
1883
|
+
NgTemplateOutlet,
|
|
1884
|
+
SkyDocsShowcaseAreaDevelopmentComponent,
|
|
1885
|
+
SkyDocsShowcaseAreaExamplesComponent,
|
|
1886
|
+
SkyDocsShowcaseAreaTestingComponent,
|
|
1887
|
+
SkyTabsModule,
|
|
1888
|
+
], providers: [
|
|
1889
|
+
SkyDocsTypeDefinitionAnchorIdsService,
|
|
1890
|
+
SkyDocsShowcaseHostService,
|
|
1891
|
+
], selector: 'sky-docs-showcase', template: "@let group = docsGroup();\n<sky-tabset permalinkId=\"docs\">\n @if (overviewContent()) {\n <sky-tab tabHeading=\"Design\">\n <ng-container [ngTemplateOutlet]=\"overviewContentRef\" />\n </sky-tab>\n }\n @if ((group && group.publicApi.length > 0) || developmentContent()) {\n <sky-tab tabHeading=\"Development\">\n @if (developmentContent()) {\n <ng-container [ngTemplateOutlet]=\"developmentContentRef\" />\n } @else {\n <sky-docs-showcase-area-development />\n }\n </sky-tab>\n }\n @if ((group && group.testing.length > 0) || testingContent()) {\n <sky-tab tabHeading=\"Testing\">\n @if (testingContent()) {\n <ng-container [ngTemplateOutlet]=\"testingContentRef\" />\n } @else {\n <sky-docs-showcase-area-testing />\n }\n </sky-tab>\n }\n @if (group && group.codeExamples.length > 0) {\n <sky-tab tabHeading=\"Examples\">\n @defer (on viewport) {\n <sky-docs-showcase-area-examples />\n } @placeholder {\n <p>Loading...</p>\n }\n </sky-tab>\n }\n</sky-tabset>\n<ng-template #overviewContentRef>\n <ng-content select=\"sky-docs-showcase-area-overview\" />\n</ng-template>\n<ng-template #developmentContentRef>\n <ng-content select=\"sky-docs-showcase-area-development\" />\n</ng-template>\n<ng-template #testingContentRef>\n <ng-content select=\"sky-docs-showcase-area-testing\" />\n</ng-template>\n", styles: [":host{display:block}\n"] }]
|
|
1892
|
+
}], ctorParameters: () => [], propDecorators: null }) });
|
|
1861
1893
|
|
|
1862
1894
|
/**
|
|
1863
1895
|
* @internal
|