@kirbydesign/designsystem 8.1.1 → 8.1.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.
Files changed (6) hide show
  1. package/esm2020/grid/grid.component.mjs +4 -3
  2. package/fesm2015/kirbydesign-designsystem-grid.mjs +3 -2
  3. package/fesm2015/kirbydesign-designsystem-grid.mjs.map +1 -1
  4. package/fesm2020/kirbydesign-designsystem-grid.mjs +3 -2
  5. package/fesm2020/kirbydesign-designsystem-grid.mjs.map +1 -1
  6. package/package.json +2 -2
package/esm2020/grid/grid.component.mjs CHANGED
@@ -1,6 +1,7 @@
1
1
  import { CommonModule } from '@angular/common';
2
2
  import { Component, HostBinding, Input } from '@angular/core';
3
3
  import { ScssHelper } from '@kirbydesign/designsystem/helpers/scss';
4
+ import { ComponentLoaderDirective } from '@kirbydesign/designsystem/shared';
4
5
  import { BreakpointHelperService } from './breakpoint-helper.service';
5
6
  import * as i0 from "@angular/core";
6
7
  import * as i1 from "./breakpoint-helper.service";
@@ -82,10 +83,10 @@ export class GridComponent {
82
83
  }
83
84
  }
84
85
  /** @nocollapse */ GridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: GridComponent, deps: [{ token: i1.BreakpointHelperService }], target: i0.ɵɵFactoryTarget.Component });
85
- /** @nocollapse */ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: GridComponent, isStandalone: true, selector: "kirby-grid", inputs: { maxColumns: "maxColumns", cardConfigurations: "cardConfigurations" }, host: { properties: { "attr.max-columns": "this.maxColumns" } }, ngImport: i0, template: "<ng-container *ngFor=\"let card of cards\">\n <ng-template\n [kirbyLoadComponent]=\"card.configuration\"\n [cssClass]=\"'grid-item--col-' + card.colSpan\"\n ></ng-template>\n</ng-container>\n", styles: [":host{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(var(--kirby-grid-item-min-height, auto),auto);gap:24px;max-width:var(--kirby-page-max-width);margin:0 auto}@media (min-width: 721px){:host[max-columns=\"1\"]{grid-template-columns:repeat(1,1fr)}:host[max-columns=\"2\"]{grid-template-columns:repeat(2,1fr)}:host[max-columns=\"3\"]{grid-template-columns:repeat(3,1fr)}:host[max-columns=\"4\"]{grid-template-columns:repeat(4,1fr)}:host[max-columns=\"5\"]{grid-template-columns:repeat(5,1fr)}:host[max-columns=\"6\"]{grid-template-columns:repeat(6,1fr)}:host[max-columns=\"7\"]{grid-template-columns:repeat(7,1fr)}:host[max-columns=\"8\"]{grid-template-columns:repeat(8,1fr)}:host[max-columns=\"9\"]{grid-template-columns:repeat(9,1fr)}:host[max-columns=\"10\"]{grid-template-columns:repeat(10,1fr)}}@media (min-width: 721px){::ng-deep .grid-item--col-1{grid-column:span 1}}@media (min-width: 721px){::ng-deep .grid-item--col-2{grid-column:span 2}}@media (min-width: 721px){::ng-deep .grid-item--col-3{grid-column:span 3}}@media (min-width: 721px){::ng-deep .grid-item--col-4{grid-column:span 4}}@media (min-width: 721px){::ng-deep .grid-item--col-5{grid-column:span 5}}@media (min-width: 721px){::ng-deep .grid-item--col-6{grid-column:span 6}}@media (min-width: 721px){::ng-deep .grid-item--col-7{grid-column:span 7}}@media (min-width: 721px){::ng-deep .grid-item--col-8{grid-column:span 8}}@media (min-width: 721px){::ng-deep .grid-item--col-9{grid-column:span 9}}@media (min-width: 721px){::ng-deep .grid-item--col-10{grid-column:span 10}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
86
+ /** @nocollapse */ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: GridComponent, isStandalone: true, selector: "kirby-grid", inputs: { maxColumns: "maxColumns", cardConfigurations: "cardConfigurations" }, host: { properties: { "attr.max-columns": "this.maxColumns" } }, ngImport: i0, template: "<ng-container *ngFor=\"let card of cards\">\n <ng-template\n [kirbyLoadComponent]=\"card.configuration\"\n [cssClass]=\"'grid-item--col-' + card.colSpan\"\n ></ng-template>\n</ng-container>\n", styles: [":host{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(var(--kirby-grid-item-min-height, auto),auto);gap:24px;max-width:var(--kirby-page-max-width);margin:0 auto}@media (min-width: 721px){:host[max-columns=\"1\"]{grid-template-columns:repeat(1,1fr)}:host[max-columns=\"2\"]{grid-template-columns:repeat(2,1fr)}:host[max-columns=\"3\"]{grid-template-columns:repeat(3,1fr)}:host[max-columns=\"4\"]{grid-template-columns:repeat(4,1fr)}:host[max-columns=\"5\"]{grid-template-columns:repeat(5,1fr)}:host[max-columns=\"6\"]{grid-template-columns:repeat(6,1fr)}:host[max-columns=\"7\"]{grid-template-columns:repeat(7,1fr)}:host[max-columns=\"8\"]{grid-template-columns:repeat(8,1fr)}:host[max-columns=\"9\"]{grid-template-columns:repeat(9,1fr)}:host[max-columns=\"10\"]{grid-template-columns:repeat(10,1fr)}}@media (min-width: 721px){::ng-deep .grid-item--col-1{grid-column:span 1}}@media (min-width: 721px){::ng-deep .grid-item--col-2{grid-column:span 2}}@media (min-width: 721px){::ng-deep .grid-item--col-3{grid-column:span 3}}@media (min-width: 721px){::ng-deep .grid-item--col-4{grid-column:span 4}}@media (min-width: 721px){::ng-deep .grid-item--col-5{grid-column:span 5}}@media (min-width: 721px){::ng-deep .grid-item--col-6{grid-column:span 6}}@media (min-width: 721px){::ng-deep .grid-item--col-7{grid-column:span 7}}@media (min-width: 721px){::ng-deep .grid-item--col-8{grid-column:span 8}}@media (min-width: 721px){::ng-deep .grid-item--col-9{grid-column:span 9}}@media (min-width: 721px){::ng-deep .grid-item--col-10{grid-column:span 10}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: ComponentLoaderDirective, selector: "[kirbyLoadComponent]", inputs: ["kirbyLoadComponent", "cssClass"] }] });
86
87
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: GridComponent, decorators: [{
87
88
  type: Component,
88
- args: [{ standalone: true, imports: [CommonModule], selector: 'kirby-grid', template: "<ng-container *ngFor=\"let card of cards\">\n <ng-template\n [kirbyLoadComponent]=\"card.configuration\"\n [cssClass]=\"'grid-item--col-' + card.colSpan\"\n ></ng-template>\n</ng-container>\n", styles: [":host{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(var(--kirby-grid-item-min-height, auto),auto);gap:24px;max-width:var(--kirby-page-max-width);margin:0 auto}@media (min-width: 721px){:host[max-columns=\"1\"]{grid-template-columns:repeat(1,1fr)}:host[max-columns=\"2\"]{grid-template-columns:repeat(2,1fr)}:host[max-columns=\"3\"]{grid-template-columns:repeat(3,1fr)}:host[max-columns=\"4\"]{grid-template-columns:repeat(4,1fr)}:host[max-columns=\"5\"]{grid-template-columns:repeat(5,1fr)}:host[max-columns=\"6\"]{grid-template-columns:repeat(6,1fr)}:host[max-columns=\"7\"]{grid-template-columns:repeat(7,1fr)}:host[max-columns=\"8\"]{grid-template-columns:repeat(8,1fr)}:host[max-columns=\"9\"]{grid-template-columns:repeat(9,1fr)}:host[max-columns=\"10\"]{grid-template-columns:repeat(10,1fr)}}@media (min-width: 721px){::ng-deep .grid-item--col-1{grid-column:span 1}}@media (min-width: 721px){::ng-deep .grid-item--col-2{grid-column:span 2}}@media (min-width: 721px){::ng-deep .grid-item--col-3{grid-column:span 3}}@media (min-width: 721px){::ng-deep .grid-item--col-4{grid-column:span 4}}@media (min-width: 721px){::ng-deep .grid-item--col-5{grid-column:span 5}}@media (min-width: 721px){::ng-deep .grid-item--col-6{grid-column:span 6}}@media (min-width: 721px){::ng-deep .grid-item--col-7{grid-column:span 7}}@media (min-width: 721px){::ng-deep .grid-item--col-8{grid-column:span 8}}@media (min-width: 721px){::ng-deep .grid-item--col-9{grid-column:span 9}}@media (min-width: 721px){::ng-deep .grid-item--col-10{grid-column:span 10}}\n"] }]
89
+ args: [{ standalone: true, imports: [CommonModule, ComponentLoaderDirective], selector: 'kirby-grid', template: "<ng-container *ngFor=\"let card of cards\">\n <ng-template\n [kirbyLoadComponent]=\"card.configuration\"\n [cssClass]=\"'grid-item--col-' + card.colSpan\"\n ></ng-template>\n</ng-container>\n", styles: [":host{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(var(--kirby-grid-item-min-height, auto),auto);gap:24px;max-width:var(--kirby-page-max-width);margin:0 auto}@media (min-width: 721px){:host[max-columns=\"1\"]{grid-template-columns:repeat(1,1fr)}:host[max-columns=\"2\"]{grid-template-columns:repeat(2,1fr)}:host[max-columns=\"3\"]{grid-template-columns:repeat(3,1fr)}:host[max-columns=\"4\"]{grid-template-columns:repeat(4,1fr)}:host[max-columns=\"5\"]{grid-template-columns:repeat(5,1fr)}:host[max-columns=\"6\"]{grid-template-columns:repeat(6,1fr)}:host[max-columns=\"7\"]{grid-template-columns:repeat(7,1fr)}:host[max-columns=\"8\"]{grid-template-columns:repeat(8,1fr)}:host[max-columns=\"9\"]{grid-template-columns:repeat(9,1fr)}:host[max-columns=\"10\"]{grid-template-columns:repeat(10,1fr)}}@media (min-width: 721px){::ng-deep .grid-item--col-1{grid-column:span 1}}@media (min-width: 721px){::ng-deep .grid-item--col-2{grid-column:span 2}}@media (min-width: 721px){::ng-deep .grid-item--col-3{grid-column:span 3}}@media (min-width: 721px){::ng-deep .grid-item--col-4{grid-column:span 4}}@media (min-width: 721px){::ng-deep .grid-item--col-5{grid-column:span 5}}@media (min-width: 721px){::ng-deep .grid-item--col-6{grid-column:span 6}}@media (min-width: 721px){::ng-deep .grid-item--col-7{grid-column:span 7}}@media (min-width: 721px){::ng-deep .grid-item--col-8{grid-column:span 8}}@media (min-width: 721px){::ng-deep .grid-item--col-9{grid-column:span 9}}@media (min-width: 721px){::ng-deep .grid-item--col-10{grid-column:span 10}}\n"] }]
89
90
  }], ctorParameters: function () { return [{ type: i1.BreakpointHelperService }]; }, propDecorators: { maxColumns: [{
90
91
  type: HostBinding,
91
92
  args: ['attr.max-columns']
@@ -94,4 +95,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
94
95
  }], cardConfigurations: [{
95
96
  type: Input
96
97
  }] } });
