Feature/navigation from statamic controls section

projects/demo/src/app/app.component.html

@@ -39,5 +39,5 @@
 <!-- <ids-nav [menu]="menuConfigs" /> -->
 <ids-nav [menu]="dynamicMenu" />
 <main cdkScrollable>
-  <div class="container p-8 mx-auto"><router-outlet /></div>
+  <div class="container p-8 mx-auto"> <router-outlet/></div>
 </main>

projects/demo/src/app/components/control-table/control-table-small/control-table-small.component.html

@@ -0,0 +1,110 @@
+<ids-card appearance="filled" class="control-card-group">
+  <header idsCardHeader>
+    <h2 idsCardTitle>{{ _caption() | sentenceCase }} controls</h2>
+  </header>
+
+  <ids-card-body style="overflow: visible">
+    @for (control of _flatControls(); track $index) {
+      <div class="control-row">
+        <div class="control-name">{{ control.name }}</div>
+
+        <div class="control-input">
+          @let disabled = control.disabled ?? false;
+
+          @switch (control.control) {
+            @case (_demoControl.SWITCH) {
+              <ids-switch
+                [hasIcon]="true"
+                [name]="control.name"
+                [id]="control.name"
+                [disabled]="disabled"
+                [(ngModel)]="model()[control.name]"
+                (ngModelChange)="control.onModelChange?.($event)"
+              />
+            }
+            @case (_demoControl.SELECT) {
+              <ids-form-field style="width: 100%; z-index: 10; position: relative">
+                <ids-select
+                  style="width: 100%"
+                  [disabled]="disabled"
+                  [(ngModel)]="model()[control.name]"
+                  (ngModelChange)="control.onModelChange?.($event)"
+                >
+                  <ids-option-group>
+                    @for (item of control.list; track $index) {
+                      <ids-option [value]="item">{{ item }}</ids-option>
+                    }
+                  </ids-option-group>
+                </ids-select>
+              </ids-form-field>
+            }
+            @case (_demoControl.NUMBER) {
+              <ids-form-field style="width: 100%; z-index: 10; position: relative">
+                <input
+                  idsInput
+                  type="number"
+                  style="width: 100%"
+                  [name]="control.name"
+                  [id]="control.name"
+                  [disabled]="disabled"
+                  [attr.min]="control.min"
+                  [attr.step]="control.step"
+                  [(ngModel)]="model()[control.name]"
+                  (ngModelChange)="control.onModelChange?.($event)"
+                />
+              </ids-form-field>
+            }
+
+            @case (_demoControl.DATE) {
+              <ids-form-field style="width: 100%" [variant]="'surface'">
+                <input
+                  #inputFieldModel="ngModel"
+                  #datepicker="idsDatepicker"
+                  idsInput
+                  idsDatepicker
+                  style="width: 100%"
+                  [name]="control.name"
+                  [id]="control.name"
+                  [disabled]="disabled"
+                  [(ngModel)]="model()[control.name]"
+                  (ngModelChange)="control.onModelChange?.($event)"
+                />
+
+                <ids-datepicker-trigger idsSuffix [for]="datepicker" />
+              </ids-form-field>
+            }
+            @case (_demoControl.NUMBERARRAY) {
+              <ids-form-field style="width: 100%" [variant]="'surface'">
+                <input
+                  idsInput
+                  type="text"
+                  style="width: 100%"
+                  [name]="control.name"
+                  [id]="control.name"
+                  [disabled]="disabled"
+                  [(ngModel)]="model()[control.name]"
+                  (ngModelChange)="_convertModelValueStringToNumberArray(control.name); control.onModelChange?.($event)"
+                />
+              </ids-form-field>
+            }
+            @default {
+              <ids-form-field style="width: 100%" [variant]="'surface'">
+                <input
+                  #inputFieldModel="ngModel"
+                  idsInput
+                  type="text"
+                  style="width: 100%"
+                  [name]="control.name"
+                  [id]="control.name"
+                  [disabled]="disabled"
+                  [(ngModel)]="model()[control.name]"
+                  (ngModelChange)="control.onModelChange?.($event)"
+                />
+              </ids-form-field>
+            }
+          }
+        </div>
+      </div>
+    }
+  </ids-card-body>
+</ids-card>

projects/demo/src/app/components/control-table/control-table-small/control-table-small.component.scss

