@skyux/code-examples 14.16.0 → 14.17.0
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.
|
@@ -9323,11 +9323,11 @@ class LayoutFluidGridExampleComponent {
|
|
|
9323
9323
|
this.disableMargin = false;
|
|
9324
9324
|
}
|
|
9325
9325
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LayoutFluidGridExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9326
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: LayoutFluidGridExampleComponent, isStandalone: true, selector: "app-layout-fluid-grid-example", ngImport: i0, template: "<div class=\"highlight-columns\">\n <sky-fluid-grid\n data-sky-id=\"fluid-grid\"\n [disableMargin]=\"disableMargin\"\n [gutterSize]=\"gutterSize\"\n >\n <sky-row data-sky-id=\"test-row\">\n <sky-column data-sky-id=\"test-column\" [screenSmall]=\"1\">\n [screenSmall]=\"1\"\n </sky-column>\n <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column [screenSmall]=\"2\"> [screenSmall]=\"2\" </sky-column>\n <sky-column [screenSmall]=\"2\"> [screenSmall]=\"2\" </sky-column>\n <sky-column [screenSmall]=\"2\"> [screenSmall]=\"2\" </sky-column>\n <sky-column [screenSmall]=\"2\"> [screenSmall]=\"2\" </sky-column>\n <sky-column [screenSmall]=\"2\"> [screenSmall]=\"2\" </sky-column>\n <sky-column [screenSmall]=\"2\"> [screenSmall]=\"2\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column [screenSmall]=\"3\"> [screenSmall]=\"3\" </sky-column>\n <sky-column [screenSmall]=\"3\"> [screenSmall]=\"3\" </sky-column>\n <sky-column [screenSmall]=\"3\"> [screenSmall]=\"3\" </sky-column>\n <sky-column [screenSmall]=\"3\"> [screenSmall]=\"3\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column [screenSmall]=\"4\"> [screenSmall]=\"4\" </sky-column>\n <sky-column [screenSmall]=\"4\"> [screenSmall]=\"4\" </sky-column>\n <sky-column [screenSmall]=\"4\"> [screenSmall]=\"4\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column [screenSmall]=\"5\"> [screenSmall]=\"5\" </sky-column>\n <sky-column [screenSmall]=\"7\"> [screenSmall]=\"7\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column [screenSmall]=\"6\"> [screenSmall]=\"6\" </sky-column>\n <sky-column [screenSmall]=\"6\"> [screenSmall]=\"6\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column [screenSmall]=\"8\"> [screenSmall]=\"8\" </sky-column>\n <sky-column [screenSmall]=\"4\"> [screenSmall]=\"4\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column [screenSmall]=\"9\"> [screenSmall]=\"9\" </sky-column>\n <sky-column [screenSmall]=\"3\"> [screenSmall]=\"3\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column [screenSmall]=\"10\"> [screenSmall]=\"10\" </sky-column>\n <sky-column [screenSmall]=\"2\"> [screenSmall]=\"2\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column [screenSmall]=\"11\"> [screenSmall]=\"11\" </sky-column>\n <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column\n data-sky-id=\"dynamic-column\"\n [screenXSmall]=\"6\"\n [screenSmall]=\"8\"\n [screenMedium]=\"9\"\n [screenLarge]=\"10\"\n >\n [screenXSmall]=\"6\" [screenSmall]=\"8\" [screenMedium]=\"9\"\n [screenLarge]=\"10\"\n </sky-column>\n <sky-column\n [screenXSmall]=\"6\"\n [screenSmall]=\"4\"\n [screenMedium]=\"3\"\n [screenLarge]=\"2\"\n >\n [screenXSmall]=\"6\" [screenSmall]=\"4\" [screenMedium]=\"3\"\n [screenLarge]=\"2\"\n </sky-column>\n </sky-row>\n\n <sky-row data-sky-id=\"reverse-row\" [reverseColumnOrder]=\"true\">\n <sky-column [screenSmall]=\"4\"> First column </sky-column>\n <sky-column [screenSmall]=\"4\"> Second column </sky-column>\n <sky-column [screenSmall]=\"4\"> Third column </sky-column>\n </sky-row>\n </sky-fluid-grid>\n</div>\n", styles: [".highlight-columns .sky-column{
|
|
9326
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: LayoutFluidGridExampleComponent, isStandalone: true, selector: "app-layout-fluid-grid-example", ngImport: i0, template: "<div class=\"highlight-columns sky-theme-color-classify-1-soft\">\n <sky-fluid-grid\n data-sky-id=\"fluid-grid\"\n [disableMargin]=\"disableMargin\"\n [gutterSize]=\"gutterSize\"\n >\n <sky-row data-sky-id=\"test-row\">\n <sky-column data-sky-id=\"test-column\" [screenSmall]=\"1\">\n [screenSmall]=\"1\"\n </sky-column>\n <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column [screenSmall]=\"2\"> [screenSmall]=\"2\" </sky-column>\n <sky-column [screenSmall]=\"2\"> [screenSmall]=\"2\" </sky-column>\n <sky-column [screenSmall]=\"2\"> [screenSmall]=\"2\" </sky-column>\n <sky-column [screenSmall]=\"2\"> [screenSmall]=\"2\" </sky-column>\n <sky-column [screenSmall]=\"2\"> [screenSmall]=\"2\" </sky-column>\n <sky-column [screenSmall]=\"2\"> [screenSmall]=\"2\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column [screenSmall]=\"3\"> [screenSmall]=\"3\" </sky-column>\n <sky-column [screenSmall]=\"3\"> [screenSmall]=\"3\" </sky-column>\n <sky-column [screenSmall]=\"3\"> [screenSmall]=\"3\" </sky-column>\n <sky-column [screenSmall]=\"3\"> [screenSmall]=\"3\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column [screenSmall]=\"4\"> [screenSmall]=\"4\" </sky-column>\n <sky-column [screenSmall]=\"4\"> [screenSmall]=\"4\" </sky-column>\n <sky-column [screenSmall]=\"4\"> [screenSmall]=\"4\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column [screenSmall]=\"5\"> [screenSmall]=\"5\" </sky-column>\n <sky-column [screenSmall]=\"7\"> [screenSmall]=\"7\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column [screenSmall]=\"6\"> [screenSmall]=\"6\" </sky-column>\n <sky-column [screenSmall]=\"6\"> [screenSmall]=\"6\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column [screenSmall]=\"8\"> [screenSmall]=\"8\" </sky-column>\n <sky-column [screenSmall]=\"4\"> [screenSmall]=\"4\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column [screenSmall]=\"9\"> [screenSmall]=\"9\" </sky-column>\n <sky-column [screenSmall]=\"3\"> [screenSmall]=\"3\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column [screenSmall]=\"10\"> [screenSmall]=\"10\" </sky-column>\n <sky-column [screenSmall]=\"2\"> [screenSmall]=\"2\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column [screenSmall]=\"11\"> [screenSmall]=\"11\" </sky-column>\n <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column\n data-sky-id=\"dynamic-column\"\n [screenXSmall]=\"6\"\n [screenSmall]=\"8\"\n [screenMedium]=\"9\"\n [screenLarge]=\"10\"\n >\n [screenXSmall]=\"6\" [screenSmall]=\"8\" [screenMedium]=\"9\"\n [screenLarge]=\"10\"\n </sky-column>\n <sky-column\n [screenXSmall]=\"6\"\n [screenSmall]=\"4\"\n [screenMedium]=\"3\"\n [screenLarge]=\"2\"\n >\n [screenXSmall]=\"6\" [screenSmall]=\"4\" [screenMedium]=\"3\"\n [screenLarge]=\"2\"\n </sky-column>\n </sky-row>\n\n <sky-row data-sky-id=\"reverse-row\" [reverseColumnOrder]=\"true\">\n <sky-column [screenSmall]=\"4\"> First column </sky-column>\n <sky-column [screenSmall]=\"4\"> Second column </sky-column>\n <sky-column [screenSmall]=\"4\"> Third column </sky-column>\n </sky-row>\n </sky-fluid-grid>\n</div>\n", styles: [".highlight-columns .sky-column{border:1px solid var(--sky-theme-color-classify-1-heavy);overflow-wrap:break-word}\n"], dependencies: [{ kind: "ngmodule", type: SkyFluidGridModule }, { kind: "component", type: i1$5.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { kind: "component", type: i1$5.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }, { kind: "component", type: i1$5.λ22, selector: "sky-fluid-grid", inputs: ["disableMargin", "gutterSize"] }] }); }
|
|
9327
9327
|
}
|
|
9328
9328
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LayoutFluidGridExampleComponent, decorators: [{
|
|
9329
9329
|
type: Component,
|
|
9330
|
-
args: [{ selector: 'app-layout-fluid-grid-example', imports: [SkyFluidGridModule], template: "<div class=\"highlight-columns\">\n <sky-fluid-grid\n data-sky-id=\"fluid-grid\"\n [disableMargin]=\"disableMargin\"\n [gutterSize]=\"gutterSize\"\n >\n <sky-row data-sky-id=\"test-row\">\n <sky-column data-sky-id=\"test-column\" [screenSmall]=\"1\">\n [screenSmall]=\"1\"\n </sky-column>\n <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column [screenSmall]=\"2\"> [screenSmall]=\"2\" </sky-column>\n <sky-column [screenSmall]=\"2\"> [screenSmall]=\"2\" </sky-column>\n <sky-column [screenSmall]=\"2\"> [screenSmall]=\"2\" </sky-column>\n <sky-column [screenSmall]=\"2\"> [screenSmall]=\"2\" </sky-column>\n <sky-column [screenSmall]=\"2\"> [screenSmall]=\"2\" </sky-column>\n <sky-column [screenSmall]=\"2\"> [screenSmall]=\"2\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column [screenSmall]=\"3\"> [screenSmall]=\"3\" </sky-column>\n <sky-column [screenSmall]=\"3\"> [screenSmall]=\"3\" </sky-column>\n <sky-column [screenSmall]=\"3\"> [screenSmall]=\"3\" </sky-column>\n <sky-column [screenSmall]=\"3\"> [screenSmall]=\"3\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column [screenSmall]=\"4\"> [screenSmall]=\"4\" </sky-column>\n <sky-column [screenSmall]=\"4\"> [screenSmall]=\"4\" </sky-column>\n <sky-column [screenSmall]=\"4\"> [screenSmall]=\"4\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column [screenSmall]=\"5\"> [screenSmall]=\"5\" </sky-column>\n <sky-column [screenSmall]=\"7\"> [screenSmall]=\"7\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column [screenSmall]=\"6\"> [screenSmall]=\"6\" </sky-column>\n <sky-column [screenSmall]=\"6\"> [screenSmall]=\"6\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column [screenSmall]=\"8\"> [screenSmall]=\"8\" </sky-column>\n <sky-column [screenSmall]=\"4\"> [screenSmall]=\"4\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column [screenSmall]=\"9\"> [screenSmall]=\"9\" </sky-column>\n <sky-column [screenSmall]=\"3\"> [screenSmall]=\"3\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column [screenSmall]=\"10\"> [screenSmall]=\"10\" </sky-column>\n <sky-column [screenSmall]=\"2\"> [screenSmall]=\"2\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column [screenSmall]=\"11\"> [screenSmall]=\"11\" </sky-column>\n <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column\n data-sky-id=\"dynamic-column\"\n [screenXSmall]=\"6\"\n [screenSmall]=\"8\"\n [screenMedium]=\"9\"\n [screenLarge]=\"10\"\n >\n [screenXSmall]=\"6\" [screenSmall]=\"8\" [screenMedium]=\"9\"\n [screenLarge]=\"10\"\n </sky-column>\n <sky-column\n [screenXSmall]=\"6\"\n [screenSmall]=\"4\"\n [screenMedium]=\"3\"\n [screenLarge]=\"2\"\n >\n [screenXSmall]=\"6\" [screenSmall]=\"4\" [screenMedium]=\"3\"\n [screenLarge]=\"2\"\n </sky-column>\n </sky-row>\n\n <sky-row data-sky-id=\"reverse-row\" [reverseColumnOrder]=\"true\">\n <sky-column [screenSmall]=\"4\"> First column </sky-column>\n <sky-column [screenSmall]=\"4\"> Second column </sky-column>\n <sky-column [screenSmall]=\"4\"> Third column </sky-column>\n </sky-row>\n </sky-fluid-grid>\n</div>\n", styles: [".highlight-columns .sky-column{
|
|
9330
|
+
args: [{ selector: 'app-layout-fluid-grid-example', imports: [SkyFluidGridModule], template: "<div class=\"highlight-columns sky-theme-color-classify-1-soft\">\n <sky-fluid-grid\n data-sky-id=\"fluid-grid\"\n [disableMargin]=\"disableMargin\"\n [gutterSize]=\"gutterSize\"\n >\n <sky-row data-sky-id=\"test-row\">\n <sky-column data-sky-id=\"test-column\" [screenSmall]=\"1\">\n [screenSmall]=\"1\"\n </sky-column>\n <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column [screenSmall]=\"2\"> [screenSmall]=\"2\" </sky-column>\n <sky-column [screenSmall]=\"2\"> [screenSmall]=\"2\" </sky-column>\n <sky-column [screenSmall]=\"2\"> [screenSmall]=\"2\" </sky-column>\n <sky-column [screenSmall]=\"2\"> [screenSmall]=\"2\" </sky-column>\n <sky-column [screenSmall]=\"2\"> [screenSmall]=\"2\" </sky-column>\n <sky-column [screenSmall]=\"2\"> [screenSmall]=\"2\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column [screenSmall]=\"3\"> [screenSmall]=\"3\" </sky-column>\n <sky-column [screenSmall]=\"3\"> [screenSmall]=\"3\" </sky-column>\n <sky-column [screenSmall]=\"3\"> [screenSmall]=\"3\" </sky-column>\n <sky-column [screenSmall]=\"3\"> [screenSmall]=\"3\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column [screenSmall]=\"4\"> [screenSmall]=\"4\" </sky-column>\n <sky-column [screenSmall]=\"4\"> [screenSmall]=\"4\" </sky-column>\n <sky-column [screenSmall]=\"4\"> [screenSmall]=\"4\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column [screenSmall]=\"5\"> [screenSmall]=\"5\" </sky-column>\n <sky-column [screenSmall]=\"7\"> [screenSmall]=\"7\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column [screenSmall]=\"6\"> [screenSmall]=\"6\" </sky-column>\n <sky-column [screenSmall]=\"6\"> [screenSmall]=\"6\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column [screenSmall]=\"8\"> [screenSmall]=\"8\" </sky-column>\n <sky-column [screenSmall]=\"4\"> [screenSmall]=\"4\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column [screenSmall]=\"9\"> [screenSmall]=\"9\" </sky-column>\n <sky-column [screenSmall]=\"3\"> [screenSmall]=\"3\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column [screenSmall]=\"10\"> [screenSmall]=\"10\" </sky-column>\n <sky-column [screenSmall]=\"2\"> [screenSmall]=\"2\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column [screenSmall]=\"11\"> [screenSmall]=\"11\" </sky-column>\n <sky-column [screenSmall]=\"1\"> [screenSmall]=\"1\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column\n data-sky-id=\"dynamic-column\"\n [screenXSmall]=\"6\"\n [screenSmall]=\"8\"\n [screenMedium]=\"9\"\n [screenLarge]=\"10\"\n >\n [screenXSmall]=\"6\" [screenSmall]=\"8\" [screenMedium]=\"9\"\n [screenLarge]=\"10\"\n </sky-column>\n <sky-column\n [screenXSmall]=\"6\"\n [screenSmall]=\"4\"\n [screenMedium]=\"3\"\n [screenLarge]=\"2\"\n >\n [screenXSmall]=\"6\" [screenSmall]=\"4\" [screenMedium]=\"3\"\n [screenLarge]=\"2\"\n </sky-column>\n </sky-row>\n\n <sky-row data-sky-id=\"reverse-row\" [reverseColumnOrder]=\"true\">\n <sky-column [screenSmall]=\"4\"> First column </sky-column>\n <sky-column [screenSmall]=\"4\"> Second column </sky-column>\n <sky-column [screenSmall]=\"4\"> Third column </sky-column>\n </sky-row>\n </sky-fluid-grid>\n</div>\n", styles: [".highlight-columns .sky-column{border:1px solid var(--sky-theme-color-classify-1-heavy);overflow-wrap:break-word}\n"] }]
|
|
9331
9331
|
}] });
|
|
9332
9332
|
|
|
9333
9333
|
/**
|