97
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3JpZC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWJzL2Rlc2lnbnN5c3RlbS9ncmlkL3NyYy9ncmlkLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL2xpYnMvZGVzaWduc3lzdGVtL2dyaWQvc3JjL2dyaWQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxTQUFTLEVBQUUsV0FBVyxFQUFFLEtBQUssRUFBYSxNQUFNLGVBQWUsQ0FBQztBQUN6RSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sd0NBQXdDLENBQUM7QUFHcEUsT0FBTyxFQUFFLHVCQUF1QixFQUFFLE1BQU0sNkJBQTZCLENBQUM7Ozs7QUFHdEUsTUFBTSx3QkFBd0IsR0FDNUIsbVFBQW1RLENBQUM7QUFFdFEsTUFBTSxRQUFRO0lBTVosWUFBWSxhQUFvQyxFQUFFLEdBQVcsRUFBRSxHQUFXLEVBQUUsT0FBZTtRQUN6RixJQUFJLENBQUMsYUFBYSxHQUFHLGFBQWEsQ0FBQztRQUNuQyxJQUFJLENBQUMsR0FBRyxHQUFHLEdBQUcsQ0FBQztRQUNmLElBQUksQ0FBQyxHQUFHLEdBQUcsR0FBRyxDQUFDO1FBQ2YsSUFBSSxDQUFDLE9BQU8sR0FBRyxPQUFPLENBQUM7SUFDekIsQ0FBQztDQUNGO0FBU0QsTUFBTSxPQUFPLGFBQWE7SUFnQnhCLFlBQW9CLGdCQUF5QztRQUF6QyxxQkFBZ0IsR0FBaEIsZ0JBQWdCLENBQXlCO1FBZDdELFVBQUssR0FBZSxFQUFFLENBQUM7UUFlckIsT0FBTyxDQUFDLElBQUksQ0FBQyx3QkFBd0IsQ0FBQyxDQUFDO0lBQ3pDLENBQUM7SUFURCxJQUNJLGtCQUFrQixDQUFDLGtCQUEyQztRQUNoRSxJQUFJLENBQUMsV0FBVyxHQUFHLGtCQUFrQixDQUFDO1FBQ3RDLDBFQUEwRTtR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MUVVLGFBQWE7aUhBQWIsYUFBYSx1TkNoQzFCLHlNQU1BLHdsRERxQlksWUFBWTsyRkFLWCxhQUFhO2tCQVB6QixTQUFTO2lDQUNJLElBQUksV0FDUCxDQUFDLFlBQVksQ0FBQyxZQUNiLFlBQVk7OEdBV3RCLFVBQVU7c0JBRlQsV0FBVzt1QkFBQyxrQkFBa0I7O3NCQUM5QixLQUFLO2dCQUlGLGtCQUFrQjtzQkFEckIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBDb21wb25lbnQsIEhvc3RCaW5kaW5nLCBJbnB1dCwgT25EZXN0cm95IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBTY3NzSGVscGVyIH0gZnJvbSAnQGtpcmJ5ZGVzaWduL2Rlc2lnbnN5c3RlbS9oZWxwZXJzL3Njc3MnO1xuaW1wb3J0IHsgU3Vic2NyaXB0aW9uIH0gZnJvbSAncnhqcyc7XG5cbmltcG9ydCB7IEJyZWFrcG9pbnRIZWxwZXJTZXJ2aWNlIH0gZnJvbSAnLi9icmVha3BvaW50LWhlbHBlci5zZXJ2aWNlJztcbmltcG9ydCB7IEdyaWRDYXJkQ29uZmlndXJhdGlvbiB9IGZyb20gJy4vZ3JpZC1jYXJkLWNvbmZpZ3VyYXRpb24nO1xuXG5jb25zdCBHUklEX0RFUFJJQ0FUSU9OX1dBUk5JTkcgPVxuICAnRGVwcmVjYXRpb24gd2FybmluZzogVGhlIFwia2lyYnktZ3JpZFwiIGNvbXBvbmVudCB3aWxsIGJlIHJlbW92ZWQgaW4gYSBmdXR1cmUgcmVsZWFzZSBvZiBLaXJieSBkZXNpZ25zeXN0ZW0uIENvbnNpZGVyIHVzaW5nIGtpcmJ5LWdyaWQsIGtpcmJ5LWdyaWQtaXRlbSBjc3MtY2xhc3NlcyBhcyBhbiBhbHRlcm5hdGl2ZSBzb2x1dGlvbi4gU2VlIGdyaWQgZG9jcyBhdCBodHRwczovL2Nvb2tib29rLmtpcmJ5LmRlc2lnbi8jL2hvbWUvc2hvd2Nhc2UvZ3JpZCc7XG5cbmNsYXNzIEdyaWRDYXJkIHtcbiAgY29uZmlndXJhdGlvbjogR3JpZENhcmRDb25maWd1cmF0aW9uO1xuICByb3c6IG51bWJlcjtcbiAgY29sOiBudW1iZXI7XG4gIGNvbFNwYW46IG51bWJlcjtcblxuICBjb25zdHJ1Y3Rvcihjb25maWd1cmF0aW9uOiBHcmlkQ2FyZENvbmZpZ3VyYXRpb24sIHJvdzogbnVtYmVyLCBjb2w6IG51bWJlciwgY29sU3BhbjogbnVtYmVyKSB7XG4gICAgdGhpcy5jb25maWd1cmF0aW9uID0gY29uZmlndXJhdGlvbjtcbiAgICB0aGlzLnJvdyA9IHJvdztcbiAgICB0aGlzLmNvbCA9IGNvbDtcbiAgICB0aGlzLmNvbFNwYW4gPSBjb2xTcGFuO1xuICB9XG59XG5cbkBDb21wb25lbnQoe1xuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlXSxcbiAgc2VsZWN0b3I6ICdraXJieS1ncmlkJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2dyaWQuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9ncmlkLmNvbXBvbmVudC5zY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIEdyaWRDb21wb25lbnQgaW1wbGVtZW50cyBPbkRlc3Ryb3kge1xuICBjYXJkQ29uZmlnczogR3JpZENhcmRDb25maWd1cmF0aW9uW107XG4gIGNhcmRzOiBHcmlkQ2FyZFtdID0gW107XG4gIHByaXZhdGUgYnJlYWtwb2ludFN1YnNjcmlwdGlvbjogU3Vic2NyaXB0aW9uO1xuXG4gIEBIb3N0QmluZGluZygnYXR0ci5tYXgtY29sdW1ucycpXG4gIEBJbnB1dCgpXG4gIG1heENvbHVtbnM6IG51bWJlcjtcblxuICBASW5wdXQoKVxuICBzZXQgY2FyZENvbmZpZ3VyYXRpb25zKGNhcmRDb25maWd1cmF0aW9uczogR3JpZENhcmRDb25maWd1cmF0aW9uW10pIHtcbiAgICB0aGlzLmNhcmRDb25maWdzID0gY2FyZENvbmZpZ3VyYXRpb25zO1xuICAgIC8vIFRPRE8gVFJNL0pFTyBSZW1vdmUgdGhpcyB3aGVuIGJyZWFrcG9pbnQgb2JzZXJ2ZSBzb21ldGhpbmcgc29tZXRoaW5nLi4uXG4gICAgdGhpcy5jb25maWd1cmVHcmlkKCk7XG4gIH1cblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGJyZWFrcG9pbnRIZWxwZXI6IEJyZWFrcG9pbnRIZWxwZXJTZXJ2aWNlKSB7XG4gICAgY29uc29sZS53YXJuKEdSSURfREVQUklDQVRJT05fV0FSTklORyk7XG4gIH1cblxuICBjb25maWd1cmVHcmlkKCkge1xuICAgIGxldCBjYWxjdWxhdGVkTWF4Q29sdW1ucyA9IDA7XG4gICAgaWYgKHRoaXMubWF4Q29sdW1ucyA9PT0gdW5kZWZpbmVkKSB7XG4gICAgICBjYWxjdWxhdGVkTWF4Q29sdW1ucyA9XG4gICAgICAgIHRoaXMuYnJlYWtwb2ludEhlbHBlci5jdXJyZW50U2NyZWVuV2lkdGggPj0gU2Nzc0hlbHBlci5CUkVBS1BPSU5UX1NDUkVFTl9MID8gMiA6IDE7XG4gICAgfSBlbHNlIHtcbiAgICAgIGNhbGN1bGF0ZWRNYXhDb2x1bW5zID0gdGhpcy5tYXhDb2x1bW5zO1xuICAgIH1cbiAgICB0aGlzLmNhcmRzID0gW107XG4gICAgbGV0IGNvbHVtbkNvdW50ZXIgPSAwO1xuICAgIGxldCBjdXJyZW50Um93ID0gMDtcbiAgICBsZXQgY3VycmVudENvbHVtbiA9IDA7XG5cbiAgICB0aGlzLmNhcmRDb25maWdzLmZvckVhY2goKGNhcmQsIGluZGV4KSA9PiB7XG4gICAgICAvLyBDYXJkcyBjb2xzcGFuIGlzIGFkZGVkIHRvIHRoZSBjb2x1bW4gY291bnRlclxuICAgICAgY29sdW1uQ291bnRlciArPSBjYXJkLnByZWZlcnJlZFNpemU7XG4gICAgICAvLyBJZiBvbmx5IG1heENvbHVtbnMgYXJlIHNldCB0byAxLCBqdXN0IGFkZCBhbGwgY2FyZHMgd2l0aCBhIGNvbHNwYW4gb2YgMVxuICAgICAgaWYgKGNhbGN1bGF0ZWRNYXhDb2x1bW5zID09PSAxKSB7XG4gICAgICAgIHRoaXMuY2FyZHMucHVzaChuZXcgR3JpZENhcmQoY2FyZCwgY3VycmVudFJvdywgY3VycmVudENvbHVtbiwgMSkpO1xuICAgICAgICBjdXJyZW50Um93ICs9IDE7XG4gICAgICAgIHJldHVybjtcbiAgICAgIH1cbiAgICAgIC8vIElmIHdlIGFyZSBiZWxvdyBtYXhDb2x1bW5zLCB0aGVuIGFkZCB0aGUgY2FyZCB0byB0aGUgYXJyYXlcbiAgICAgIGlmIChjb2x1bW5Db3VudGVyIDw9IGNhbGN1bGF0ZWRNYXhDb2x1bW5zKSB7XG4gICAgICAgIHRoaXMuY2FyZHMucHVzaChuZXcgR3JpZENhcmQoY2FyZCwgY3VycmVudFJvdywgY3VycmVudENvbHVtbiwgY2FyZC5wcmVmZXJyZWRTaXplKSk7XG4gICAgICAgIC8vIFVwZGF0ZSBjdXJyZW50Q29sdW1uLCBzbyB0aGUgbmV4dCBjYXJkIHdpbGwgYmUgcGxhY2VkIGNvcnJlY3RseVxuICAgICAgICBjdXJyZW50Q29sdW1uICs9IGNhcmQucHJlZmVycmVkU2l6ZTtcbiAgICAgIH0gZWxzZSB7XG4gICAgICAgIC8vIFRoZSBuZXcgY2FyZCBkaWRuJ3QgZml0IC0gQ2FsY3VsYXRlIHJlbWFpbmluZyBjb2x1bW5zIGZvciBwcmV2aW91cyBjYXJkXG4gICAgICAgIGNvbnN0IHJlc3RDb2x1bW5zID0gY2FsY3VsYXRlZE1heENvbHVtbnMgLSAoY29sdW1uQ291bnRlciAtIGNhcmQucHJlZmVycmVkU2l6ZSk7XG4gICAgICAgIGNvbnN0IHByZXZDYXJkID0gdGhpcy5jYXJkc1tpbmRleCAtIDFdO1xuICAgICAgICAvLyBBZGQgdGhlIHJlc3RDb2x1bW5zIHRvIHRoZSBwcmV2aW91cyBjYXJkcyBjb2xzcGFuLCB0byBtYWtlIGl0IHNwYW4gb3V0XG4gICAgICAgIHByZXZDYXJkLmNvbFNwYW4gPSByZXN0Q29sdW1ucyArIHByZXZDYXJkLmNvbFNwYW47XG4gICAgICAgIC8vIFdlIGFyZSBub3cgb24gYSBuZXcgcm93XG4gICAgICAgIGN1cnJlbnRSb3cgKz0gMTtcbiAgICAgICAgY3VycmVudENvbHVtbiA9IDA7XG4gICAgICAgIHRoaXMuY2FyZHMucHVzaChuZXcgR3JpZENhcmQoY2FyZCwgY3VycmVudFJvdywgY3VycmVudENvbHVtbiwgY2FyZC5wcmVmZXJyZWRTaXplKSk7XG4gICAgICAgIC8vIFVwZGF0ZSBjdXJyZW50Q29sdW1uIHRvIG1hdGNoIHRoZSBzaXplIG9mIHRoZSBuZXcgY2FyZCBhbmQgcmVzZXQgY29sdW1uQ291bnRlclxuICAgICAgICBjdXJyZW50Q29sdW1uID0gY2FyZC5wcmVmZXJyZWRTaXplO1xuICAgICAgICBjb2x1bW5Db3VudGVyID0gY2FyZC5wcmVmZXJyZWRTaXplO1xuICAgICAgfVxuICAgICAgLy8gSWYgd2Ugb24gdGhlIGxhc3QgY2FyZCwgbWFrZSBzdXJlIGl0IHNwYW5zIGFsbCB0aGUgcmVzdCBvZiB0aGUgY29sdW1uc1xuICAgICAgaWYgKHRoaXMuY2FyZENvbmZpZ3MubGVuZ3RoIC0gMSA9PT0gaW5kZXgpIHtcbiAgICAgICAgY29uc3QgcmVzdENvbHVtbnMgPSBjYWxjdWxhdGVkTWF4Q29sdW1ucyAtIGNvbHVtbkNvdW50ZXI7XG4gICAgICAgIGNvbnN0IGN1cnJlbnRDYXJkID0gdGhpcy5jYXJkc1tpbmRleF07XG4gICAgICAgIGN1cnJlbnRDYXJkLmNvbFNwYW4gKz0gcmVzdENvbHVtbnM7XG4gICAgICB9XG4gICAgfSk7XG4gIH1cblxuICBuZ09uRGVzdHJveSgpIHtcbiAgICBpZiAodGhpcy5icmVha3BvaW50U3Vic2NyaXB0aW9uKSB7XG4gICAgICB0aGlzLmJyZWFrcG9pbnRTdWJzY3JpcHRpb24udW5zdWJzY3JpYmUoKTtcbiAgICB9XG4gIH1cbn1cbiIsIjxuZy1jb250YWluZXIgKm5nRm9yPVwibGV0IGNhcmQgb2YgY2FyZHNcIj5cbiAgPG5nLXRlbXBsYXRlXG4gICAgW2tpcmJ5TG9hZENvbXBvbmVudF09XCJjYXJkLmNvbmZpZ3VyYXRpb25cIlxuICAgIFtjc3NDbGFzc109XCInZ3JpZC1pdGVtLS1jb2wtJyArIGNhcmQuY29sU3BhblwiXG4gID48L25nLXRlbXBsYXRlPlxuPC9uZy1jb250YWluZXI+XG4iXX0=
98
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3JpZC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWJzL2Rlc2lnbnN5c3RlbS9ncmlkL3NyYy9ncmlkLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL2xpYnMvZGVzaWduc3lzdGVtL2dyaWQvc3JjL2dyaWQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxTQUFTLEVBQUUsV0FBVyxFQUFFLEtBQUssRUFBYSxNQUFNLGVBQWUsQ0FBQztBQUN6RSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sd0NBQXdDLENBQUM7QUFDcEUsT0FBTyxFQUFFLHdCQUF3QixFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFHNUUsT0FBTyxFQUFFLHVCQUF1QixFQUFFLE1BQU0sNkJBQTZCLENBQUM7Ozs7QUFHdEUsTUFBTSx3QkFBd0IsR0FDNUIsbVFBQW1RLENBQUM7QUFFdFEsTUFBTSxRQUFRO0lBTVosWUFBWSxhQUFvQyxFQUFFLEdBQVcsRUFBRSxHQUFXLEVBQUUsT0FBZTtRQUN6RixJQUFJLENBQUMsYUFBYSxHQUFHLGFBQWEsQ0FBQztRQUNuQyxJQUFJLENBQUMsR0FBRyxHQUFHLEdBQUcsQ0FBQztRQUNmLElBQUksQ0FBQyxHQUFHLEdBQUcsR0FBRyxDQUFDO1FBQ2YsSUFBSSxDQUFDLE9BQU8sR0FBRyxPQUFPLENBQUM7SUFDekIsQ0FBQztDQUNGO0FBU0QsTUFBTSxPQUFPLGFBQWE7SUFnQnhCLFlBQW9CLGdCQUF5QztRQUF6QyxxQkFBZ0IsR0FBaEIsZ0JBQWdCLENBQXlCO1FBZDdELFVBQUssR0FBZSxFQUFFLENBQUM7UUFlckIsT0FBTyxDQUFDLElBQUksQ0FBQyx3QkFBd0IsQ0FBQyxDQUFDO0lBQ3pDLENBQUM7SUFURCxJQUNJLGtCQUFrQixDQUFDLGtCQUEyQztRQUNoRSxJ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QUFzQixDQUFDLFdBQVcsRUFBRSxDQUFDO1NBQzNDO0lBQ0gsQ0FBQzs7NkhBMUVVLGFBQWE7aUhBQWIsYUFBYSx1TkNqQzFCLHlNQU1BLHdsRERzQlksWUFBWSw0SkFBRSx3QkFBd0I7MkZBS3JDLGFBQWE7a0JBUHpCLFNBQVM7aUNBQ0ksSUFBSSxXQUNQLENBQUMsWUFBWSxFQUFFLHdCQUF3QixDQUFDLFlBQ3ZDLFlBQVk7OEdBV3RCLFVBQVU7c0JBRlQsV0FBVzt1QkFBQyxrQkFBa0I7O3NCQUM5QixLQUFLO2dCQUlGLGtCQUFrQjtzQkFEckIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBDb21wb25lbnQsIEhvc3RCaW5kaW5nLCBJbnB1dCwgT25EZXN0cm95IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBTY3NzSGVscGVyIH0gZnJvbSAnQGtpcmJ5ZGVzaWduL2Rlc2lnbnN5c3RlbS9oZWxwZXJzL3Njc3MnO1xuaW1wb3J0IHsgQ29tcG9uZW50TG9hZGVyRGlyZWN0aXZlIH0gZnJvbSAnQGtpcmJ5ZGVzaWduL2Rlc2lnbnN5c3RlbS9zaGFyZWQnO1xuaW1wb3J0IHsgU3Vic2NyaXB0aW9uIH0gZnJvbSAncnhqcyc7XG5cbmltcG9ydCB7IEJyZWFrcG9pbnRIZWxwZXJTZXJ2aWNlIH0gZnJvbSAnLi9icmVha3BvaW50LWhlbHBlci5zZXJ2aWNlJztcbmltcG9ydCB7IEdyaWRDYXJkQ29uZmlndXJhdGlvbiB9IGZyb20gJy4vZ3JpZC1jYXJkLWNvbmZpZ3VyYXRpb24nO1xuXG5jb25zdCBHUklEX0RFUFJJQ0FUSU9OX1dBUk5JTkcgPVxuICAnRGVwcmVjYXRpb24gd2FybmluZzogVGhlIFwia2lyYnktZ3JpZFwiIGNvbXBvbmVudCB3aWxsIGJlIHJlbW92ZWQgaW4gYSBmdXR1cmUgcmVsZWFzZSBvZiBLaXJieSBkZXNpZ25zeXN0ZW0uIENvbnNpZGVyIHVzaW5nIGtpcmJ5LWdyaWQsIGtpcmJ5LWdyaWQtaXRlbSBjc3MtY2xhc3NlcyBhcyBhbiBhbHRlcm5hdGl2ZSBzb2x1dGlvbi4gU2VlIGdyaWQgZG9jcyBhdCBodHRwczovL2Nvb2tib29rLmtpcmJ5LmRlc2lnbi8jL2hvbWUvc2hvd2Nhc2UvZ3JpZCc7XG5cbmNsYXNzIEdyaWRDYXJkIHtcbiAgY29uZmlndXJhdGlvbjogR3JpZENhcmRDb25maWd1cmF0aW9uO1xuICByb3c6IG51bWJlcjtcbiAgY29sOiBudW1iZXI7XG4gIGNvbFNwYW46IG51bWJlcjtcblxuICBjb25zdHJ1Y3Rvcihjb25maWd1cmF0aW9uOiBHcmlkQ2FyZENvbmZpZ3VyYXRpb24sIHJvdzogbnVtYmVyLCBjb2w6IG51bWJlciwgY29sU3BhbjogbnVtYmVyKSB7XG4gICAgdGhpcy5jb25maWd1cmF0aW9uID0gY29uZmlndXJhdGlvbjtcbiAgICB0aGlzLnJvdyA9IHJvdztcbiAgICB0aGlzLmNvbCA9IGNvbDtcbiAgICB0aGlzLmNvbFNwYW4gPSBjb2xTcGFuO1xuICB9XG59XG5cbkBDb21wb25lbnQoe1xuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLCBDb21wb25lbnRMb2FkZXJEaXJlY3RpdmVdLFxuICBzZWxlY3RvcjogJ2tpcmJ5LWdyaWQnLFxuICB0ZW1wbGF0ZVVybDogJy4vZ3JpZC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2dyaWQuY29tcG9uZW50LnNjc3MnXSxcbn0pXG5leHBvcnQgY2xhc3MgR3JpZENvbXBvbmVudCBpbXBsZW1lbnRzIE9uRGVzdHJveSB7XG4gIGNhcmRDb25maWdzOiBHcmlkQ2FyZENvbmZpZ3VyYXRpb25bXTtcbiAgY2FyZHM6IEdyaWRDYXJkW10gPSBbXTtcbiAgcHJpdmF0ZSBicmVha3BvaW50U3Vic2NyaXB0aW9uOiBTdWJzY3JpcHRpb247XG5cbiAgQEhvc3RCaW5kaW5nKCdhdHRyLm1heC1jb2x1bW5zJylcbiAgQElucHV0KClcbiAgbWF4Q29sdW1uczogbnVtYmVyO1xuXG4gIEBJbnB1dCgpXG4gIHNldCBjYXJkQ29uZmlndXJhdGlvbnMoY2FyZENvbmZpZ3VyYXRpb25zOiBHcmlkQ2FyZENvbmZpZ3VyYXRpb25bXSkge1xuICAgIHRoaXMuY2FyZENvbmZpZ3MgPSBjYXJkQ29uZmlndXJhdGlvbnM7XG4gICAgLy8gVE9ETyBUUk0vSkVPIFJlbW92ZSB0aGlzIHdoZW4gYnJlYWtwb2ludCBvYnNlcnZlIHNvbWV0aGluZyBzb21ldGhpbmcuLi5cbiAgICB0aGlzLmNvbmZpZ3VyZUdyaWQoKTtcbiAgfVxuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgYnJlYWtwb2ludEhlbHBlcjogQnJlYWtwb2ludEhlbHBlclNlcnZpY2UpIHtcbiAgICBjb25zb2xlLndhcm4oR1JJRF9ERVBSSUNBVElPTl9XQVJOSU5HKTtcbiAgfVxuXG4gIGNvbmZpZ3VyZUdyaWQoKSB7XG4gICAgbGV0IGNhbGN1bGF0ZWRNYXhDb2x1bW5zID0gMDtcbiAgICBpZiAodGhpcy5tYXhDb2x1bW5zID09PSB1bmRlZmluZWQpIHtcbiAgICAgIGNhbGN1bGF0ZWRNYXhDb2x1bW5zID1cbiAgICAgICAgdGhpcy5icmVha3BvaW50SGVscGVyLmN1cnJlbnRTY3JlZW5XaWR0aCA+PSBTY3NzSGVscGVyLkJSRUFLUE9JTlRfU0NSRUVOX0wgPyAyIDogMTtcbiAgICB9IGVsc2Uge1xuICAgICAgY2FsY3VsYXRlZE1heENvbHVtbnMgPSB0aGlzLm1heENvbHVtbnM7XG4gICAgfVxuICAgIHRoaXMuY2FyZHMgPSBbXTtcbiAgICBsZXQgY29sdW1uQ291bnRlciA9IDA7XG4gICAgbGV0IGN1cnJlbnRSb3cgPSAwO1xuICAgIGxldCBjdXJyZW50Q29sdW1uID0gMDtcblxuICAgIHRoaXMuY2FyZENvbmZpZ3MuZm9yRWFjaCgoY2FyZCwgaW5kZXgpID0+IHtcbiAgICAgIC8vIENhcmRzIGNvbHNwYW4gaXMgYWRkZWQgdG8gdGhlIGNvbHVtbiBjb3VudGVyXG4gICAgICBjb2x1bW5Db3VudGVyICs9IGNhcmQucHJlZmVycmVkU2l6ZTtcbiAgICAgIC8vIElmIG9ubHkgbWF4Q29sdW1ucyBhcmUgc2V0IHRvIDEsIGp1c3QgYWRkIGFsbCBjYXJkcyB3aXRoIGEgY29sc3BhbiBvZiAxXG4gICAgICBpZiAoY2FsY3VsYXRlZE1heENvbHVtbnMgPT09IDEpIHtcbiAgICAgICAgdGhpcy5jYXJkcy5wdXNoKG5ldyBHcmlkQ2FyZChjYXJkLCBjdXJyZW50Um93LCBjdXJyZW50Q29sdW1uLCAxKSk7XG4gICAgICAgIGN1cnJlbnRSb3cgKz0gMTtcbiAgICAgICAgcmV0dXJuO1xuICAgICAgfVxuICAgICAgLy8gSWYgd2UgYXJlIGJlbG93IG1heENvbHVtbnMsIHRoZW4gYWRkIHRoZSBjYXJkIHRvIHRoZSBhcnJheVxuICAgICAgaWYgKGNvbHVtbkNvdW50ZXIgPD0gY2FsY3VsYXRlZE1heENvbHVtbnMpIHtcbiAgICAgICAgdGhpcy5jYXJkcy5wdXNoKG5ldyBHcmlkQ2FyZChjYXJkLCBjdXJyZW50Um93LCBjdXJyZW50Q29sdW1uLCBjYXJkLnByZWZlcnJlZFNpemUpKTtcbiAgICAgICAgLy8gVXBkYXRlIGN1cnJlbnRDb2x1bW4sIHNvIHRoZSBuZXh0IGNhcmQgd2lsbCBiZSBwbGFjZWQgY29ycmVjdGx5XG4gICAgICAgIGN1cnJlbnRDb2x1bW4gKz0gY2FyZC5wcmVmZXJyZWRTaXplO1xuICAgICAgfSBlbHNlIHtcbiAgICAgICAgLy8gVGhlIG5ldyBjYXJkIGRpZG4ndCBmaXQgLSBDYWxjdWxhdGUgcmVtYWluaW5nIGNvbHVtbnMgZm9yIHByZXZpb3VzIGNhcmRcbiAgICAgICAgY29uc3QgcmVzdENvbHVtbnMgPSBjYWxjdWxhdGVkTWF4Q29sdW1ucyAtIChjb2x1bW5Db3VudGVyIC0gY2FyZC5wcmVmZXJyZWRTaXplKTtcbiAgICAgICAgY29uc3QgcHJldkNhcmQgPSB0aGlzLmNhcmRzW2luZGV4IC0gMV07XG4gICAgICAgIC8vIEFkZCB0aGUgcmVzdENvbHVtbnMgdG8gdGhlIHByZXZpb3VzIGNhcmRzIGNvbHNwYW4sIHRvIG1ha2UgaXQgc3BhbiBvdXRcbiAgICAgICAgcHJldkNhcmQuY29sU3BhbiA9IHJlc3RDb2x1bW5zICsgcHJldkNhcmQuY29sU3BhbjtcbiAgICAgICAgLy8gV2UgYXJlIG5vdyBvbiBhIG5ldyByb3dcbiAgICAgICAgY3VycmVudFJvdyArPSAxO1xuICAgICAgICBjdXJyZW50Q29sdW1uID0gMDtcbiAgICAgICAgdGhpcy5jYXJkcy5wdXNoKG5ldyBHcmlkQ2FyZChjYXJkLCBjdXJyZW50Um93LCBjdXJyZW50Q29sdW1uLCBjYXJkLnByZWZlcnJlZFNpemUpKTtcbiAgICAgICAgLy8gVXBkYXRlIGN1cnJlbnRDb2x1bW4gdG8gbWF0Y2ggdGhlIHNpemUgb2YgdGhlIG5ldyBjYXJkIGFuZCByZXNldCBjb2x1bW5Db3VudGVyXG4gICAgICAgIGN1cnJlbnRDb2x1bW4gPSBjYXJkLnByZWZlcnJlZFNpemU7XG4gICAgICAgIGNvbHVtbkNvdW50ZXIgPSBjYXJkLnByZWZlcnJlZFNpemU7XG4gICAgICB9XG4gICAgICAvLyBJZiB3ZSBvbiB0aGUgbGFzdCBjYXJkLCBtYWtlIHN1cmUgaXQgc3BhbnMgYWxsIHRoZSByZXN0IG9mIHRoZSBjb2x1bW5zXG4gICAgICBpZiAodGhpcy5jYXJkQ29uZmlncy5sZW5ndGggLSAxID09PSBpbmRleCkge1xuICAgICAgICBjb25zdCByZXN0Q29sdW1ucyA9IGNhbGN1bGF0ZWRNYXhDb2x1bW5zIC0gY29sdW1uQ291bnRlcjtcbiAgICAgICAgY29uc3QgY3VycmVudENhcmQgPSB0aGlzLmNhcmRzW2luZGV4XTtcbiAgICAgICAgY3VycmVudENhcmQuY29sU3BhbiArPSByZXN0Q29sdW1ucztcbiAgICAgIH1cbiAgICB9KTtcbiAgfVxuXG4gIG5nT25EZXN0cm95KCkge1xuICAgIGlmICh0aGlzLmJyZWFrcG9pbnRTdWJzY3JpcHRpb24pIHtcbiAgICAgIHRoaXMuYnJlYWtwb2ludFN1YnNjcmlwdGlvbi51bnN1YnNjcmliZSgpO1xuICAgIH1cbiAgfVxufVxuIiwiPG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgY2FyZCBvZiBjYXJkc1wiPlxuICA8bmctdGVtcGxhdGVcbiAgICBba2lyYnlMb2FkQ29tcG9uZW50XT1cImNhcmQuY29uZmlndXJhdGlvblwiXG4gICAgW2Nzc0NsYXNzXT1cIidncmlkLWl0ZW0tLWNvbC0nICsgY2FyZC5jb2xTcGFuXCJcbiAgPjwvbmctdGVtcGxhdGU+XG48L25nLWNvbnRhaW5lcj5cbiJdfQ==
package/fesm2015/kirbydesign-designsystem-grid.mjs CHANGED
@@ -4,6 +4,7 @@ import { Subject } from 'rxjs';
4
4
  import * as i2 from '@angular/common';
