@skyux/code-examples 15.0.0-alpha.1 → 15.0.0-alpha.2

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.
@@ -9001,11 +9001,11 @@ class LayoutFluidGridExampleComponent {
9001
9001
  this.disableMargin = false;
9002
9002
  }
9003
9003
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LayoutFluidGridExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
9004
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", 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{background-color:#97eced;border:1px solid #56e0e1;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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
9004
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", 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\" 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\" 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{background-color:#97eced;border:1px solid #56e0e1;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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
9005
9005
  }
9006
9006
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LayoutFluidGridExampleComponent, decorators: [{
9007
9007
  type: Component,
9008
- args: [{ selector: 'app-layout-fluid-grid-example', changeDetection: ChangeDetectionStrategy.Eager, 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{background-color:#97eced;border:1px solid #56e0e1;overflow-wrap:break-word}\n"] }]
9008
+ args: [{ selector: 'app-layout-fluid-grid-example', changeDetection: ChangeDetectionStrategy.Eager, 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\" 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\" 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{background-color:#97eced;border:1px solid #56e0e1;overflow-wrap:break-word}\n"] }]
9009
9009
  }] });
9010
9010
 
9011
9011
  /**