Various fixes

Author: gabro

projects/layout-components/documentation.json

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

projects/layout-components/package-lock.json

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

projects/layout-components/src/lib/column/column.component.scss

@@ -1,3 +1,3 @@
 :host {
     display: grid;
-}
+}

projects/layout-components/src/lib/inset/inset.component.css

@@ -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)`;
+  }
 }

projects/layout-components/src/lib/tiles/tiles.component.css

@@ -40,5 +40,6 @@ type Story = StoryObj<TilesComponent>;
 export const Basic: Story = {
   args: {
     gap: '16px',
+    columns: 3,
   },
 };