5
5
  import { CommonModule } from '@angular/common';
6
6
  import { ScssHelper } from '@kirbydesign/designsystem/helpers/scss';
7
+ import { ComponentLoaderDirective } from '@kirbydesign/designsystem/shared';
7
8
 
8
9
  class BreakpointHelperService {
9
10
  constructor() {
@@ -115,10 +116,10 @@ class GridComponent {
115
116
  }
116
117
  }
117
118
  /** @nocollapse */ GridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: GridComponent, deps: [{ token: BreakpointHelperService }], target: i0.ɵɵFactoryTarget.Component });
118
- /** @nocollapse */ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: GridComponent, isStandalone: true, selector: "kirby-grid", inputs: { maxColumns: "maxColumns", cardConfigurations: "cardConfigurations" }, host: { properties: { "attr.max-columns": "this.maxColumns" } }, ngImport: i0, template: "<ng-container *ngFor=\"let card of cards\">\n <ng-template\n [kirbyLoadComponent]=\"card.configuration\"\n [cssClass]=\"'grid-item--col-' + card.colSpan\"\n ></ng-template>\n</ng-container>\n", styles: [":host{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(var(--kirby-grid-item-min-height, auto),auto);gap:24px;max-width:var(--kirby-page-max-width);margin:0 auto}@media (min-width: 721px){:host[max-columns=\"1\"]{grid-template-columns:repeat(1,1fr)}:host[max-columns=\"2\"]{grid-template-columns:repeat(2,1fr)}:host[max-columns=\"3\"]{grid-template-columns:repeat(3,1fr)}:host[max-columns=\"4\"]{grid-template-columns:repeat(4,1fr)}:host[max-columns=\"5\"]{grid-template-columns:repeat(5,1fr)}:host[max-columns=\"6\"]{grid-template-columns:repeat(6,1fr)}:host[max-columns=\"7\"]{grid-template-columns:repeat(7,1fr)}:host[max-columns=\"8\"]{grid-template-columns:repeat(8,1fr)}:host[max-columns=\"9\"]{grid-template-columns:repeat(9,1fr)}:host[max-columns=\"10\"]{grid-template-columns:repeat(10,1fr)}}@media (min-width: 721px){::ng-deep .grid-item--col-1{grid-column:span 1}}@media (min-width: 721px){::ng-deep .grid-item--col-2{grid-column:span 2}}@media (min-width: 721px){::ng-deep .grid-item--col-3{grid-column:span 3}}@media (min-width: 721px){::ng-deep .grid-item--col-4{grid-column:span 4}}@media (min-width: 721px){::ng-deep .grid-item--col-5{grid-column:span 5}}@media (min-width: 721px){::ng-deep .grid-item--col-6{grid-column:span 6}}@media (min-width: 721px){::ng-deep .grid-item--col-7{grid-column:span 7}}@media (min-width: 721px){::ng-deep .grid-item--col-8{grid-column:span 8}}@media (min-width: 721px){::ng-deep .grid-item--col-9{grid-column:span 9}}@media (min-width: 721px){::ng-deep .grid-item--col-10{grid-column:span 10}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
119
+ /** @nocollapse */ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: GridComponent, isStandalone: true, selector: "kirby-grid", inputs: { maxColumns: "maxColumns", cardConfigurations: "cardConfigurations" }, host: { properties: { "attr.max-columns": "this.maxColumns" } }, ngImport: i0, template: "<ng-container *ngFor=\"let card of cards\">\n <ng-template\n [kirbyLoadComponent]=\"card.configuration\"\n [cssClass]=\"'grid-item--col-' + card.colSpan\"\n ></ng-template>\n</ng-container>\n", styles: [":host{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(var(--kirby-grid-item-min-height, auto),auto);gap:24px;max-width:var(--kirby-page-max-width);margin:0 auto}@media (min-width: 721px){:host[max-columns=\"1\"]{grid-template-columns:repeat(1,1fr)}:host[max-columns=\"2\"]{grid-template-columns:repeat(2,1fr)}:host[max-columns=\"3\"]{grid-template-columns:repeat(3,1fr)}:host[max-columns=\"4\"]{grid-template-columns:repeat(4,1fr)}:host[max-columns=\"5\"]{grid-template-columns:repeat(5,1fr)}:host[max-columns=\"6\"]{grid-template-columns:repeat(6,1fr)}:host[max-columns=\"7\"]{grid-template-columns:repeat(7,1fr)}:host[max-columns=\"8\"]{grid-template-columns:repeat(8,1fr)}:host[max-columns=\"9\"]{grid-template-columns:repeat(9,1fr)}:host[max-columns=\"10\"]{grid-template-columns:repeat(10,1fr)}}@media (min-width: 721px){::ng-deep .grid-item--col-1{grid-column:span 1}}@media (min-width: 721px){::ng-deep .grid-item--col-2{grid-column:span 2}}@media (min-width: 721px){::ng-deep .grid-item--col-3{grid-column:span 3}}@media (min-width: 721px){::ng-deep .grid-item--col-4{grid-column:span 4}}@media (min-width: 721px){::ng-deep .grid-item--col-5{grid-column:span 5}}@media (min-width: 721px){::ng-deep .grid-item--col-6{grid-column:span 6}}@media (min-width: 721px){::ng-deep .grid-item--col-7{grid-column:span 7}}@media (min-width: 721px){::ng-deep .grid-item--col-8{grid-column:span 8}}@media (min-width: 721px){::ng-deep .grid-item--col-9{grid-column:span 9}}@media (min-width: 721px){::ng-deep .grid-item--col-10{grid-column:span 10}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: ComponentLoaderDirective, selector: "[kirbyLoadComponent]", inputs: ["kirbyLoadComponent", "cssClass"] }] });
119
120
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: GridComponent, decorators: [{
120
121
  type: Component,
121
- args: [{ standalone: true, imports: [CommonModule], selector: 'kirby-grid', template: "<ng-container *ngFor=\"let card of cards\">\n <ng-template\n [kirbyLoadComponent]=\"card.configuration\"\n [cssClass]=\"'grid-item--col-' + card.colSpan\"\n ></ng-template>\n</ng-container>\n", styles: [":host{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(var(--kirby-grid-item-min-height, auto),auto);gap:24px;max-width:var(--kirby-page-max-width);margin:0 auto}@media (min-width: 721px){:host[max-columns=\"1\"]{grid-template-columns:repeat(1,1fr)}:host[max-columns=\"2\"]{grid-template-columns:repeat(2,1fr)}:host[max-columns=\"3\"]{grid-template-columns:repeat(3,1fr)}:host[max-columns=\"4\"]{grid-template-columns:repeat(4,1fr)}:host[max-columns=\"5\"]{grid-template-columns:repeat(5,1fr)}:host[max-columns=\"6\"]{grid-template-columns:repeat(6,1fr)}:host[max-columns=\"7\"]{grid-template-columns:repeat(7,1fr)}:host[max-columns=\"8\"]{grid-template-columns:repeat(8,1fr)}:host[max-columns=\"9\"]{grid-template-columns:repeat(9,1fr)}:host[max-columns=\"10\"]{grid-template-columns:repeat(10,1fr)}}@media (min-width: 721px){::ng-deep .grid-item--col-1{grid-column:span 1}}@media (min-width: 721px){::ng-deep .grid-item--col-2{grid-column:span 2}}@media (min-width: 721px){::ng-deep .grid-item--col-3{grid-column:span 3}}@media (min-width: 721px){::ng-deep .grid-item--col-4{grid-column:span 4}}@media (min-width: 721px){::ng-deep .grid-item--col-5{grid-column:span 5}}@media (min-width: 721px){::ng-deep .grid-item--col-6{grid-column:span 6}}@media (min-width: 721px){::ng-deep .grid-item--col-7{grid-column:span 7}}@media (min-width: 721px){::ng-deep .grid-item--col-8{grid-column:span 8}}@media (min-width: 721px){::ng-deep .grid-item--col-9{grid-column:span 9}}@media (min-width: 721px){::ng-deep .grid-item--col-10{grid-column:span 10}}\n"] }]
122
+ args: [{ standalone: true, imports: [CommonModule, ComponentLoaderDirective], selector: 'kirby-grid', template: "<ng-container *ngFor=\"let card of cards\">\n <ng-template\n [kirbyLoadComponent]=\"card.configuration\"\n [cssClass]=\"'grid-item--col-' + card.colSpan\"\n ></ng-template>\n</ng-container>\n", styles: [":host{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(var(--kirby-grid-item-min-height, auto),auto);gap:24px;max-width:var(--kirby-page-max-width);margin:0 auto}@media (min-width: 721px){:host[max-columns=\"1\"]{grid-template-columns:repeat(1,1fr)}:host[max-columns=\"2\"]{grid-template-columns:repeat(2,1fr)}:host[max-columns=\"3\"]{grid-template-columns:repeat(3,1fr)}:host[max-columns=\"4\"]{grid-template-columns:repeat(4,1fr)}:host[max-columns=\"5\"]{grid-template-columns:repeat(5,1fr)}:host[max-columns=\"6\"]{grid-template-columns:repeat(6,1fr)}:host[max-columns=\"7\"]{grid-template-columns:repeat(7,1fr)}:host[max-columns=\"8\"]{grid-template-columns:repeat(8,1fr)}:host[max-columns=\"9\"]{grid-template-columns:repeat(9,1fr)}:host[max-columns=\"10\"]{grid-template-columns:repeat(10,1fr)}}@media (min-width: 721px){::ng-deep .grid-item--col-1{grid-column:span 1}}@media (min-width: 721px){::ng-deep .grid-item--col-2{grid-column:span 2}}@media (min-width: 721px){::ng-deep .grid-item--col-3{grid-column:span 3}}@media (min-width: 721px){::ng-deep .grid-item--col-4{grid-column:span 4}}@media (min-width: 721px){::ng-deep .grid-item--col-5{grid-column:span 5}}@media (min-width: 721px){::ng-deep .grid-item--col-6{grid-column:span 6}}@media (min-width: 721px){::ng-deep .grid-item--col-7{grid-column:span 7}}@media (min-width: 721px){::ng-deep .grid-item--col-8{grid-column:span 8}}@media (min-width: 721px){::ng-deep .grid-item--col-9{grid-column:span 9}}@media (min-width: 721px){::ng-deep .grid-item--col-10{grid-column:span 10}}\n"] }]
122
123
  }], ctorParameters: function () { return [{ type: BreakpointHelperService }]; }, propDecorators: { maxColumns: [{
123
124
  type: HostBinding,
124
125
  args: ['attr.max-columns']
package/fesm2015/kirbydesign-designsystem-grid.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"kirbydesign-designsystem-grid.mjs","sources":["../../../../libs/designsystem/grid/src/breakpoint-helper.service.ts","../../../../libs/designsystem/grid/src/grid-card-configuration.ts","../../../../libs/designsystem/grid/src/grid.component.ts","../../../../libs/designsystem/grid/src/grid.component.html","../../../../libs/designsystem/grid/src/kirbydesign-designsystem-grid.ts"],"sourcesContent":["import { Injectable, OnDestroy } from '@angular/core';\nimport { Observable, Subject } from 'rxjs';\n\n@Injectable({\n providedIn: 'root',\n})\nexport class BreakpointHelperService implements OnDestroy {\n currentScreenWidth: 800;\n private orientationChangedSubject = new Subject<void>();\n\n constructor() {\n this.init();\n }\n\n private init() {\n // TODO JEO: Implement Angular/CDK BreakpointObserver:\n this.orientationChangedSubject.next();\n }\n\n observe(): Observable<void> {\n return this.orientationChangedSubject.asObservable();\n }\n\n ngOnDestroy() {\n this.orientationChangedSubject.complete();\n }\n}\n","import { Type } from '@angular/core';\nimport { ComponentConfiguration } from '@kirbydesign/designsystem/shared';\n\nexport class GridCardConfiguration implements ComponentConfiguration {\n constructor(public component: Type<any>, public data: any, public preferredSize: number) {}\n}\n","import { CommonModule } from '@angular/common';\nimport { Component, HostBinding, Input, OnDestroy } from '@angular/core';\nimport { ScssHelper } from '@kirbydesign/designsystem/helpers/scss';\nimport { Subscription } from 'rxjs';\n\nimport { BreakpointHelperService } from './breakpoint-helper.service';\nimport { GridCardConfiguration } from './grid-card-configuration';\n\nconst GRID_DEPRICATION_WARNING =\n 'Deprecation warning: The \"kirby-grid\" component will be removed in a future release of Kirby designsystem. Consider using kirby-grid, kirby-grid-item css-classes as an alternative solution. See grid docs at https://cookbook.kirby.design/#/home/showcase/grid';\n\nclass GridCard {\n configuration: GridCardConfiguration;\n row: number;\n col: number;\n colSpan: number;\n\n constructor(configuration: GridCardConfiguration, row: number, col: number, colSpan: number) {\n this.configuration = configuration;\n this.row = row;\n this.col = col;\n this.colSpan = colSpan;\n }\n}\n\n@Component({\n standalone: true,\n imports: [CommonModule],\n selector: 'kirby-grid',\n templateUrl: './grid.component.html',\n styleUrls: ['./grid.component.scss'],\n})\nexport class GridComponent implements OnDestroy {\n cardConfigs: GridCardConfiguration[];\n cards: GridCard[] = [];\n private breakpointSubscription: Subscription;\n\n @HostBinding('attr.max-columns')\n @Input()\n maxColumns: number;\n\n @Input()\n set cardConfigurations(cardConfigurations: GridCardConfiguration[]) {\n this.cardConfigs = cardConfigurations;\n // TODO TRM/JEO Remove this when breakpoint observe something something...\n this.configureGrid();\n }\n\n constructor(private breakpointHelper: BreakpointHelperService) {\n console.warn(GRID_DEPRICATION_WARNING);\n }\n\n configureGrid() {\n let calculatedMaxColumns = 0;\n if (this.maxColumns === undefined) {\n calculatedMaxColumns =\n this.breakpointHelper.currentScreenWidth >= ScssHelper.BREAKPOINT_SCREEN_L ? 2 : 1;\n } else {\n calculatedMaxColumns = this.maxColumns;\n }\n this.cards = [];\n let columnCounter = 0;\n let currentRow = 0;\n let currentColumn = 0;\n\n this.cardConfigs.forEach((card, index) => {\n // Cards colspan is added to the column counter\n columnCounter += card.preferredSize;\n // If only maxColumns are set to 1, just add all cards with a colspan of 1\n if (calculatedMaxColumns === 1) {\n this.cards.push(new GridCard(card, currentRow, currentColumn, 1));\n currentRow += 1;\n return;\n }\n // If we are below maxColumns, then add the card to the array\n if (columnCounter <= calculatedMaxColumns) {\n this.cards.push(new GridCard(card, currentRow, currentColumn, card.preferredSize));\n // Update currentColumn, so the next card will be placed correctly\n currentColumn += card.preferredSize;\n } else {\n // The new card didn't fit - Calculate remaining columns for previous card\n const restColumns = calculatedMaxColumns - (columnCounter - card.preferredSize);\n const prevCard = this.cards[index - 1];\n // Add the restColumns to the previous cards colspan, to make it span out\n prevCard.colSpan = restColumns + prevCard.colSpan;\n // We are now on a new row\n currentRow += 1;\n currentColumn = 0;\n this.cards.push(new GridCard(card, currentRow, currentColumn, card.preferredSize));\n // Update currentColumn to match the size of the new card and reset columnCounter\n currentColumn = card.preferredSize;\n columnCounter = card.preferredSize;\n }\n // If we on the last card, make sure it spans all the rest of the columns\n if (this.cardConfigs.length - 1 === index) {\n const restColumns = calculatedMaxColumns - columnCounter;\n const currentCard = this.cards[index];\n currentCard.colSpan += restColumns;\n }\n });\n }\n\n ngOnDestroy() {\n if (this.breakpointSubscription) {\n this.breakpointSubscription.unsubscribe();\n }\n }\n}\n","<ng-container *ngFor=\"let card of cards\">\n <ng-template\n [kirbyLoadComponent]=\"card.configuration\"\n [cssClass]=\"'grid-item--col-' + card.colSpan\"\n ></ng-template>\n</ng-container>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["i1.BreakpointHelperService"],"mappings":"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"}
1
+ {"version":3,"file":"kirbydesign-designsystem-grid.mjs","sources":["../../../../libs/designsystem/grid/src/breakpoint-helper.service.ts","../../../../libs/designsystem/grid/src/grid-card-configuration.ts","../../../../libs/designsystem/grid/src/grid.component.ts","../../../../libs/designsystem/grid/src/grid.component.html","../../../../libs/designsystem/grid/src/kirbydesign-designsystem-grid.ts"],"sourcesContent":["import { Injectable, OnDestroy } from '@angular/core';\nimport { Observable, Subject } from 'rxjs';\n\n@Injectable({\n providedIn: 'root',\n})\nexport class BreakpointHelperService implements OnDestroy {\n currentScreenWidth: 800;\n private orientationChangedSubject = new Subject<void>();\n\n constructor() {\n this.init();\n }\n\n private init() {\n // TODO JEO: Implement Angular/CDK BreakpointObserver:\n this.orientationChangedSubject.next();\n }\n\n observe(): Observable<void> {\n return this.orientationChangedSubject.asObservable();\n }\n\n ngOnDestroy() {\n this.orientationChangedSubject.complete();\n }\n}\n","import { Type } from '@angular/core';\nimport { ComponentConfiguration } from '@kirbydesign/designsystem/shared';\n\nexport class GridCardConfiguration implements ComponentConfiguration {\n constructor(public component: Type<any>, public data: any, public preferredSize: number) {}\n}\n","import { CommonModule } from '@angular/common';\nimport { Component, HostBinding, Input, OnDestroy } from '@angular/core';\nimport { ScssHelper } from '@kirbydesign/designsystem/helpers/scss';\nimport { ComponentLoaderDirective } from '@kirbydesign/designsystem/shared';\nimport { Subscription } from 'rxjs';\n\nimport { BreakpointHelperService } from './breakpoint-helper.service';\nimport { GridCardConfiguration } from './grid-card-configuration';\n\nconst GRID_DEPRICATION_WARNING =\n 'Deprecation warning: The \"kirby-grid\" component will be removed in a future release of Kirby designsystem. Consider using kirby-grid, kirby-grid-item css-classes as an alternative solution. See grid docs at https://cookbook.kirby.design/#/home/showcase/grid';\n\nclass GridCard {\n configuration: GridCardConfiguration;\n row: number;\n col: number;\n colSpan: number;\n\n constructor(configuration: GridCardConfiguration, row: number, col: number, colSpan: number) {\n this.configuration = configuration;\n this.row = row;\n this.col = col;\n this.colSpan = colSpan;\n }\n}\n\n@Component({\n standalone: true,\n imports: [CommonModule, ComponentLoaderDirective],\n selector: 'kirby-grid',\n templateUrl: './grid.component.html',\n styleUrls: ['./grid.component.scss'],\n})\nexport class GridComponent implements OnDestroy {\n cardConfigs: GridCardConfiguration[];\n cards: GridCard[] = [];\n private breakpointSubscription: Subscription;\n\n @HostBinding('attr.max-columns')\n @Input()\n maxColumns: number;\n\n @Input()\n set cardConfigurations(cardConfigurations: GridCardConfiguration[]) {\n this.cardConfigs = cardConfigurations;\n // TODO TRM/JEO Remove this when breakpoint observe something something...\n this.configureGrid();\n }\n\n constructor(private breakpointHelper: BreakpointHelperService) {\n console.warn(GRID_DEPRICATION_WARNING);\n }\n\n configureGrid() {\n let calculatedMaxColumns = 0;\n if (this.maxColumns === undefined) {\n calculatedMaxColumns =\n this.breakpointHelper.currentScreenWidth >= ScssHelper.BREAKPOINT_SCREEN_L ? 2 : 1;\n } else {\n calculatedMaxColumns = this.maxColumns;\n }\n this.cards = [];\n let columnCounter = 0;\n let currentRow = 0;\n let currentColumn = 0;\n\n this.cardConfigs.forEach((card, index) => {\n // Cards colspan is added to the column counter\n columnCounter += card.preferredSize;\n // If only maxColumns are set to 1, just add all cards with a colspan of 1\n if (calculatedMaxColumns === 1) {\n this.cards.push(new GridCard(card, currentRow, currentColumn, 1));\n currentRow += 1;\n return;\n }\n // If we are below maxColumns, then add the card to the array\n if (columnCounter <= calculatedMaxColumns) {\n this.cards.push(new GridCard(card, currentRow, currentColumn, card.preferredSize));\n // Update currentColumn, so the next card will be placed correctly\n currentColumn += card.preferredSize;\n } else {\n // The new card didn't fit - Calculate remaining columns for previous card\n const restColumns = calculatedMaxColumns - (columnCounter - card.preferredSize);\n const prevCard = this.cards[index - 1];\n // Add the restColumns to the previous cards colspan, to make it span out\n prevCard.colSpan = restColumns + prevCard.colSpan;\n // We are now on a new row\n currentRow += 1;\n currentColumn = 0;\n this.cards.push(new GridCard(card, currentRow, currentColumn, card.preferredSize));\n // Update currentColumn to match the size of the new card and reset columnCounter\n currentColumn = card.preferredSize;\n columnCounter = card.preferredSize;\n }\n // If we on the last card, make sure it spans all the rest of the columns\n if (this.cardConfigs.length - 1 === index) {\n const restColumns = calculatedMaxColumns - columnCounter;\n const currentCard = this.cards[index];\n currentCard.colSpan += restColumns;\n }\n });\n }\n\n ngOnDestroy() {\n if (this.breakpointSubscription) {\n this.breakpointSubscription.unsubscribe();\n }\n }\n}\n","<ng-container *ngFor=\"let card of cards\">\n <ng-template\n [kirbyLoadComponent]=\"card.configuration\"\n [cssClass]=\"'grid-item--col-' + card.colSpan\"\n ></ng-template>\n</ng-container>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["i1.BreakpointHelperService"],"mappings":"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"}
package/fesm2020/kirbydesign-designsystem-grid.mjs CHANGED
@@ -4,6 +4,7 @@ import { Subject } from 'rxjs';
4
4
  import * as i2 from '@angular/common';
5
5
  import { CommonModule } from '@angular/common';
6
6
  import { ScssHelper } from '@kirbydesign/designsystem/helpers/scss';
7
+ import { ComponentLoaderDirective } from '@kirbydesign/designsystem/shared';
7
8
 
8
9
  class BreakpointHelperService {
9
10
  constructor() {
@@ -115,10 +116,10 @@ class GridComponent {
115
116
  }
116
117
  }
117
118
  /** @nocollapse */ GridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: GridComponent, deps: [{ token: BreakpointHelperService }], target: i0.ɵɵFactoryTarget.Component });
118
- /** @nocollapse */ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: GridComponent, isStandalone: true, selector: "kirby-grid", inputs: { maxColumns: "maxColumns", cardConfigurations: "cardConfigurations" }, host: { properties: { "attr.max-columns": "this.maxColumns" } }, ngImport: i0, template: "<ng-container *ngFor=\"let card of cards\">\n <ng-template\n [kirbyLoadComponent]=\"card.configuration\"\n [cssClass]=\"'grid-item--col-' + card.colSpan\"\n ></ng-template>\n</ng-container>\n", styles: [":host{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(var(--kirby-grid-item-min-height, auto),auto);gap:24px;max-width:var(--kirby-page-max-width);margin:0 auto}@media (min-width: 721px){:host[max-columns=\"1\"]{grid-template-columns:repeat(1,1fr)}:host[max-columns=\"2\"]{grid-template-columns:repeat(2,1fr)}:host[max-columns=\"3\"]{grid-template-columns:repeat(3,1fr)}:host[max-columns=\"4\"]{grid-template-columns:repeat(4,1fr)}:host[max-columns=\"5\"]{grid-template-columns:repeat(5,1fr)}:host[max-columns=\"6\"]{grid-template-columns:repeat(6,1fr)}:host[max-columns=\"7\"]{grid-template-columns:repeat(7,1fr)}:host[max-columns=\"8\"]{grid-template-columns:repeat(8,1fr)}:host[max-columns=\"9\"]{grid-template-columns:repeat(9,1fr)}:host[max-columns=\"10\"]{grid-template-columns:repeat(10,1fr)}}@media (min-width: 721px){::ng-deep .grid-item--col-1{grid-column:span 1}}@media (min-width: 721px){::ng-deep .grid-item--col-2{grid-column:span 2}}@media (min-width: 721px){::ng-deep .grid-item--col-3{grid-column:span 3}}@media (min-width: 721px){::ng-deep .grid-item--col-4{grid-column:span 4}}@media (min-width: 721px){::ng-deep .grid-item--col-5{grid-column:span 5}}@media (min-width: 721px){::ng-deep .grid-item--col-6{grid-column:span 6}}@media (min-width: 721px){::ng-deep .grid-item--col-7{grid-column:span 7}}@media (min-width: 721px){::ng-deep .grid-item--col-8{grid-column:span 8}}@media (min-width: 721px){::ng-deep .grid-item--col-9{grid-column:span 9}}@media (min-width: 721px){::ng-deep .grid-item--col-10{grid-column:span 10}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
119
+ /** @nocollapse */ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: GridComponent, isStandalone: true, selector: "kirby-grid", inputs: { maxColumns: "maxColumns", cardConfigurations: "cardConfigurations" }, host: { properties: { "attr.max-columns": "this.maxColumns" } }, ngImport: i0, template: "<ng-container *ngFor=\"let card of cards\">\n <ng-template\n [kirbyLoadComponent]=\"card.configuration\"\n [cssClass]=\"'grid-item--col-' + card.colSpan\"\n ></ng-template>\n</ng-container>\n", styles: [":host{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(var(--kirby-grid-item-min-height, auto),auto);gap:24px;max-width:var(--kirby-page-max-width);margin:0 auto}@media (min-width: 721px){:host[max-columns=\"1\"]{grid-template-columns:repeat(1,1fr)}:host[max-columns=\"2\"]{grid-template-columns:repeat(2,1fr)}:host[max-columns=\"3\"]{grid-template-columns:repeat(3,1fr)}:host[max-columns=\"4\"]{grid-template-columns:repeat(4,1fr)}:host[max-columns=\"5\"]{grid-template-columns:repeat(5,1fr)}:host[max-columns=\"6\"]{grid-template-columns:repeat(6,1fr)}:host[max-columns=\"7\"]{grid-template-columns:repeat(7,1fr)}:host[max-columns=\"8\"]{grid-template-columns:repeat(8,1fr)}:host[max-columns=\"9\"]{grid-template-columns:repeat(9,1fr)}:host[max-columns=\"10\"]{grid-template-columns:repeat(10,1fr)}}@media (min-width: 721px){::ng-deep .grid-item--col-1{grid-column:span 1}}@media (min-width: 721px){::ng-deep .grid-item--col-2{grid-column:span 2}}@media (min-width: 721px){::ng-deep .grid-item--col-3{grid-column:span 3}}@media (min-width: 721px){::ng-deep .grid-item--col-4{grid-column:span 4}}@media (min-width: 721px){::ng-deep .grid-item--col-5{grid-column:span 5}}@media (min-width: 721px){::ng-deep .grid-item--col-6{grid-column:span 6}}@media (min-width: 721px){::ng-deep .grid-item--col-7{grid-column:span 7}}@media (min-width: 721px){::ng-deep .grid-item--col-8{grid-column:span 8}}@media (min-width: 721px){::ng-deep .grid-item--col-9{grid-column:span 9}}@media (min-width: 721px){::ng-deep .grid-item--col-10{grid-column:span 10}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: ComponentLoaderDirective, selector: "[kirbyLoadComponent]", inputs: ["kirbyLoadComponent", "cssClass"] }] });
119
120
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: GridComponent, decorators: [{
120
121
  type: Component,
121
- args: [{ standalone: true, imports: [CommonModule], selector: 'kirby-grid', template: "<ng-container *ngFor=\"let card of cards\">\n <ng-template\n [kirbyLoadComponent]=\"card.configuration\"\n [cssClass]=\"'grid-item--col-' + card.colSpan\"\n ></ng-template>\n</ng-container>\n", styles: [":host{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(var(--kirby-grid-item-min-height, auto),auto);gap:24px;max-width:var(--kirby-page-max-width);margin:0 auto}@media (min-width: 721px){:host[max-columns=\"1\"]{grid-template-columns:repeat(1,1fr)}:host[max-columns=\"2\"]{grid-template-columns:repeat(2,1fr)}:host[max-columns=\"3\"]{grid-template-columns:repeat(3,1fr)}:host[max-columns=\"4\"]{grid-template-columns:repeat(4,1fr)}:host[max-columns=\"5\"]{grid-template-columns:repeat(5,1fr)}:host[max-columns=\"6\"]{grid-template-columns:repeat(6,1fr)}:host[max-columns=\"7\"]{grid-template-columns:repeat(7,1fr)}:host[max-columns=\"8\"]{grid-template-columns:repeat(8,1fr)}:host[max-columns=\"9\"]{grid-template-columns:repeat(9,1fr)}:host[max-columns=\"10\"]{grid-template-columns:repeat(10,1fr)}}@media (min-width: 721px){::ng-deep .grid-item--col-1{grid-column:span 1}}@media (min-width: 721px){::ng-deep .grid-item--col-2{grid-column:span 2}}@media (min-width: 721px){::ng-deep .grid-item--col-3{grid-column:span 3}}@media (min-width: 721px){::ng-deep .grid-item--col-4{grid-column:span 4}}@media (min-width: 721px){::ng-deep .grid-item--col-5{grid-column:span 5}}@media (min-width: 721px){::ng-deep .grid-item--col-6{grid-column:span 6}}@media (min-width: 721px){::ng-deep .grid-item--col-7{grid-column:span 7}}@media (min-width: 721px){::ng-deep .grid-item--col-8{grid-column:span 8}}@media (min-width: 721px){::ng-deep .grid-item--col-9{grid-column:span 9}}@media (min-width: 721px){::ng-deep .grid-item--col-10{grid-column:span 10}}\n"] }]
122
+ args: [{ standalone: true, imports: [CommonModule, ComponentLoaderDirective], selector: 'kirby-grid', template: "<ng-container *ngFor=\"let card of cards\">\n <ng-template\n [kirbyLoadComponent]=\"card.configuration\"\n [cssClass]=\"'grid-item--col-' + card.colSpan\"\n ></ng-template>\n</ng-container>\n", styles: [":host{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(var(--kirby-grid-item-min-height, auto),auto);gap:24px;max-width:var(--kirby-page-max-width);margin:0 auto}@media (min-width: 721px){:host[max-columns=\"1\"]{grid-template-columns:repeat(1,1fr)}:host[max-columns=\"2\"]{grid-template-columns:repeat(2,1fr)}:host[max-columns=\"3\"]{grid-template-columns:repeat(3,1fr)}:host[max-columns=\"4\"]{grid-template-columns:repeat(4,1fr)}:host[max-columns=\"5\"]{grid-template-columns:repeat(5,1fr)}:host[max-columns=\"6\"]{grid-template-columns:repeat(6,1fr)}:host[max-columns=\"7\"]{grid-template-columns:repeat(7,1fr)}:host[max-columns=\"8\"]{grid-template-columns:repeat(8,1fr)}:host[max-columns=\"9\"]{grid-template-columns:repeat(9,1fr)}:host[max-columns=\"10\"]{grid-template-columns:repeat(10,1fr)}}@media (min-width: 721px){::ng-deep .grid-item--col-1{grid-column:span 1}}@media (min-width: 721px){::ng-deep .grid-item--col-2{grid-column:span 2}}@media (min-width: 721px){::ng-deep .grid-item--col-3{grid-column:span 3}}@media (min-width: 721px){::ng-deep .grid-item--col-4{grid-column:span 4}}@media (min-width: 721px){::ng-deep .grid-item--col-5{grid-column:span 5}}@media (min-width: 721px){::ng-deep .grid-item--col-6{grid-column:span 6}}@media (min-width: 721px){::ng-deep .grid-item--col-7{grid-column:span 7}}@media (min-width: 721px){::ng-deep .grid-item--col-8{grid-column:span 8}}@media (min-width: 721px){::ng-deep .grid-item--col-9{grid-column:span 9}}@media (min-width: 721px){::ng-deep .grid-item--col-10{grid-column:span 10}}\n"] }]
122
123
  }], ctorParameters: function () { return [{ type: BreakpointHelperService }]; }, propDecorators: { maxColumns: [{
123
124
  type: HostBinding,
124
125
  args: ['attr.max-columns']
package/fesm2020/kirbydesign-designsystem-grid.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"kirbydesign-designsystem-grid.mjs","sources":["../../../../libs/designsystem/grid/src/breakpoint-helper.service.ts","../../../../libs/designsystem/grid/src/grid-card-configuration.ts","../../../../libs/designsystem/grid/src/grid.component.ts","../../../../libs/designsystem/grid/src/grid.component.html","../../../../libs/designsystem/grid/src/kirbydesign-designsystem-grid.ts"],"sourcesContent":["import { Injectable, OnDestroy } from '@angular/core';\nimport { Observable, Subject } from 'rxjs';\n\n@Injectable({\n providedIn: 'root',\n})\nexport class BreakpointHelperService implements OnDestroy {\n currentScreenWidth: 800;\n private orientationChangedSubject = new Subject<void>();\n\n constructor() {\n this.init();\n }\n\n private init() {\n // TODO JEO: Implement Angular/CDK BreakpointObserver:\n this.orientationChangedSubject.next();\n }\n\n observe(): Observable<void> {\n return this.orientationChangedSubject.asObservable();\n }\n\n ngOnDestroy() {\n this.orientationChangedSubject.complete();\n }\n}\n","import { Type } from '@angular/core';\nimport { ComponentConfiguration } from '@kirbydesign/designsystem/shared';\n\nexport class GridCardConfiguration implements ComponentConfiguration {\n constructor(public component: Type<any>, public data: any, public preferredSize: number) {}\n}\n","import { CommonModule } from '@angular/common';\nimport { Component, HostBinding, Input, OnDestroy } from '@angular/core';\nimport { ScssHelper } from '@kirbydesign/designsystem/helpers/scss';\nimport { Subscription } from 'rxjs';\n\nimport { BreakpointHelperService } from './breakpoint-helper.service';\nimport { GridCardConfiguration } from './grid-card-configuration';\n\nconst GRID_DEPRICATION_WARNING =\n 'Deprecation warning: The \"kirby-grid\" component will be removed in a future release of Kirby designsystem. Consider using kirby-grid, kirby-grid-item css-classes as an alternative solution. See grid docs at https://cookbook.kirby.design/#/home/showcase/grid';\n\nclass GridCard {\n configuration: GridCardConfiguration;\n row: number;\n col: number;\n colSpan: number;\n\n constructor(configuration: GridCardConfiguration, row: number, col: number, colSpan: number) {\n this.configuration = configuration;\n this.row = row;\n this.col = col;\n this.colSpan = colSpan;\n }\n}\n\n@Component({\n standalone: true,\n imports: [CommonModule],\n selector: 'kirby-grid',\n templateUrl: './grid.component.html',\n styleUrls: ['./grid.component.scss'],\n})\nexport class GridComponent implements OnDestroy {\n cardConfigs: GridCardConfiguration[];\n cards: GridCard[] = [];\n private breakpointSubscription: Subscription;\n\n @HostBinding('attr.max-columns')\n @Input()\n maxColumns: number;\n\n @Input()\n set cardConfigurations(cardConfigurations: GridCardConfiguration[]) {\n this.cardConfigs = cardConfigurations;\n // TODO TRM/JEO Remove this when breakpoint observe something something...\n this.configureGrid();\n }\n\n constructor(private breakpointHelper: BreakpointHelperService) {\n console.warn(GRID_DEPRICATION_WARNING);\n }\n\n configureGrid() {\n let calculatedMaxColumns = 0;\n if (this.maxColumns === undefined) {\n calculatedMaxColumns =\n this.breakpointHelper.currentScreenWidth >= ScssHelper.BREAKPOINT_SCREEN_L ? 2 : 1;\n } else {\n calculatedMaxColumns = this.maxColumns;\n }\n this.cards = [];\n let columnCounter = 0;\n let currentRow = 0;\n let currentColumn = 0;\n\n this.cardConfigs.forEach((card, index) => {\n // Cards colspan is added to the column counter\n columnCounter += card.preferredSize;\n // If only maxColumns are set to 1, just add all cards with a colspan of 1\n if (calculatedMaxColumns === 1) {\n this.cards.push(new GridCard(card, currentRow, currentColumn, 1));\n currentRow += 1;\n return;\n }\n // If we are below maxColumns, then add the card to the array\n if (columnCounter <= calculatedMaxColumns) {\n this.cards.push(new GridCard(card, currentRow, currentColumn, card.preferredSize));\n // Update currentColumn, so the next card will be placed correctly\n currentColumn += card.preferredSize;\n } else {\n // The new card didn't fit - Calculate remaining columns for previous card\n const restColumns = calculatedMaxColumns - (columnCounter - card.preferredSize);\n const prevCard = this.cards[index - 1];\n // Add the restColumns to the previous cards colspan, to make it span out\n prevCard.colSpan = restColumns + prevCard.colSpan;\n // We are now on a new row\n currentRow += 1;\n currentColumn = 0;\n this.cards.push(new GridCard(card, currentRow, currentColumn, card.preferredSize));\n // Update currentColumn to match the size of the new card and reset columnCounter\n currentColumn = card.preferredSize;\n columnCounter = card.preferredSize;\n }\n // If we on the last card, make sure it spans all the rest of the columns\n if (this.cardConfigs.length - 1 === index) {\n const restColumns = calculatedMaxColumns - columnCounter;\n const currentCard = this.cards[index];\n currentCard.colSpan += restColumns;\n }\n });\n }\n\n ngOnDestroy() {\n if (this.breakpointSubscription) {\n this.breakpointSubscription.unsubscribe();\n }\n }\n}\n","<ng-container *ngFor=\"let card of cards\">\n <ng-template\n [kirbyLoadComponent]=\"card.configuration\"\n [cssClass]=\"'grid-item--col-' + card.colSpan\"\n ></ng-template>\n</ng-container>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["i1.BreakpointHelperService"],"mappings":";;;;;;;MAMa,uBAAuB,CAAA;AAIlC,IAAA,WAAA,GAAA;AAFQ,QAAA,IAAA,CAAA,yBAAyB,GAAG,IAAI,OAAO,EAAQ,CAAC;QAGtD,IAAI,CAAC,IAAI,EAAE,CAAC;KACb;IAEO,IAAI,GAAA;;AAEV,QAAA,IAAI,CAAC,yBAAyB,CAAC,IAAI,EAAE,CAAC;KACvC;IAED,OAAO,GAAA;AACL,QAAA,OAAO,IAAI,CAAC,yBAAyB,CAAC,YAAY,EAAE,CAAC;KACtD;IAED,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,yBAAyB,CAAC,QAAQ,EAAE,CAAC;KAC3C;;uIAnBU,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA;AAAvB,mBAAA,uBAAA,CAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,uBAAuB,cAFtB,MAAM,EAAA,CAAA,CAAA;2FAEP,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAHnC,UAAU;AAAC,YAAA,IAAA,EAAA,CAAA;AACV,oBAAA,UAAU,EAAE,MAAM;AACnB,iBAAA,CAAA;;;MCFY,qBAAqB,CAAA;AAChC,IAAA,WAAA,CAAmB,SAAoB,EAAS,IAAS,EAAS,aAAqB,EAAA;QAApE,IAAS,CAAA,SAAA,GAAT,SAAS,CAAW;QAAS,IAAI,CAAA,IAAA,GAAJ,IAAI,CAAK;QAAS,IAAa,CAAA,aAAA,GAAb,aAAa,CAAQ;KAAI;AAC5F;;ACGD,MAAM,wBAAwB,GAC5B,mQAAmQ,CAAC;AAEtQ,MAAM,QAAQ,CAAA;AAMZ,IAAA,WAAA,CAAY,aAAoC,EAAE,GAAW,EAAE,GAAW,EAAE,OAAe,EAAA;AACzF,QAAA,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC;AACnC,QAAA,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;AACf,QAAA,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;AACf,QAAA,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;KACxB;AACF,CAAA;MASY,aAAa,CAAA;AAgBxB,IAAA,WAAA,CAAoB,gBAAyC,EAAA;QAAzC,IAAgB,CAAA,gBAAA,GAAhB,gBAAgB,CAAyB;QAd7D,IAAK,CAAA,KAAA,GAAe,EAAE,CAAC;AAerB,QAAA,OAAO,CAAC,IAAI,CAAC,wBAAwB,CAAC,CAAC;KACxC;IATD,IACI,kBAAkB,CAAC,kBAA2C,EAAA;AAChE,QAAA,IAAI,CAAC,WAAW,GAAG,kBAAkB,CAAC;;QAEtC,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;IAMD,aAAa,GAAA;QACX,IAAI,oBAAoB,GAAG,CAAC,CAAC;AAC7B,QAAA,IAAI,IAAI,CAAC,UAAU,KAAK,SAAS,EAAE;YACjC,oBAAoB;AAClB,gBAAA,IAAI,CAAC,gBAAgB,CAAC,kBAAkB,IAAI,UAAU,CAAC,mBAAmB,GAAG,CAAC,GAAG,CAAC,CAAC;AACtF,SAAA;AAAM,aAAA;AACL,YAAA,oBAAoB,GAAG,IAAI,CAAC,UAAU,CAAC;AACxC,SAAA;AACD,QAAA,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,aAAa,GAAG,CAAC,CAAC;QACtB,IAAI,UAAU,GAAG,CAAC,CAAC;QACnB,IAAI,aAAa,GAAG,CAAC,CAAC;QAEtB,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;;AAEvC,YAAA,aAAa,IAAI,IAAI,CAAC,aAAa,CAAC;;YAEpC,IAAI,oBAAoB,KAAK,CAAC,EAAE;AAC9B,gBAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,QAAQ,CAAC,IAAI,EAAE,UAAU,EAAE,aAAa,EAAE,CAAC,CAAC,CAAC,CAAC;gBAClE,UAAU,IAAI,CAAC,CAAC;gBAChB,OAAO;AACR,aAAA;;YAED,IAAI,aAAa,IAAI,oBAAoB,EAAE;AACzC,gBAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,QAAQ,CAAC,IAAI,EAAE,UAAU,EAAE,aAAa,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC;;AAEnF,gBAAA,aAAa,IAAI,IAAI,CAAC,aAAa,CAAC;AACrC,aAAA;AAAM,iBAAA;;gBAEL,MAAM,WAAW,GAAG,oBAAoB,IAAI,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC;gBAChF,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;;gBAEvC,QAAQ,CAAC,OAAO,GAAG,WAAW,GAAG,QAAQ,CAAC,OAAO,CAAC;;gBAElD,UAAU,IAAI,CAAC,CAAC;gBAChB,aAAa,GAAG,CAAC,CAAC;AAClB,gBAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,QAAQ,CAAC,IAAI,EAAE,UAAU,EAAE,aAAa,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC;;AAEnF,gBAAA,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;AACnC,gBAAA,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;AACpC,aAAA;;YAED,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,KAAK,KAAK,EAAE;AACzC,gBAAA,MAAM,WAAW,GAAG,oBAAoB,GAAG,aAAa,CAAC;gBACzD,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;AACtC,gBAAA,WAAW,CAAC,OAAO,IAAI,WAAW,CAAC;AACpC,aAAA;AACH,SAAC,CAAC,CAAC;KACJ;IAED,WAAW,GAAA;QACT,IAAI,IAAI,CAAC,sBAAsB,EAAE;AAC/B,YAAA,IAAI,CAAC,sBAAsB,CAAC,WAAW,EAAE,CAAC;AAC3C,SAAA;KACF;;6HA1EU,aAAa,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAAA,uBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;iHAAb,aAAa,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,UAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,kBAAA,EAAA,iBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EChC1B,yMAMA,EAAA,MAAA,EAAA,CAAA,iiDAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDqBY,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,cAAA,EAAA,eAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;2FAKX,aAAa,EAAA,UAAA,EAAA,CAAA;kBAPzB,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,UAAA,EAAA,IAAI,EACP,OAAA,EAAA,CAAC,YAAY,CAAC,YACb,YAAY,EAAA,QAAA,EAAA,yMAAA,EAAA,MAAA,EAAA,CAAA,iiDAAA,CAAA,EAAA,CAAA;2GAWtB,UAAU,EAAA,CAAA;sBAFT,WAAW;uBAAC,kBAAkB,CAAA;;sBAC9B,KAAK;gBAIF,kBAAkB,EAAA,CAAA;sBADrB,KAAK;;;AEzCR;;AAEG;;;;"}
1
+ {"version":3,"file":"kirbydesign-designsystem-grid.mjs","sources":["../../../../libs/designsystem/grid/src/breakpoint-helper.service.ts","../../../../libs/designsystem/grid/src/grid-card-configuration.ts","../../../../libs/designsystem/grid/src/grid.component.ts","../../../../libs/designsystem/grid/src/grid.component.html","../../../../libs/designsystem/grid/src/kirbydesign-designsystem-grid.ts"],"sourcesContent":["import { Injectable, OnDestroy } from '@angular/core';\nimport { Observable, Subject } from 'rxjs';\n\n@Injectable({\n providedIn: 'root',\n})\nexport class BreakpointHelperService implements OnDestroy {\n currentScreenWidth: 800;\n private orientationChangedSubject = new Subject<void>();\n\n constructor() {\n this.init();\n }\n\n private init() {\n // TODO JEO: Implement Angular/CDK BreakpointObserver:\n this.orientationChangedSubject.next();\n }\n\n observe(): Observable<void> {\n return this.orientationChangedSubject.asObservable();\n }\n\n ngOnDestroy() {\n this.orientationChangedSubject.complete();\n }\n}\n","import { Type } from '@angular/core';\nimport { ComponentConfiguration } from '@kirbydesign/designsystem/shared';\n\nexport class GridCardConfiguration implements ComponentConfiguration {\n constructor(public component: Type<any>, public data: any, public preferredSize: number) {}\n}\n","import { CommonModule } from '@angular/common';\nimport { Component, HostBinding, Input, OnDestroy } from '@angular/core';\nimport { ScssHelper } from '@kirbydesign/designsystem/helpers/scss';\nimport { ComponentLoaderDirective } from '@kirbydesign/designsystem/shared';\nimport { Subscription } from 'rxjs';\n\nimport { BreakpointHelperService } from './breakpoint-helper.service';\nimport { GridCardConfiguration } from './grid-card-configuration';\n\nconst GRID_DEPRICATION_WARNING =\n 'Deprecation warning: The \"kirby-grid\" component will be removed in a future release of Kirby designsystem. Consider using kirby-grid, kirby-grid-item css-classes as an alternative solution. See grid docs at https://cookbook.kirby.design/#/home/showcase/grid';\n\nclass GridCard {\n configuration: GridCardConfiguration;\n row: number;\n col: number;\n colSpan: number;\n\n constructor(configuration: GridCardConfiguration, row: number, col: number, colSpan: number) {\n this.configuration = configuration;\n this.row = row;\n this.col = col;\n this.colSpan = colSpan;\n }\n}\n\n@Component({\n standalone: true,\n imports: [CommonModule, ComponentLoaderDirective],\n selector: 'kirby-grid',\n templateUrl: './grid.component.html',\n styleUrls: ['./grid.component.scss'],\n})\nexport class GridComponent implements OnDestroy {\n cardConfigs: GridCardConfiguration[];\n cards: GridCard[] = [];\n private breakpointSubscription: Subscription;\n\n @HostBinding('attr.max-columns')\n @Input()\n maxColumns: number;\n\n @Input()\n set cardConfigurations(cardConfigurations: GridCardConfiguration[]) {\n this.cardConfigs = cardConfigurations;\n // TODO TRM/JEO Remove this when breakpoint observe something something...\n this.configureGrid();\n }\n\n constructor(private breakpointHelper: BreakpointHelperService) {\n console.warn(GRID_DEPRICATION_WARNING);\n }\n\n configureGrid() {\n let calculatedMaxColumns = 0;\n if (this.maxColumns === undefined) {\n calculatedMaxColumns =\n this.breakpointHelper.currentScreenWidth >= ScssHelper.BREAKPOINT_SCREEN_L ? 2 : 1;\n } else {\n calculatedMaxColumns = this.maxColumns;\n }\n this.cards = [];\n let columnCounter = 0;\n let currentRow = 0;\n let currentColumn = 0;\n\n this.cardConfigs.forEach((card, index) => {\n // Cards colspan is added to the column counter\n columnCounter += card.preferredSize;\n // If only maxColumns are set to 1, just add all cards with a colspan of 1\n if (calculatedMaxColumns === 1) {\n this.cards.push(new GridCard(card, currentRow, currentColumn, 1));\n currentRow += 1;\n return;\n }\n // If we are below maxColumns, then add the card to the array\n if (columnCounter <= calculatedMaxColumns) {\n this.cards.push(new GridCard(card, currentRow, currentColumn, card.preferredSize));\n // Update currentColumn, so the next card will be placed correctly\n currentColumn += card.preferredSize;\n } else {\n // The new card didn't fit - Calculate remaining columns for previous card\n const restColumns = calculatedMaxColumns - (columnCounter - card.preferredSize);\n const prevCard = this.cards[index - 1];\n // Add the restColumns to the previous cards colspan, to make it span out\n prevCard.colSpan = restColumns + prevCard.colSpan;\n // We are now on a new row\n currentRow += 1;\n currentColumn = 0;\n this.cards.push(new GridCard(card, currentRow, currentColumn, card.preferredSize));\n // Update currentColumn to match the size of the new card and reset columnCounter\n currentColumn = card.preferredSize;\n columnCounter = card.preferredSize;\n }\n // If we on the last card, make sure it spans all the rest of the columns\n if (this.cardConfigs.length - 1 === index) {\n const restColumns = calculatedMaxColumns - columnCounter;\n const currentCard = this.cards[index];\n currentCard.colSpan += restColumns;\n }\n });\n }\n\n ngOnDestroy() {\n if (this.breakpointSubscription) {\n this.breakpointSubscription.unsubscribe();\n }\n }\n}\n","<ng-container *ngFor=\"let card of cards\">\n <ng-template\n [kirbyLoadComponent]=\"card.configuration\"\n [cssClass]=\"'grid-item--col-' + card.colSpan\"\n ></ng-template>\n</ng-container>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["i1.BreakpointHelperService"],"mappings":"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"}
package/package.json CHANGED
@@ -1,10 +1,10 @@
1
1
  {
2
2
  "name": "@kirbydesign/designsystem",
3
- "version": "8.1.1",
3
+ "version": "8.1.2",
4
4
  "dependencies": {
5
5
  "@fontsource/roboto": "4.2.1",
6
6
  "@ionic/angular": "6.2.1",
7
- "@kirbydesign/core": "0.0.41",
7
+ "@kirbydesign/core": "0.0.42",
8
8
  "inputmask": "5.0.5",
9
9
  "tslib": "^2.3.0"
10
10
  },