@@ -0,0 +1,44 @@
+.control-card-group {
+  // Add spacing between the multiple control card groups
+  // margin-bottom: 20px;
+}
+
+.ids-card-title {
+  color: var(--smc-reference-container-color-fg-secondary-fixed-darker-30, #1e293b);
+
+  /* ids/title/medium/prominent */
+  font-family: Montserrat;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 24px; /* 150% */
+}
+
+.control-row {
+  // Use Flexbox to align the name and input side-by-side
+  display: flex;
+  align-items: center;
+  padding: 10px 0; // Vertical padding for row separation
+}
+
+.control-name {
+  // Allocate space for the name column, similar to the 15% in the original table
+  flex: 0 0 150px; // Use a fixed width or percentage based on your needs
+  // padding-right: 20px;
+  // font-weight: 600; // Make the label stand out
+  color: var(--smc-reference-container-color-fg-secondary-fixed-default, #64748b);
+  /* ids/body/large/regular */
+  font-family: Montserrat;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px; /* 150% */
+  letter-spacing: 0.5px;
+}
+
+.control-input {
+  // The control takes up the remaining space
+  display: flex;
+  align-items: center;
+  flex: 1;
+}

projects/demo/src/app/components/control-table/control-table-small/control-table-small.component.ts

@@ -0,0 +1,93 @@
+import { DemoControl, DemoControlConfig, DemoControlItem } from '../../../../types/demo-control.type';
+
+import { CommonModule } from '@angular/common';
+import { Component, computed, input, model, output } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { IdsCardBodyDirective, IdsCardComponent, IdsCardHeaderComponent, IdsCardTitleDirective } from '@i-cell/ids-angular/card';
+import { IdsSentenceCasePipe } from '@i-cell/ids-angular/core';
+import { IdsDatepickerTriggerComponent, IdsDatepickerDirective } from '@i-cell/ids-angular/datepicker';
+import { IdsFormFieldComponent, IdsInputDirective, IdsOptionComponent, IdsOptionGroupComponent, IdsSuffixDirective } from '@i-cell/ids-angular/forms';
+import { IdsSelectComponent } from '@i-cell/ids-angular/select';
+import { IdsSwitchComponent } from '@i-cell/ids-angular/switch';
+
+const DEFAULT_CONTROL_TABLE_PADDING = 8;
+
+@Component({
+  selector: 'app-control-table-small',
+  imports: [
+    CommonModule,
+    IdsSentenceCasePipe,
+    FormsModule,
+    IdsSwitchComponent,
+    IdsSelectComponent,
+    IdsFormFieldComponent,
+    IdsOptionComponent,
+    IdsOptionGroupComponent,
+    IdsCardComponent,
+    IdsCardTitleDirective,
+    IdsCardBodyDirective,
+    IdsCardHeaderComponent,
+    IdsInputDirective,
+    IdsDatepickerDirective,
+    IdsSuffixDirective,
+    IdsDatepickerTriggerComponent,
+  ],
+  templateUrl: './control-table-small.component.html',
+  styleUrl: './control-table-small.component.scss',
+})
+export class ControlTableSmallComponent<T extends Record<string, T[keyof T]>> {
+  public cellPadding = input<number>(DEFAULT_CONTROL_TABLE_PADDING);
+  public configType = input<'input' | 'helper'>('input');
+  public controlName = input<string | undefined>();
+  public controlConfig = input<DemoControlConfig<T>>();
+  public model = model.required<T>();
+  public modelChange = output<T>();
+  public resetted = output<void>();
+
+  protected _demoControl = DemoControl;
+
+  protected _caption = computed(() => [
+    this.controlName(),
+    this.configType(),
+  ].filter(Boolean).join(' '));
+
+  protected _flatControls = computed(() => {
+    const controls = this.controlConfig();
+    if (!controls) {
+      return [];
+    }
+    return Object.entries<DemoControlItem<T[keyof T]>>(controls).map(([
+      key,
+      ctrl,
+    ]) => {
+      const listToDisplay = ctrl.control === 'select' ? ctrl.list : undefined;
+      return ({
+        name: key,
+        ...ctrl,
+        list: listToDisplay,
+      });
+    });
+  });
+
+  protected _convertModelValueStringToNumberArray(controlName: keyof T): void {
+    const value = this.model()[controlName];
+    if (typeof value === 'string') {
+      this.model.update((obj) => ({
+        ...obj,
+        [controlName]: this._stringToArray(obj[controlName] as string).map((item) => +item) as T[keyof T],
+      }));
+    }
+  }
+
+  private _stringToArray(value: string): string[] {
+    const arr = value.split(',').map((item) => item.trim()).filter(Boolean);
+    if (arr.length === 0) {
+      return [];
+    }
+    return arr;
+  }
+
+  protected _reset(): void {
+    this.resetted.emit();
+  }
+}

projects/demo/src/app/components/hero/hero.component.html

@@ -3,7 +3,7 @@
     <div class="flex items-center mb-12 gap-ids-container-gap-16">
       @if (heroData().isBackButton) {
         <button type="button" idsIconButton size="comfortable" variant="surface" appearance="standard" (click)="goBack()">
-          <ids-icon aria-hidden="true" alt="" fontIcon="arrow-left" />
+          <ids-icon aria-hidden="true" alt="" fontIcon="west" />
         </button>
       }
       <h1 class="text-display-medium-prominent">{{ heroData().title }}</h1>

projects/demo/src/app/components/tryout/tryout-controls.component.html

@@ -0,0 +1,5 @@
+<section class="controls">
+  <div class="control-tables-container">
+    <ng-content select="[controls]" />
+  </div>
+</section>

projects/demo/src/app/components/tryout/tryout-controls.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-control-tryout',
+  templateUrl: './tryout-controls.component.html',
+  styleUrl: './tryout.component.scss',
+})
+export class TryoutControlComponent {
+
+}

