fix: set component props in stories + add setter to columnCount

Author: onlyexeption

src/components/tile-manager/tile-manager.ts

@@ -48,6 +48,7 @@ export default class IgcTileManagerComponent extends EventEmitterMixin<
   private draggedItem: IgcTileComponent | null = null;
   private finalOrder: IgcTileComponent[] = [];
   private positionedTiles: IgcTileComponent[] = [];
+  private _columnCount = 10;
 
   // @query('[part="base"]', true)
   // private _baseWrapper!: HTMLDivElement;
@@ -89,7 +90,23 @@ export default class IgcTileManagerComponent extends EventEmitterMixin<
   public dragMode: 'slide' | 'swap' = 'slide';
 
   @property({ type: Number })
-  public columnCount = 10;
+  public set columnCount(value: number) {
+    const oldValue = this._columnCount;
+
+    if (value <= 0) {
+      this._columnCount = 10;
+    } else {
+      this._columnCount = value;
+    }
+
+    if (oldValue !== this._columnCount) {
+      this.requestUpdate('columnCount', oldValue);
+    }
+  }
+
+  public get columnCount() {
+    return this._columnCount;
+  }
 
   @property({ type: Number })
   public minColumnWidth = 150;

stories/tile-manager.stories.ts

@@ -150,7 +150,7 @@ const date = new Date();
 
 export const AutoInfer: Story = {
   argTypes: disableStoryControls(metadata),
-  render: () => html`
+  render: (args) => html`
     <style>
       :root {
         --ig-min-col-width: 600px;
@@ -168,7 +168,12 @@ export const AutoInfer: Story = {
         }
       }
     </style>
-    <igc-tile-manager>
+    <igc-tile-manager
+      .dragMode=${args.dragMode}
+      .columnCount=${args.columnCount}
+      .minColumnWidth=${args.minColumnWidth}
+      .minRowHeight=${args.minRowHeight}
+    >
       ${pictures.map(
         ({ width, height }) => html`
           <igc-tile>
@@ -187,7 +192,12 @@ export const AutoInfer: Story = {
 
 export const FinDashboard: Story = {
   render: (args) => html`
-    <igc-tile-manager>
+    <igc-tile-manager
+      .dragMode=${args.dragMode}
+      .columnCount=${args.columnCount}
+      .minColumnWidth=${args.minColumnWidth}
+      .minRowHeight=${args.minRowHeight}
+    >
       <igc-tile
         .colSpan=${3}
         .rowSpan=${5}
@@ -350,7 +360,7 @@ export const FinDashboard: Story = {
 
 export const FinDashboard1: Story = {
   render: (args) => html`
-    <igc-tile-manager>
+    <igc-tile-manager .dragMode=${args.dragMode} .columnCount=${args.columnCount} .minColumnWidth=${args.minColumnWidth} .minRowHeight=${args.minRowHeight}>
       <igc-tile .colSpan=${3} .rowSpan=${2}>
         <igc-tile-header slot="header">
           <span slot="title">Good morning, John</span>
@@ -582,6 +592,8 @@ export const Default: Story = {
     <igc-tile-manager
       .dragMode=${args.dragMode}
       .columnCount=${args.columnCount}
+      .minColumnWidth=${args.minColumnWidth}
+      .minRowHeight=${args.minRowHeight}
     >
       <p>This text won't be displayed in Tile Manager</p>
       ${tiles}
@@ -609,7 +621,7 @@ function cancelStateChangeEvent(e: CustomEvent) {
 }
 
 export const Maximized: Story = {
-  render: () => html`
+  render: (args) => html`
     <style>
       igc-tile-manager {
         margin: 0 auto;
@@ -618,7 +630,12 @@ export const Maximized: Story = {
       }
     </style>
 
-    <igc-tile-manager>
+    <igc-tile-manager
+      .dragMode=${args.dragMode}
+      .columnCount=${args.columnCount}
+      .minColumnWidth=${args.minColumnWidth}
+      .minRowHeight=${args.minRowHeight}
+    >
       <igc-tile
         id="max-tile"
         maximized