Various fixes

buildo · May 6, 2024 · 89d7641 · 89d7641
1 parent b92b988
commit 89d7641
Show file tree

Hide file tree

Showing 7 changed files with 89 additions and 60 deletions.
diff --git a/projects/layout-components/documentation.json b/projects/layout-components/documentation.json
diff --git a/projects/layout-components/package-lock.json b/projects/layout-components/package-lock.json
diff --git a/projects/layout-components/src/lib/column/column.component.scss b/projects/layout-components/src/lib/column/column.component.scss
@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}
diff --git a/projects/layout-components/src/lib/inset/inset.component.css b/projects/layout-components/src/lib/inset/inset.component.css
@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}
diff --git a/projects/layout-components/src/lib/tiles/tiles.component.css b/projects/layout-components/src/lib/tiles/tiles.component.css
@@ -1,3 +1,3 @@
 :host {
     display: grid;
-}
+}
diff --git a/projects/layout-components/src/lib/tiles/tiles.component.ts b/projects/layout-components/src/lib/tiles/tiles.component.ts
@@ -1,4 +1,4 @@
-import { Component, HostBinding, Input } from '@angular/core';
+import { Component, HostBinding, Input, numberAttribute } from '@angular/core';
 import { Gap, Padding } from '../common';
 
 @Component({
@@ -10,10 +10,11 @@ import { Gap, Padding } from '../common';
 })
 export class TilesComponent {
   @HostBinding('style.gap') @Input() gap: Gap = '0';
-  @HostBinding('style.grid-template-columns')
-  @Input()
-  gridTemplateColumns: string = 'repeat(4, 1fr)';
   @HostBinding('style.grid-template-rows') @Input() gridTemplateRows: string =
     'auto';
   @HostBinding('style.padding') @Input() padding: Padding = '0';
+  @Input({ transform: numberAttribute }) columns: number = 0;
+  @HostBinding('style.grid-template-columns') get gridTemplateColumns() {
+    return `repeat(${this.columns}, 1fr)`;
+  }
 }
diff --git a/projects/layout-components/src/stories/tiles.stories.ts b/projects/layout-components/src/stories/tiles.stories.ts
@@ -40,5 +40,6 @@ type Story = StoryObj<TilesComponent>;
 export const Basic: Story = {
   args: {
     gap: '16px',
+    columns: 3,
   },
 };