projects/demo/src/app/components/tryout/tryout.component.html

@@ -1,16 +1,3 @@
-<div class="title">
-  <h1>{{ title() }}</h1>
-  <button type="button" idsIconButton appearance="standard" variant="dark" (click)="_reset()">
-    <ids-icon fontIcon="reload" />
-  </button>
-</div>
-
 <section class="component" [class.light]="hasDarkBackground()">
   <ng-content select="[component]" />
 </section>
-
-<section class="controls">
-  <div class="control-tables-container">
-    <ng-content select="[controls]" />
-  </div>
-</section>

projects/demo/src/app/components/tryout/tryout.component.scss

@@ -3,10 +3,11 @@
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  padding: 2rem;
   box-sizing: border-box;
   height: 100%;
   overflow: hidden;
+  justify-content: center;
+  align-items: stretch;
 }
 
 .title {
@@ -24,14 +25,20 @@
 }
 
 section {
-  padding: 2rem;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: stretch;
   gap: 4rem;
 
   &.component {
+      padding: 2rem;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex: 1 0 0;
+
     &.light {
       color: var(--ids-smc-colors-surface-lighter-10);
       background-color: var(--ids-smc-colors-surface-darker-80);

projects/demo/src/app/components/tryout/tryout.component.ts

@@ -1,23 +1,12 @@
-import { Component, input, output } from '@angular/core';
-import { IdsIconComponent } from '@i-cell/ids-angular/icon';
-import { IdsIconButtonComponent } from '@i-cell/ids-angular/icon-button';
+import { Component, input } from '@angular/core';
 
 @Component({
   selector: 'app-tryout',
-  imports: [
-    IdsIconButtonComponent,
-    IdsIconComponent,
-  ],
   templateUrl: './tryout.component.html',
   styleUrl: './tryout.component.scss',
 })
 export class TryoutComponent {
-  public title = input.required<string>();
-  public hasDarkBackground = input<boolean>(false);
 
-  public resetted = output<void>();
+  public hasDarkBackground = input<boolean>(false);
 
-  protected _reset(): void {
-    this.resetted.emit();
-  }
 }

projects/demo/src/app/model/componentEntry.ts

@@ -1,4 +1,6 @@
 export interface ComponentEntry {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  componentBlocks: any;
   id: string;
   title: string;
   slug: string;

projects/demo/src/app/pages/accordion/accordion-demo-control.component.html

@@ -0,0 +1,3 @@
+<app-control-tryout>
+  <app-control-table-small controls [configType]="'input'" [controlConfig]="accordionDemoService.inputControlConfig" [(model)]="accordionDemoService.model" />
+</app-control-tryout>