@skyux/pages 8.7.2 → 9.0.0-alpha.1

package/documentation.json

@@ -3146,129 +3146,129 @@
   },
   "codeExamples": [
     {
-      "fileName": "action-hub-demo.component.html",
-      "filePath": "/projects/pages/documentation/code-examples/action-hub/action-hub-demo.component.html",
-      "rawContents": "<sky-action-hub\n  [needsAttention]=\"needsAttention\"\n  [recentLinks]=\"recentLinks\"\n  [relatedLinks]=\"relatedLinks\"\n  [settingsLinks]=\"settingsLinks\"\n  [title]=\"title\"\n>\n  <sky-action-hub-buttons>\n    <a\n      *ngFor=\"let button of buttons\"\n      class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n      [href]=\"button.permalink.url\"\n    >\n      {{ button.label }}\n    </a>\n  </sky-action-hub-buttons>\n\n  <sky-action-hub-content>\n    <h2 class=\"sky-font-heading-2\">Additional content</h2>\n    <p>More content can go here as needed for the functional area.</p>\n  </sky-action-hub-content>\n</sky-action-hub>\n"
+      "fileName": "split-view-page-fit-layout-demo.module.ts",
+      "filePath": "/projects/pages/documentation/code-examples/page/split-view-page-fit-layout-demo/split-view-page-fit-layout-demo.module.ts",
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { SkySummaryActionBarModule } from '@skyux/action-bars';\nimport { SkyInputBoxModule } from '@skyux/forms';\nimport { SkyAlertModule } from '@skyux/indicators';\nimport { SkyDescriptionListModule } from '@skyux/layout';\nimport { SkyRepeaterModule } from '@skyux/lists';\nimport { SkyPageModule } from '@skyux/pages';\nimport { SkySplitViewModule } from '@skyux/split-view';\n\nimport { SplitViewPageContentComponent } from './split-view-page-content.component';\nimport { SplitViewPageFitLayoutDemoComponent } from './split-view-page-fit-layout-demo.component';\n\n@NgModule({\n  declarations: [\n    SplitViewPageFitLayoutDemoComponent,\n    SplitViewPageContentComponent,\n  ],\n  exports: [SplitViewPageFitLayoutDemoComponent],\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    SkyAlertModule,\n    SkyDescriptionListModule,\n    SkyInputBoxModule,\n    SkyPageModule,\n    SkyRepeaterModule,\n    SkySplitViewModule,\n    SkySummaryActionBarModule,\n  ],\n})\nexport class SplitViewPageFitLayoutDemoModule {}\n"
     },
     {
-      "fileName": "action-hub-demo.component.ts",
-      "filePath": "/projects/pages/documentation/code-examples/action-hub/action-hub-demo.component.ts",
-      "rawContents": "import { Component } from '@angular/core';\nimport { SkyPageModalLinksInput } from '@skyux/pages';\n\nimport { SettingsModalComponent } from './settings-modal.component';\n\nconst pastHours = Array.from(Array(5).keys()).map((i) => {\n  const date = new Date();\n  date.setHours(date.getHours() - (i + 1));\n  return date;\n});\n\n@Component({\n  selector: 'app-action-hub-visual',\n  templateUrl: './action-hub-demo.component.html',\n})\nexport class ActionHubDemoComponent {\n  public buttons = [\n    {\n      label: 'Action 1',\n      permalink: {\n        url: '#',\n      },\n    },\n    {\n      label: 'Action 2',\n      permalink: {\n        url: '#',\n      },\n    },\n    {\n      label: 'Action 3',\n      permalink: {\n        url: '#',\n      },\n    },\n  ];\n\n  public needsAttention = [\n    {\n      title: '9',\n      message: 'updates from portal',\n      permalink: {\n        url: '#',\n      },\n    },\n    {\n      title: '8',\n      message: 'new messages from online donation',\n      permalink: {\n        url: '#',\n      },\n    },\n    {\n      title: '7',\n      message: 'possible duplicates from constituent lists',\n      permalink: {\n        url: '#',\n      },\n    },\n    {\n      title: '6',\n      message: 'updates from portal',\n      permalink: {\n        url: '#',\n      },\n    },\n    {\n      title: '5',\n      message: 'new messages from online donation',\n      permalink: {\n        url: '#',\n      },\n    },\n    {\n      title: '4',\n      message: 'possible duplicates from constituent lists',\n      permalink: {\n        url: '#',\n      },\n    },\n    {\n      title: '3',\n      message: 'update from portal',\n      permalink: {\n        url: '#',\n      },\n    },\n    {\n      title: '2',\n      message: 'new messages from online donation',\n      permalink: {\n        url: '#',\n      },\n    },\n    {\n      title: '1',\n      message: 'possible duplicate from constituent lists',\n      permalink: {\n        url: '#',\n      },\n    },\n  ];\n\n  public recentLinks = [\n    {\n      label: 'Recent 1',\n      permalink: {\n        url: '#',\n      },\n      lastAccessed: pastHours[0],\n    },\n    {\n      label: 'Recent 2',\n      permalink: {\n        url: '#',\n      },\n      lastAccessed: pastHours[1],\n    },\n    {\n      label: 'Recent 3',\n      permalink: {\n        url: '#',\n      },\n      lastAccessed: pastHours[2],\n    },\n    {\n      label: 'Recent 4',\n      permalink: {\n        url: '#',\n      },\n      lastAccessed: pastHours[3],\n    },\n    {\n      label: 'Recent 5',\n      permalink: {\n        url: '#',\n      },\n      lastAccessed: pastHours[4],\n    },\n  ];\n\n  public relatedLinks = [\n    {\n      label: 'Link 1',\n      permalink: {\n        url: '#',\n      },\n    },\n    {\n      label: 'Link 2',\n      permalink: {\n        url: '#',\n      },\n    },\n    {\n      label: 'Link 3',\n      permalink: {\n        url: '#',\n      },\n    },\n  ];\n\n  public settingsLinks: SkyPageModalLinksInput = [\n    {\n      label: 'Number',\n      modal: {\n        component: SettingsModalComponent,\n        config: {\n          size: 'large',\n          providers: [\n            {\n              provide: 'modalTitle',\n              useValue: 'Number',\n            },\n          ],\n        },\n      },\n    },\n    {\n      label: 'Color',\n      modal: {\n        component: SettingsModalComponent,\n        config: {\n          size: 'large',\n          providers: [\n            {\n              provide: 'modalTitle',\n              useValue: 'Color',\n            },\n          ],\n        },\n      },\n    },\n  ];\n\n  public title = 'Page title';\n}\n"
+      "fileName": "split-view-page-fit-layout-demo.component.ts",
+      "filePath": "/projects/pages/documentation/code-examples/page/split-view-page-fit-layout-demo/split-view-page-fit-layout-demo.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-split-view-page-fit-layout-demo',\n  templateUrl: './split-view-page-fit-layout-demo.component.html',\n})\nexport class SplitViewPageFitLayoutDemoComponent {}\n"
     },
     {
-      "fileName": "action-hub-demo.module.ts",
-      "filePath": "/projects/pages/documentation/code-examples/action-hub/action-hub-demo.module.ts",
-      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { SkyColorpickerModule } from '@skyux/colorpicker';\nimport { SkyIdModule } from '@skyux/core';\nimport { SkyInputBoxModule } from '@skyux/forms';\nimport { SkyIconModule } from '@skyux/indicators';\nimport { SkyModalModule } from '@skyux/modals';\nimport { SkyActionHubModule } from '@skyux/pages';\n\nimport { ActionHubDemoComponent } from './action-hub-demo.component';\nimport { SettingsModalComponent } from './settings-modal.component';\n\n@NgModule({\n  declarations: [ActionHubDemoComponent, SettingsModalComponent],\n  exports: [ActionHubDemoComponent],\n  imports: [\n    CommonModule,\n    SkyActionHubModule,\n    SkyColorpickerModule,\n    SkyIconModule,\n    SkyIdModule,\n    SkyInputBoxModule,\n    SkyModalModule,\n    ReactiveFormsModule,\n  ],\n})\nexport class ActionHubDemoModule {}\n"
+      "fileName": "split-view-page-fit-layout-demo.component.spec.ts",
+      "filePath": "/projects/pages/documentation/code-examples/page/split-view-page-fit-layout-demo/split-view-page-fit-layout-demo.component.spec.ts",
+      "rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { ComponentFixture, TestBed } from '@angular/core/testing';\nimport { NoopAnimationsModule } from '@angular/platform-browser/animations';\nimport { RouterTestingModule } from '@angular/router/testing';\nimport { SkyPageHarness } from '@skyux/pages/testing';\n\nimport { SplitViewPageFitLayoutDemoComponent } from './split-view-page-fit-layout-demo.component';\nimport { SplitViewPageFitLayoutDemoModule } from './split-view-page-fit-layout-demo.module';\n\nfdescribe('Split view page fit layout demo', async () => {\n  async function setupTest(): Promise<{\n    pageHarness: SkyPageHarness;\n    fixture: ComponentFixture<SplitViewPageFitLayoutDemoComponent>;\n  }> {\n    const fixture = TestBed.createComponent(\n      SplitViewPageFitLayoutDemoComponent\n    );\n\n    const loader = TestbedHarnessEnvironment.documentRootLoader(fixture);\n    const pageHarness = await loader.getHarness(SkyPageHarness);\n\n    return { pageHarness, fixture };\n  }\n\n  beforeEach(() => {\n    TestBed.configureTestingModule({\n      imports: [\n        NoopAnimationsModule,\n        RouterTestingModule,\n        SplitViewPageFitLayoutDemoModule,\n      ],\n    });\n  });\n\n  it('should have a fit layout', async () => {\n    const { pageHarness, fixture } = await setupTest();\n\n    fixture.detectChanges();\n\n    await expectAsync(pageHarness.getLayout()).toBeResolvedTo('fit');\n  });\n});\n"
     },
     {
-      "fileName": "settings-modal.component.html",
-      "filePath": "/projects/pages/documentation/code-examples/action-hub/settings-modal.component.html",
-      "rawContents": "<sky-modal>\n  <sky-modal-header>{{ title }}</sky-modal-header>\n  <sky-modal-content>\n    <form [formGroup]=\"form\" (submit)=\"modal.save()\">\n      <ng-container *ngFor=\"let field of fields\" class=\"row\">\n        <ng-container [ngSwitch]=\"title\">\n          <ng-container *ngSwitchDefault>\n            <sky-input-box [labelText]=\"field\">\n              <input [formControlName]=\"field\" type=\"text\" />\n            </sky-input-box>\n          </ng-container>\n          <ng-container *ngSwitchCase=\"'Color'\">\n            <div class=\"sky-form-group\">\n              <label class=\"sky-control-label\" [for]=\"input.id\">{{\n                field\n              }}</label>\n              <sky-colorpicker #colorPicker>\n                <input\n                  [formControlName]=\"field\"\n                  [skyColorpickerInput]=\"colorPicker\"\n                  skyId\n                  #input=\"skyId\"\n                  type=\"text\"\n                />\n              </sky-colorpicker>\n            </div>\n          </ng-container>\n        </ng-container>\n      </ng-container>\n    </form>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      class=\"sky-btn sky-btn-primary sky-margin-inline-sm\"\n      type=\"button\"\n      (click)=\"modal.save()\"\n    >\n      Save\n    </button>\n    <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"modal.close()\">\n      Close\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n"
+      "fileName": "split-view-page-fit-layout-demo.component.html",
+      "filePath": "/projects/pages/documentation/code-examples/page/split-view-page-fit-layout-demo/split-view-page-fit-layout-demo.component.html",
+      "rawContents": "<sky-page layout=\"fit\">\n  <sky-page-header\n    pageTitle=\"Expenses to approve\"\n    [parentLink]=\"{\n      label: 'Expenses',\n      permalink: {\n        route: {\n          commands: ['/']\n        }\n      }\n    }\"\n  >\n    <sky-page-header-alerts>\n      <sky-alert alertType=\"warning\" descriptionType=\"warning\">\n        There are multpile expense approvals due soon.\n      </sky-alert>\n    </sky-page-header-alerts>\n    <sky-page-header-actions>\n      <button class=\"sky-btn sky-btn-default\">Approve all</button>\n    </sky-page-header-actions>\n  </sky-page-header>\n  <sky-page-content>\n    <app-split-view-page-content></app-split-view-page-content>\n  </sky-page-content>\n</sky-page>\n"
     },
     {
-      "fileName": "settings-modal.component.ts",
-      "filePath": "/projects/pages/documentation/code-examples/action-hub/settings-modal.component.ts",
-      "rawContents": "import { Component, Inject } from '@angular/core';\nimport {\n  AbstractControl,\n  UntypedFormBuilder,\n  UntypedFormGroup,\n} from '@angular/forms';\nimport { SkyModalInstance } from '@skyux/modals';\n\n@Component({\n  selector: 'app-settings-modal',\n  templateUrl: './settings-modal.component.html',\n})\nexport class SettingsModalComponent {\n  public form: UntypedFormGroup;\n  public fields: string[] = [];\n\n  constructor(\n    fb: UntypedFormBuilder,\n    public modal: SkyModalInstance,\n    @Inject('modalTitle') public title: string\n  ) {\n    const controls: Record<string, AbstractControl> = {};\n    for (let i = 1; i <= 5; i++) {\n      const field = `${this.title} ${i}`;\n      this.fields.push(field);\n      controls[field] = fb.control('');\n    }\n    this.form = fb.group(controls);\n    this.modal.closed.subscribe((args) => {\n      if (args.reason === 'save') {\n        console.log(this.form.value);\n      }\n    });\n  }\n}\n"
+      "fileName": "split-view-page-content.component.ts",
+      "filePath": "/projects/pages/documentation/code-examples/page/split-view-page-fit-layout-demo/split-view-page-content.component.ts",
+      "rawContents": "import { Component, inject } from '@angular/core';\nimport { FormBuilder } from '@angular/forms';\nimport { SkyConfirmService, SkyConfirmType } from '@skyux/modals';\nimport {\n  SkySplitViewMessage,\n  SkySplitViewMessageType,\n} from '@skyux/split-view';\n\nimport { Subject } from 'rxjs';\n\ninterface WorkspaceItem {\n  id: number;\n  amount: number;\n  date: string;\n  vendor: string;\n  receiptImage: string;\n  approvedAmount: number;\n  comments: string;\n}\n\n@Component({\n  selector: 'app-split-view-page-content',\n  templateUrl: './split-view-page-content.component.html',\n})\nexport class SplitViewPageContentComponent {\n  protected set activeIndex(value: number) {\n    this.#_activeIndex = value;\n    this.activeRecord = this.items[this.#_activeIndex];\n    this.#loadFormGroup(this.activeRecord);\n  }\n\n  protected get activeIndex(): number {\n    return this.#_activeIndex;\n  }\n\n  protected items: WorkspaceItem[] = [\n    {\n      id: 1,\n      amount: 73.19,\n      date: '5/13/2020',\n      vendor: 'amazon.com',\n      receiptImage: 'amzn-office-supply-order-5-13-19.png',\n      approvedAmount: 73.19,\n      comments: '',\n    },\n    {\n      id: 2,\n      amount: 214.12,\n      date: '5/14/2020',\n      vendor: 'Office Max',\n      receiptImage: 'office-max-order.png',\n      approvedAmount: 214.12,\n      comments: '',\n    },\n    {\n      id: 3,\n      amount: 29.99,\n      date: '5/14/2020',\n      vendor: 'amazon.com',\n      receiptImage: 'amzn-office-supply-order-5-14-19.png',\n      approvedAmount: 29.99,\n      comments: '',\n    },\n    {\n      id: 4,\n      amount: 1500,\n      date: '5/15/2020',\n      vendor: 'Fresh Catering, LLC',\n      receiptImage: 'fresh-catering-llc-order.png',\n      approvedAmount: 1500,\n      comments: '',\n    },\n    {\n      id: 5,\n      amount: 456.24,\n      date: '5/16/2020',\n      vendor: 'Wish',\n      receiptImage: 'wish-delivery-order.png',\n      approvedAmount: 456.24,\n      comments: '',\n    },\n    {\n      id: 6,\n      amount: 62.37,\n      date: '5/16/2020',\n      vendor: 'Staples',\n      receiptImage: 'staples-paper-bulk-order.png',\n      approvedAmount: 62.37,\n      comments: '',\n    },\n    {\n      id: 7,\n      amount: 51.84,\n      date: '5/17/2020',\n      vendor: 'amazon.com',\n      receiptImage: 'amzn-office-supply-order-5-17-19.png',\n      approvedAmount: 51.84,\n      comments: '',\n    },\n    {\n      id: 8,\n      amount: 92.55,\n      date: '5/18/2020',\n      vendor: 'Home Depot',\n      receiptImage: 'home-depot-order.png',\n      approvedAmount: 0.0,\n      comments: '',\n    },\n    {\n      id: 9,\n      amount: 38.29,\n      date: '5/18/2020',\n      vendor: 'Papa Johns',\n      receiptImage: 'papa-johns-order.png',\n      approvedAmount: 38.29,\n      comments: '',\n    },\n  ];\n\n  protected activeRecord = this.items[0];\n  protected listWidth: number | undefined;\n  protected splitViewStream = new Subject<SkySplitViewMessage>();\n\n  protected splitViewDemoForm = inject(FormBuilder).group({\n    approvedAmount: [this.activeRecord.approvedAmount],\n    comments: [this.activeRecord.comments],\n  });\n\n  #_activeIndex = 0;\n\n  #confirmSvc = inject(SkyConfirmService);\n\n  protected onItemClick(index: number): void {\n    // Prevent workspace from loading new data if the current workspace form is dirty.\n    if (this.splitViewDemoForm.dirty && index !== this.activeIndex) {\n      this.#openConfirmModal(index);\n    } else {\n      this.#loadWorkspace(index);\n    }\n  }\n\n  protected onApprove(): void {\n    console.log('Approved clicked!');\n    this.#saveForm();\n  }\n\n  protected onDeny(): void {\n    console.log('Denied clicked!');\n  }\n\n  #loadFormGroup(record: WorkspaceItem): void {\n    this.splitViewDemoForm.setValue({\n      approvedAmount: record.approvedAmount,\n      comments: record.comments,\n    });\n  }\n\n  #loadWorkspace(index: number): void {\n    this.activeIndex = index;\n    this.#setFocusInWorkspace();\n  }\n\n  #openConfirmModal(index: number): void {\n    this.#confirmSvc\n      .open({\n        message:\n          'You have unsaved work. Would you like to save it before you change records?',\n        type: SkyConfirmType.Custom,\n        buttons: [\n          {\n            action: 'yes',\n            text: 'Yes',\n            styleType: 'primary',\n          },\n          {\n            action: 'discard',\n            text: 'Discard changes',\n            styleType: 'link',\n          },\n        ],\n      })\n      .closed.subscribe((closeArgs) => {\n        if (closeArgs.action === 'yes') {\n          this.#saveForm();\n        }\n\n        this.#loadWorkspace(index);\n      });\n  }\n\n  #saveForm(): void {\n    this.activeRecord = Object.assign(\n      this.activeRecord,\n      this.splitViewDemoForm.value\n    );\n\n    this.splitViewDemoForm.markAsPristine();\n  }\n\n  #setFocusInWorkspace(): void {\n    this.splitViewStream.next({\n      type: SkySplitViewMessageType.FocusWorkspace,\n    });\n  }\n}\n"
     },
     {
-      "fileName": "dashboards-grid-context-menu.component.html",
-      "filePath": "/projects/pages/documentation/code-examples/page/list-page-list-layout-demo/dashboards-grid-context-menu.component.html",
-      "rawContents": "<sky-dropdown\n  buttonType=\"context-menu\"\n  [label]=\"'context menu for ' + dashboardName\"\n>\n  <sky-dropdown-menu>\n    <sky-dropdown-item>\n      <button type=\"button\" [attr.aria-label]=\"'Edit ' + dashboardName\">\n        Edit\n      </button>\n    </sky-dropdown-item>\n    <sky-dropdown-item>\n      <button type=\"button\" [attr.aria-label]=\"'Copy ' + dashboardName\">\n        Copy\n      </button>\n    </sky-dropdown-item>\n    <sky-dropdown-item>\n      <button type=\"button\" [attr.aria-label]=\"'Delete ' + dashboardName\">\n        Delete\n      </button>\n    </sky-dropdown-item>\n  </sky-dropdown-menu>\n</sky-dropdown>\n"
+      "fileName": "split-view-page-content.component.html",
+      "filePath": "/projects/pages/documentation/code-examples/page/split-view-page-fit-layout-demo/split-view-page-content.component.html",
+      "rawContents": "<sky-split-view dock=\"fill\" [messageStream]=\"splitViewStream\">\n  <sky-split-view-drawer [ariaLabel]=\"'Transaction list'\" [width]=\"listWidth\">\n    <sky-repeater [activeIndex]=\"activeIndex\">\n      <sky-repeater-item\n        *ngFor=\"let item of items; let i = index\"\n        (click)=\"onItemClick(i)\"\n        (keyup.enter)=\"onItemClick(i)\"\n      >\n        <sky-repeater-item-content>\n          {{ item.amount }} <br />\n          {{ item.date }} <br />\n          {{ item.vendor }}\n        </sky-repeater-item-content>\n      </sky-repeater-item>\n    </sky-repeater>\n  </sky-split-view-drawer>\n\n  <sky-split-view-workspace ariaLabel=\"Transaction form\">\n    <sky-split-view-workspace-content class=\"sky-padding-even-large\">\n      <form [formGroup]=\"splitViewDemoForm\" (ngSubmit)=\"onApprove()\">\n        <sky-description-list class=\"sky-margin-stacked-xl\">\n          <sky-description-list-content>\n            <sky-description-list-term>\n              Receipt amount\n            </sky-description-list-term>\n            <sky-description-list-description>\n              {{ activeRecord.amount }}\n            </sky-description-list-description>\n          </sky-description-list-content>\n          <sky-description-list-content>\n            <sky-description-list-term> Date </sky-description-list-term>\n            <sky-description-list-description>\n              {{ activeRecord.date }}\n            </sky-description-list-description>\n          </sky-description-list-content>\n          <sky-description-list-content>\n            <sky-description-list-term> Vendor </sky-description-list-term>\n            <sky-description-list-description>\n              {{ activeRecord.vendor }}\n            </sky-description-list-description>\n          </sky-description-list-content>\n          <sky-description-list-content>\n            <sky-description-list-term>\n              Receipt image\n            </sky-description-list-term>\n            <sky-description-list-description>\n              {{ activeRecord.receiptImage }}\n            </sky-description-list-description>\n          </sky-description-list-content>\n        </sky-description-list>\n        <div class=\"sky-form-group\">\n          <sky-input-box>\n            <label class=\"sky-control-label\" [for]=\"amountInput.id\">\n              Approved amount\n            </label>\n            <input\n              class=\"sky-form-control\"\n              formControlName=\"approvedAmount\"\n              name=\"approvedAmount\"\n              type=\"text\"\n              skyId\n              #amountInput\n            />\n          </sky-input-box>\n        </div>\n\n        <div class=\"sky-form-group\">\n          <sky-input-box>\n            <label class=\"sky-control-label\" [for]=\"commentsInput.id\">\n              Comments\n            </label>\n            <textarea\n              class=\"sky-form-control\"\n              formControlName=\"comments\"\n              name=\"comments\"\n              skyId\n              #commentsInput\n            ></textarea>\n          </sky-input-box>\n        </div>\n      </form>\n    </sky-split-view-workspace-content>\n    <sky-split-view-workspace-footer>\n      <sky-summary-action-bar id=\"summary-action-bar\">\n        <sky-summary-action-bar-actions>\n          <sky-summary-action-bar-primary-action (actionClick)=\"onApprove()\">\n            Approve expense\n          </sky-summary-action-bar-primary-action>\n          <sky-summary-action-bar-secondary-actions>\n            <sky-summary-action-bar-secondary-action (actionClick)=\"onDeny()\">\n              Deny expense\n            </sky-summary-action-bar-secondary-action>\n          </sky-summary-action-bar-secondary-actions>\n        </sky-summary-action-bar-actions>\n      </sky-summary-action-bar>\n    </sky-split-view-workspace-footer>\n  </sky-split-view-workspace>\n</sky-split-view>\n"
     },
     {
-      "fileName": "dashboards-grid-context-menu.component.ts",
-      "filePath": "/projects/pages/documentation/code-examples/page/list-page-list-layout-demo/dashboards-grid-context-menu.component.ts",
-      "rawContents": "import { Component } from '@angular/core';\n\nimport { ICellRendererAngularComp } from 'ag-grid-angular';\nimport { ICellRendererParams } from 'ag-grid-community';\n\n@Component({\n  selector: 'app-dashboards-grid-context-menu',\n  templateUrl: './dashboards-grid-context-menu.component.html',\n})\nexport class DashboardGridContextMenuComponent\n  implements ICellRendererAngularComp\n{\n  public dashboardName = '';\n\n  public agInit(params: ICellRendererParams): void {\n    this.dashboardName = params.data && params.data.dashboard;\n  }\n\n  public refresh(): boolean {\n    return false;\n  }\n}\n"
+      "fileName": "record-page-tabs-layout-demo.module.ts",
+      "filePath": "/projects/pages/documentation/code-examples/page/record-page-tabs-layout-demo/record-page-tabs-layout-demo.module.ts",
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyAgGridModule } from '@skyux/ag-grid';\nimport { SkyAvatarModule } from '@skyux/avatar';\nimport { SkyDataManagerModule } from '@skyux/data-manager';\nimport {\n  SkyAlertModule,\n  SkyIconModule,\n  SkyKeyInfoModule,\n  SkyLabelModule,\n} from '@skyux/indicators';\nimport {\n  SkyBoxModule,\n  SkyDescriptionListModule,\n  SkyFluidGridModule,\n  SkyToolbarModule,\n} from '@skyux/layout';\nimport { SkyRepeaterModule, SkySortModule } from '@skyux/lists';\nimport { SkySearchModule } from '@skyux/lookup';\nimport { SkyPageModule } from '@skyux/pages';\nimport { SkyDropdownModule } from '@skyux/popovers';\nimport { SkyTabsModule } from '@skyux/tabs';\n\nimport { AgGridModule } from 'ag-grid-angular';\n\nimport { AttachmentsGridContextMenuComponent } from './attachments-grid-context-menu.component';\nimport { RecordPageAttachmentsTabComponent } from './record-page-attachments-tab.component';\nimport { RecordPageContentComponent } from './record-page-content.component';\nimport { RecordPageNotesTabComponent } from './record-page-notes-tab.component';\nimport { RecordPageOverviewTabComponent } from './record-page-overview-tab.component';\nimport { RecordPageTabsLayoutDemoComponent } from './record-page-tabs-layout-demo.component';\n\n@NgModule({\n  declarations: [\n    AttachmentsGridContextMenuComponent,\n    RecordPageAttachmentsTabComponent,\n    RecordPageContentComponent,\n    RecordPageNotesTabComponent,\n    RecordPageOverviewTabComponent,\n    RecordPageTabsLayoutDemoComponent,\n  ],\n  exports: [RecordPageTabsLayoutDemoComponent],\n  imports: [\n    AgGridModule,\n    CommonModule,\n    SkyAgGridModule,\n    SkyAlertModule,\n    SkyAvatarModule,\n    SkyBoxModule,\n    SkyDataManagerModule,\n    SkyDescriptionListModule,\n    SkyDropdownModule,\n    SkyFluidGridModule,\n    SkyIconModule,\n    SkyKeyInfoModule,\n    SkyLabelModule,\n    SkyPageModule,\n    SkyRepeaterModule,\n    SkySearchModule,\n    SkySortModule,\n    SkyTabsModule,\n    SkyToolbarModule,\n  ],\n})\nexport class RecordPageTabsLayoutDemoModule {}\n"
     },
     {
-      "fileName": "list-page-content.component.html",
-      "filePath": "/projects/pages/documentation/code-examples/page/list-page-list-layout-demo/list-page-content.component.html",
-      "rawContents": "<sky-data-manager>\n  <div class=\"sky-margin-stacked-xs\">\n    <sky-data-manager-toolbar>\n      <sky-data-manager-toolbar-primary-item>\n        <button class=\"sky-btn sky-btn-default\" aria-label=\"New dashboard\">\n          <sky-icon iconType=\"skyux\" icon=\"add\"></sky-icon>\n          New\n        </button>\n      </sky-data-manager-toolbar-primary-item>\n    </sky-data-manager-toolbar>\n  </div>\n  <div class=\"sky-margin-stacked-sm\">\n    <sky-key-info layout=\"horizontal\" class=\"sky-padding-horizontal-sm\">\n      <sky-key-info-value class=\"sky-font-display-4\">\n        {{ items.length }}\n      </sky-key-info-value>\n      <sky-key-info-label> Dashboards </sky-key-info-label>\n    </sky-key-info>\n  </div>\n  <sky-data-view skyAgGridDataManagerAdapter viewId=\"gridView\">\n    <sky-ag-grid-wrapper>\n      <ag-grid-angular [gridOptions]=\"gridOptions\" [rowData]=\"items\">\n      </ag-grid-angular>\n    </sky-ag-grid-wrapper>\n  </sky-data-view>\n</sky-data-manager>\n"
+      "fileName": "record-page-tabs-layout-demo.component.ts",
+      "filePath": "/projects/pages/documentation/code-examples/page/record-page-tabs-layout-demo/record-page-tabs-layout-demo.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-record-page-tabs-layout-demo',\n  templateUrl: './record-page-tabs-layout-demo.component.html',\n})\nexport class RecordPageTabsLayoutDemoComponent {}\n"
     },
     {
-      "fileName": "list-page-content.component.ts",
-      "filePath": "/projects/pages/documentation/code-examples/page/list-page-list-layout-demo/list-page-content.component.ts",
-      "rawContents": "import { Component, OnInit, inject } from '@angular/core';\nimport { SkyAgGridService } from '@skyux/ag-grid';\nimport {\n  SkyDataManagerService,\n  SkyDataManagerState,\n  SkyDataViewConfig,\n} from '@skyux/data-manager';\n\nimport { ColDef, GridOptions, ICellRendererParams } from 'ag-grid-community';\n\nimport { DashboardGridContextMenuComponent } from './dashboards-grid-context-menu.component';\n\n@Component({\n  selector: 'app-list-page-content',\n  templateUrl: './list-page-content.component.html',\n  providers: [SkyDataManagerService],\n})\nexport class ListPageContentComponent implements OnInit {\n  public items = [\n    {\n      dashboard: 'Cash Flow Tracker',\n      name: 'Kanesha Hutto',\n      lastUpdated: '06/21/2023',\n    },\n    {\n      dashboard: 'Accounts Receivable Dashboard',\n      name: 'Kristeen Lunsford',\n      lastUpdated: '06/30/2023',\n    },\n    {\n      dashboard: 'Accounts Payable Dashboard',\n      name: 'Darcel Lenz',\n      lastUpdated: '04/20/2023',\n    },\n    {\n      dashboard: 'Budget vs. Actual',\n      name: 'Barbara Durr',\n      lastUpdated: '12/04/2023',\n    },\n    {\n      dashboard: 'Balance Sheet - New',\n      name: 'Ilene Woo',\n      lastUpdated: '12/20/2023',\n    },\n    {\n      dashboard: 'Debt Management',\n      name: 'Tonja Sanderson',\n      lastUpdated: '09/10/2023',\n    },\n  ];\n  public gridOptions: GridOptions;\n\n  #dataManagerService = inject(SkyDataManagerService);\n  #agGridSvc = inject(SkyAgGridService);\n\n  #columnDefs: ColDef[] = [\n    {\n      colId: 'contextMenu',\n      headerName: '',\n      sortable: false,\n      cellRenderer: DashboardGridContextMenuComponent,\n      maxWidth: 55,\n    },\n    {\n      colId: 'dashboard',\n      field: 'dashboard',\n      headerName: 'Name',\n      width: 150,\n      cellRenderer: (params: ICellRendererParams): string => {\n        return `<a href=\"/\">${params.value}</a>`;\n      },\n    },\n    {\n      colId: 'name',\n      field: 'name',\n      headerName: 'Created By',\n    },\n    {\n      colId: 'lastUpdated',\n      field: 'lastUpdated',\n      headerName: 'Last Updated',\n    },\n  ];\n\n  #viewConfig: SkyDataViewConfig = {\n    id: 'gridView',\n    name: 'Grid View',\n    searchEnabled: true,\n  };\n\n  constructor() {\n    this.gridOptions = this.#agGridSvc.getGridOptions({\n      gridOptions: {\n        columnDefs: this.#columnDefs,\n        onGridReady: (args) => {\n          args.api.sizeColumnsToFit();\n        },\n      },\n    });\n  }\n\n  public ngOnInit(): void {\n    this.#dataManagerService.initDataManager({\n      activeViewId: 'gridView',\n      dataManagerConfig: {},\n      defaultDataState: new SkyDataManagerState({\n        views: [\n          {\n            viewId: 'gridView',\n            displayedColumnIds: [\n              'contextMenu',\n              'dashboard',\n              'name',\n              'lastUpdated',\n            ],\n          },\n        ],\n      }),\n    });\n\n    this.#dataManagerService.initDataView(this.#viewConfig);\n  }\n}\n"
+      "fileName": "record-page-tabs-layout-demo.component.spec.ts",
+      "filePath": "/projects/pages/documentation/code-examples/page/record-page-tabs-layout-demo/record-page-tabs-layout-demo.component.spec.ts",
+      "rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { ComponentFixture, TestBed } from '@angular/core/testing';\nimport { NoopAnimationsModule } from '@angular/platform-browser/animations';\nimport { RouterTestingModule } from '@angular/router/testing';\nimport { SkyPageHarness } from '@skyux/pages/testing';\n\nimport { RecordPageTabsLayoutDemoComponent } from './record-page-tabs-layout-demo.component';\nimport { RecordPageTabsLayoutDemoModule } from './record-page-tabs-layout-demo.module';\n\nfdescribe('Record page tabs layout demo', async () => {\n  async function setupTest(): Promise<{\n    pageHarness: SkyPageHarness;\n    fixture: ComponentFixture<RecordPageTabsLayoutDemoComponent>;\n  }> {\n    const fixture = TestBed.createComponent(RecordPageTabsLayoutDemoComponent);\n\n    const loader = TestbedHarnessEnvironment.documentRootLoader(fixture);\n    const pageHarness = await loader.getHarness(SkyPageHarness);\n\n    return { pageHarness, fixture };\n  }\n\n  beforeEach(() => {\n    TestBed.configureTestingModule({\n      imports: [\n        NoopAnimationsModule,\n        RecordPageTabsLayoutDemoModule,\n        RouterTestingModule,\n      ],\n    });\n  });\n\n  it('should have a tabs layout', async () => {\n    const { pageHarness, fixture } = await setupTest();\n\n    fixture.detectChanges();\n\n    await expectAsync(pageHarness.getLayout()).toBeResolvedTo('tabs');\n  });\n\n  it('should have the correct page header text', async () => {\n    const { pageHarness } = await setupTest();\n\n    const pageHeaderHarness = await pageHarness.getPageHeader();\n\n    await expectAsync(pageHeaderHarness.getPageTitle()).toBeResolvedTo(\n      'Charlene Conners'\n    );\n  });\n});\n"
     },
     {
-      "fileName": "list-page-list-layout-demo.component.html",
-      "filePath": "/projects/pages/documentation/code-examples/page/list-page-list-layout-demo/list-page-list-layout-demo.component.html",
-      "rawContents": "<sky-page layout=\"list\">\n  <sky-page-header pageTitle=\"Dashboards\" />\n  <sky-page-content>\n    <app-list-page-content></app-list-page-content>\n  </sky-page-content>\n</sky-page>\n"
+      "fileName": "record-page-tabs-layout-demo.component.html",
+      "filePath": "/projects/pages/documentation/code-examples/page/record-page-tabs-layout-demo/record-page-tabs-layout-demo.component.html",
+      "rawContents": "<sky-page layout=\"tabs\">\n  <sky-page-header pageTitle=\"Charlene Conners\">\n    <sky-page-header-alerts>\n      <sky-alert alertType=\"warning\" descriptionType=\"warning\">\n        Missing phone number for Charlene Conners.\n      </sky-alert>\n    </sky-page-header-alerts>\n    <sky-page-header-avatar>\n      <sky-avatar name=\"Charlene Conners\"> </sky-avatar>\n    </sky-page-header-avatar>\n    <sky-page-header-details>\n      <sky-label labelType=\"info\" descriptionType=\"important-info\">\n        VIP\n      </sky-label>\n    </sky-page-header-details>\n    <sky-page-header-actions>\n      <button class=\"sky-btn sky-btn-default\">Email contact</button>\n      <button class=\"sky-btn sky-btn-default\">Add to my contacts</button>\n    </sky-page-header-actions>\n  </sky-page-header>\n  <sky-page-content>\n    <app-record-page-content></app-record-page-content>\n  </sky-page-content>\n</sky-page>\n"
     },
     {
-      "fileName": "list-page-list-layout-demo.component.spec.ts",
-      "filePath": "/projects/pages/documentation/code-examples/page/list-page-list-layout-demo/list-page-list-layout-demo.component.spec.ts",
-      "rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { ComponentFixture, TestBed } from '@angular/core/testing';\nimport { NoopAnimationsModule } from '@angular/platform-browser/animations';\nimport { SkyPageHarness } from '@skyux/pages/testing';\n\nimport { ListPageListLayoutDemoComponent } from './list-page-list-layout-demo.component';\nimport { ListPageListLayoutDemoModule } from './list-page-list-layout-demo.module';\n\nfdescribe('List page list layout demo', async () => {\n  async function setupTest(): Promise<{\n    pageHarness: SkyPageHarness;\n    fixture: ComponentFixture<ListPageListLayoutDemoComponent>;\n  }> {\n    const fixture = TestBed.createComponent(ListPageListLayoutDemoComponent);\n\n    const loader = TestbedHarnessEnvironment.documentRootLoader(fixture);\n    const pageHarness = await loader.getHarness(SkyPageHarness);\n\n    return { pageHarness, fixture };\n  }\n\n  beforeEach(() => {\n    TestBed.configureTestingModule({\n      imports: [ListPageListLayoutDemoModule, NoopAnimationsModule],\n    });\n  });\n\n  it('should have a list layout', async () => {\n    const { pageHarness } = await setupTest();\n\n    await expectAsync(pageHarness.getLayout()).toBeResolvedTo('list');\n  });\n\n  it('should have the correct page header text', async () => {\n    const { pageHarness } = await setupTest();\n\n    const pageHeaderHarness = await pageHarness.getPageHeader();\n\n    await expectAsync(pageHeaderHarness.getPageTitle()).toBeResolvedTo(\n      'Dashboards'\n    );\n  });\n});\n"
+      "fileName": "record-page-overview-tab.component.ts",
+      "filePath": "/projects/pages/documentation/code-examples/page/record-page-tabs-layout-demo/record-page-overview-tab.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-record-page-overview-tab',\n  templateUrl: './record-page-overview-tab.component.html',\n  styleUrls: ['./record-page-overview-tab.component.scss'],\n})\nexport class RecordPageOverviewTabComponent {\n  public recordDetails = [\n    {\n      detail: 'Designation',\n      info: 'General operating',\n    },\n    {\n      detail: 'Source',\n      info: 'Online donation form',\n    },\n    {\n      detail: 'Status',\n      info: 'Active',\n    },\n    {\n      detail: 'Due date',\n      info: '12/12/2023',\n    },\n    {\n      detail: 'Create date',\n      info: '01/05/2023',\n    },\n    {\n      detail: 'Frequency',\n      info: 'Quarterly',\n    },\n  ];\n\n  public actualPayments = [\n    {\n      category: 'Amount',\n      value: '$845.00',\n    },\n    {\n      category: 'Assigned',\n      value: '$800.00',\n    },\n    {\n      category: 'Applied',\n      value: '$800.00',\n    },\n    {\n      category: 'Payments',\n      value: 25,\n    },\n  ];\n\n  public projectedPayments = [\n    {\n      category: 'Amount',\n      value: '$0',\n    },\n    {\n      category: 'Line items',\n      value: 0,\n    },\n  ];\n\n  public recentActivity = [\n    {\n      activity: '$250.00 payment processed successfully.',\n      date: '07/01/2023 12:02 am',\n    },\n    {\n      activity: '$150.00 payment processed successfully.',\n      date: '06/15/2023 12:02 am',\n    },\n    {\n      activity: '$250.00 payment processed successfully.',\n      date: '04/01/2023 12:02 am',\n    },\n  ];\n}\n"
     },
     {
-      "fileName": "list-page-list-layout-demo.component.ts",
-      "filePath": "/projects/pages/documentation/code-examples/page/list-page-list-layout-demo/list-page-list-layout-demo.component.ts",
-      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-list-page-list-layout-demo',\n  templateUrl: './list-page-list-layout-demo.component.html',\n})\nexport class ListPageListLayoutDemoComponent {}\n"
+      "fileName": "record-page-overview-tab.component.scss",
+      "filePath": "/projects/pages/documentation/code-examples/page/record-page-tabs-layout-demo/record-page-overview-tab.component.scss",
+      "rawContents": ".box-2-content {\n  display: flex;\n\n  div {\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n  }\n\n  .box-2-actuals {\n    margin-right: 60px;\n  }\n}\n"
     },
     {
-      "fileName": "list-page-list-layout-demo.module.ts",
-      "filePath": "/projects/pages/documentation/code-examples/page/list-page-list-layout-demo/list-page-list-layout-demo.module.ts",
-      "rawContents": "import { NgModule } from '@angular/core';\nimport { SkyAgGridModule } from '@skyux/ag-grid';\nimport { SkyDataManagerModule } from '@skyux/data-manager';\nimport { SkyIconModule, SkyKeyInfoModule } from '@skyux/indicators';\nimport { SkyPageModule } from '@skyux/pages';\nimport { SkyDropdownModule } from '@skyux/popovers';\n\nimport { AgGridModule } from 'ag-grid-angular';\n\nimport { DashboardGridContextMenuComponent } from './dashboards-grid-context-menu.component';\nimport { ListPageContentComponent } from './list-page-content.component';\nimport { ListPageListLayoutDemoComponent } from './list-page-list-layout-demo.component';\n\n@NgModule({\n  declarations: [\n    ListPageListLayoutDemoComponent,\n    DashboardGridContextMenuComponent,\n    ListPageContentComponent,\n  ],\n  exports: [ListPageListLayoutDemoComponent],\n  imports: [\n    SkyPageModule,\n    SkyDropdownModule,\n    SkyAgGridModule,\n    SkyDataManagerModule,\n    SkyIconModule,\n    AgGridModule,\n    SkyKeyInfoModule,\n  ],\n})\nexport class ListPageListLayoutDemoModule {}\n"
+      "fileName": "record-page-overview-tab.component.html",
+      "filePath": "/projects/pages/documentation/code-examples/page/record-page-tabs-layout-demo/record-page-overview-tab.component.html",
+      "rawContents": "<sky-fluid-grid gutterSize=\"medium\" [disableMargin]=\"true\">\n  <sky-row>\n    <sky-column [screenSmall]=\"4\" [screenXSmall]=\"12\">\n      <sky-box class=\"sky-margin-stacked-xl\">\n        <sky-box-header>\n          <h2 class=\"sky-font-heading-2\">Details</h2>\n        </sky-box-header>\n        <sky-box-controls>\n          <button\n            class=\"sky-btn sky-btn-icon-borderless\"\n            aria-label=\"Edit button for details\"\n          >\n            <sky-icon icon=\"edit\" iconType=\"skyux\"></sky-icon>\n          </button>\n        </sky-box-controls>\n        <sky-box-content>\n          <sky-description-list mode=\"vertical\">\n            <sky-description-list-content\n              *ngFor=\"let recordDetail of recordDetails\"\n            >\n              <sky-description-list-term>\n                {{ recordDetail.detail }}\n              </sky-description-list-term>\n              <sky-description-list-description>\n                {{ recordDetail.info }}\n              </sky-description-list-description>\n            </sky-description-list-content>\n          </sky-description-list>\n        </sky-box-content>\n      </sky-box>\n    </sky-column>\n    <sky-column [screenSmall]=\"4\" [screenXSmall]=\"12\">\n      <sky-box class=\"sky-margin-stacked-xl\">\n        <sky-box-header>\n          <h2 class=\"sky-font-heading-2\">Payments</h2>\n        </sky-box-header>\n        <sky-box-content>\n          <div class=\"box-2-content\">\n            <div class=\"box-2-actuals\">\n              <h3 class=\"sky-font-heading-4\">Actuals</h3>\n              <sky-key-info\n                [ngClass]=\"{\n                  'sky-margin-stacked-lg': i < actualPayments.length - 1\n                }\"\n                *ngFor=\"let actual of actualPayments; let i = index\"\n              >\n                <sky-key-info-value class=\"sky-font-display-3\">\n                  {{ actual.value }}\n                </sky-key-info-value>\n                <sky-key-info-label>{{ actual.category }}</sky-key-info-label>\n              </sky-key-info>\n            </div>\n            <div class=\"box-2-projected\">\n              <h3 class=\"sky-font-heading-4\">Projected</h3>\n              <sky-key-info\n                [ngClass]=\"{\n                  'sky-margin-stacked-lg': i < projectedPayments.length - 1\n                }\"\n                *ngFor=\"let projected of projectedPayments; let i = index\"\n              >\n                <sky-key-info-value class=\"sky-font-display-3\">\n                  {{ projected.value }}\n                </sky-key-info-value>\n                <sky-key-info-label>\n                  {{ projected.category }}\n                </sky-key-info-label>\n              </sky-key-info>\n            </div>\n          </div>\n        </sky-box-content>\n      </sky-box>\n    </sky-column>\n    <sky-column [screenSmall]=\"4\" [screenXSmall]=\"12\">\n      <sky-box>\n        <sky-box-header>\n          <h2 class=\"sky-font-heading-2\">Recent activity</h2>\n        </sky-box-header>\n        <sky-box-content>\n          <sky-repeater>\n            <sky-repeater-item *ngFor=\"let activity of recentActivity\">\n              <sky-repeater-item-content>\n                <div class=\"sky-margin-stacked-xs\">\n                  {{ activity.activity }}\n                </div>\n                <div class=\"sky-font-deemphasized\">{{ activity.date }}</div>\n              </sky-repeater-item-content>\n            </sky-repeater-item>\n          </sky-repeater>\n        </sky-box-content>\n      </sky-box>\n    </sky-column>\n  </sky-row>\n</sky-fluid-grid>\n"
     },
     {
-      "fileName": "contact-context-menu.component.html",
-      "filePath": "/projects/pages/documentation/code-examples/page/list-page-tabs-layout-demo/contact-context-menu.component.html",
-      "rawContents": "<sky-dropdown\n  buttonType=\"context-menu\"\n  [label]=\"'context menu for ' + contactName\"\n>\n  <sky-dropdown-menu>\n    <sky-dropdown-item>\n      <button type=\"button\" [attr.aria-label]=\"'Edit ' + contactName\">\n        Edit\n      </button>\n    </sky-dropdown-item>\n    <sky-dropdown-item>\n      <button type=\"button\" [attr.aria-label]=\"'Delete ' + contactName\">\n        Delete\n      </button>\n    </sky-dropdown-item>\n  </sky-dropdown-menu>\n</sky-dropdown>\n"
+      "fileName": "record-page-notes-tab.component.ts",
+      "filePath": "/projects/pages/documentation/code-examples/page/record-page-tabs-layout-demo/record-page-notes-tab.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-record-page-notes-tab',\n  templateUrl: './record-page-notes-tab.component.html',\n})\nexport class RecordPageNotesTabComponent {\n  public notes = [\n    {\n      noteNumber: 1,\n      content: 'Attended our gala last year and had a great time.',\n      date: '11/17/2024',\n    },\n    {\n      noteNumber: 2,\n      content:\n        'Is a business owner and has a lot of connections in the community.',\n      date: '10/11/2024',\n    },\n  ];\n}\n"
     },
     {
-      "fileName": "contact-context-menu.component.ts",
-      "filePath": "/projects/pages/documentation/code-examples/page/list-page-tabs-layout-demo/contact-context-menu.component.ts",
-      "rawContents": "import { Component } from '@angular/core';\n\nimport { ICellRendererAngularComp } from 'ag-grid-angular';\nimport { ICellRendererParams } from 'ag-grid-community';\n\n@Component({\n  selector: 'app-contacts-grid-context-menu',\n  templateUrl: './contact-context-menu.component.html',\n})\nexport class ContactContextMenuComponent implements ICellRendererAngularComp {\n  public contactName = '';\n\n  public agInit(params: ICellRendererParams): void {\n    this.contactName = params.data && params.data.name;\n  }\n\n  public refresh(): boolean {\n    return false;\n  }\n}\n"
+      "fileName": "record-page-notes-tab.component.html",
+      "filePath": "/projects/pages/documentation/code-examples/page/record-page-tabs-layout-demo/record-page-notes-tab.component.html",
+      "rawContents": "<div class=\"sky-margin-stacked-xs\">\n  <sky-toolbar>\n    <sky-toolbar-item>\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        aria-label=\"New note\"\n      >\n        <sky-icon iconType=\"skyux\" icon=\"add\"></sky-icon>\n        New\n      </button>\n    </sky-toolbar-item>\n    <sky-toolbar-item>\n      <sky-sort [showButtonText]=\"true\">\n        <sky-sort-item>\n          <span aria-label=\"Sort notes by date created (newest first)\">\n            Date created (newest first)\n          </span>\n        </sky-sort-item>\n        <sky-sort-item>\n          <span aria-label=\"Sort notes by date created (oldest first)\">\n            Date created (oldest first)\n          </span>\n        </sky-sort-item>\n      </sky-sort>\n    </sky-toolbar-item>\n    <sky-toolbar-item>\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        aria-label=\"Export notes\"\n      >\n        <sky-icon iconType=\"skyux\" icon=\"xls-file\"></sky-icon>\n        Export\n      </button>\n    </sky-toolbar-item>\n    <sky-toolbar-item>\n      <sky-search placeholderText=\"Find in notes\"> </sky-search>\n    </sky-toolbar-item>\n  </sky-toolbar>\n</div>\n<div class=\"sky-margin-stacked-sm\">\n  <sky-key-info layout=\"horizontal\">\n    <sky-key-info-value class=\"sky-font-display-4\">\n      {{ notes.length }}\n    </sky-key-info-value>\n    <sky-key-info-label> Notes </sky-key-info-label>\n  </sky-key-info>\n</div>\n<sky-repeater>\n  <sky-repeater-item *ngFor=\"let note of notes\">\n    <sky-repeater-item-context-menu>\n      <sky-dropdown\n        buttonType=\"context-menu\"\n        [label]=\"\n          'Context menu for note ' + note.noteNumber + ' from ' + note.date\n        \"\n      >\n        <sky-dropdown-menu>\n          <sky-dropdown-item>\n            <button\n              type=\"button\"\n              [attr.aria-label]=\"\n                'Edit note ' + note.noteNumber + ' from ' + note.date\n              \"\n            >\n              Edit\n            </button>\n          </sky-dropdown-item>\n          <sky-dropdown-item>\n            <button\n              type=\"button\"\n              [attr.aria-label]=\"\n                'Delete note ' + note.noteNumber + ' from ' + note.date\n              \"\n            >\n              Delete\n            </button>\n          </sky-dropdown-item>\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    </sky-repeater-item-context-menu>\n    <sky-repeater-item-content>\n      <div class=\"sky-margin-stacked-xs\">\n        {{ note.content }}\n      </div>\n      <div class=\"sky-font-deemphasized\">{{ note.date }}</div>\n    </sky-repeater-item-content>\n  </sky-repeater-item>\n</sky-repeater>\n"
     },
     {
-      "fileName": "list-page-contacts-grid.component.html",
-      "filePath": "/projects/pages/documentation/code-examples/page/list-page-tabs-layout-demo/list-page-contacts-grid.component.html",
-      "rawContents": "<sky-data-manager>\n  <div class=\"sky-margin-stacked-xs\">\n    <sky-data-manager-toolbar>\n      <sky-data-manager-toolbar-primary-item>\n        <button class=\"sky-btn sky-btn-default\" aria-label=\"New contact\">\n          <sky-icon iconType=\"skyux\" icon=\"add\"></sky-icon>\n          New\n        </button>\n      </sky-data-manager-toolbar-primary-item>\n    </sky-data-manager-toolbar>\n  </div>\n  <div class=\"sky-margin-stacked-sm\">\n    <sky-key-info layout=\"horizontal\" class=\"sky-padding-horizontal-sm\">\n      <sky-key-info-value class=\"sky-font-display-4\">\n        {{ contacts.length }}\n      </sky-key-info-value>\n      <sky-key-info-label> Contacts </sky-key-info-label>\n    </sky-key-info>\n  </div>\n  <sky-data-view skyAgGridDataManagerAdapter viewId=\"gridView\">\n    <sky-ag-grid-wrapper>\n      <ag-grid-angular [gridOptions]=\"gridOptions\" [rowData]=\"contacts\">\n      </ag-grid-angular>\n    </sky-ag-grid-wrapper>\n  </sky-data-view>\n</sky-data-manager>\n"
+      "fileName": "record-page-content.component.ts",
+      "filePath": "/projects/pages/documentation/code-examples/page/record-page-tabs-layout-demo/record-page-content.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\nimport { SkyTabIndex } from '@skyux/tabs';\n\n@Component({\n  selector: 'app-record-page-content',\n  templateUrl: './record-page-content.component.html',\n})\nexport class RecordPageContentComponent {\n  public activeTabIndex: SkyTabIndex = 0;\n}\n"
     },
     {
-      "fileName": "list-page-contacts-grid.component.ts",
-      "filePath": "/projects/pages/documentation/code-examples/page/list-page-tabs-layout-demo/list-page-contacts-grid.component.ts",
-      "rawContents": "import { Component, Input, OnInit, inject } from '@angular/core';\nimport { SkyAgGridService } from '@skyux/ag-grid';\nimport {\n  SkyDataManagerService,\n  SkyDataManagerState,\n  SkyDataViewConfig,\n} from '@skyux/data-manager';\n\nimport { ColDef, GridOptions, ICellRendererParams } from 'ag-grid-community';\n\nimport { ContactContextMenuComponent } from './contact-context-menu.component';\n\ntype Contact = {\n  name: string;\n  organization: string;\n  emailAddress: string;\n};\n\n@Component({\n  selector: 'app-list-page-contacts-grid',\n  templateUrl: './list-page-contacts-grid.component.html',\n  providers: [SkyDataManagerService],\n})\nexport class ListPageContactsGridComponent implements OnInit {\n  @Input()\n  public contacts: Contact[] = [];\n\n  public gridOptions: GridOptions;\n\n  #dataManagerService = inject(SkyDataManagerService);\n  #agGridSvc = inject(SkyAgGridService);\n\n  #columnDefs: ColDef[] = [\n    {\n      colId: 'contextMenu',\n      headerName: '',\n      sortable: false,\n      cellRenderer: ContactContextMenuComponent,\n      maxWidth: 55,\n    },\n    {\n      colId: 'name',\n      field: 'name',\n      headerName: 'Name',\n      width: 150,\n      cellRenderer: (params: ICellRendererParams): string => {\n        return `<a href=\"/\">${params.value}</a>`;\n      },\n    },\n    {\n      colId: 'organization',\n      field: 'organization',\n      headerName: 'Organization',\n    },\n    {\n      colId: 'emailAddress',\n      field: 'emailAddress',\n      headerName: 'Email Address',\n    },\n  ];\n\n  #viewConfig: SkyDataViewConfig = {\n    id: 'gridView',\n    name: 'Grid View',\n    searchEnabled: true,\n    columnPickerEnabled: true,\n    columnOptions: [\n      { id: 'contextMenu', label: 'Context menu', alwaysDisplayed: true },\n      { id: 'name', label: 'Name' },\n      { id: 'organization', label: 'Organization' },\n      { id: 'emailAddress', label: 'Email Address' },\n    ],\n  };\n\n  constructor() {\n    this.gridOptions = this.#agGridSvc.getGridOptions({\n      gridOptions: {\n        columnDefs: this.#columnDefs,\n        onGridReady: (args) => {\n          args.api.sizeColumnsToFit();\n        },\n      },\n    });\n  }\n\n  public ngOnInit(): void {\n    this.#dataManagerService.initDataManager({\n      activeViewId: 'gridView',\n      dataManagerConfig: {},\n      defaultDataState: new SkyDataManagerState({\n        views: [\n          {\n            viewId: 'gridView',\n            displayedColumnIds: [\n              'contextMenu',\n              'name',\n              'organization',\n              'emailAddress',\n            ],\n          },\n        ],\n      }),\n    });\n\n    this.#dataManagerService.initDataView(this.#viewConfig);\n  }\n}\n"
+      "fileName": "record-page-content.component.html",
+      "filePath": "/projects/pages/documentation/code-examples/page/record-page-tabs-layout-demo/record-page-content.component.html",
+      "rawContents": "<sky-tabset [(active)]=\"activeTabIndex\">\n  <sky-tab tabHeading=\"Overview\" layout=\"blocks\">\n    <app-record-page-overview-tab></app-record-page-overview-tab>\n  </sky-tab>\n  <sky-tab tabHeading=\"Notes\" layout=\"list\">\n    <app-record-page-notes-tab></app-record-page-notes-tab>\n  </sky-tab>\n  <sky-tab tabHeading=\"Attachments\" layout=\"list\">\n    <app-record-page-attachments-tab\n      *ngIf=\"activeTabIndex === 2\"\n    ></app-record-page-attachments-tab>\n  </sky-tab>\n</sky-tabset>\n"
     },
     {
-      "fileName": "list-page-content.component.html",
-      "filePath": "/projects/pages/documentation/code-examples/page/list-page-tabs-layout-demo/list-page-content.component.html",
-      "rawContents": "<sky-tabset [(active)]=\"activeTabIndex\">\n  <sky-tab tabHeading=\"My contacts\" layout=\"list\">\n    <app-list-page-contacts-grid\n      *ngIf=\"activeTabIndex === 0\"\n      [contacts]=\"myContacts\"\n    ></app-list-page-contacts-grid>\n  </sky-tab>\n  <sky-tab tabHeading=\"All contacts\" layout=\"list\">\n    <app-list-page-contacts-grid\n      *ngIf=\"activeTabIndex === 1\"\n      [contacts]=\"allContacts\"\n    ></app-list-page-contacts-grid>\n  </sky-tab>\n</sky-tabset>\n"
+      "fileName": "record-page-attachments-tab.component.ts",
+      "filePath": "/projects/pages/documentation/code-examples/page/record-page-tabs-layout-demo/record-page-attachments-tab.component.ts",
+      "rawContents": "import { Component, OnInit, inject } from '@angular/core';\nimport { SkyAgGridService } from '@skyux/ag-grid';\nimport {\n  SkyDataManagerService,\n  SkyDataManagerState,\n  SkyDataViewConfig,\n} from '@skyux/data-manager';\n\nimport { ColDef, GridOptions, ICellRendererParams } from 'ag-grid-community';\n\nimport { AttachmentsGridContextMenuComponent } from './attachments-grid-context-menu.component';\n\n@Component({\n  selector: 'app-record-page-attachments-tab',\n  templateUrl: './record-page-attachments-tab.component.html',\n  providers: [SkyDataManagerService],\n})\nexport class RecordPageAttachmentsTabComponent implements OnInit {\n  public items = [\n    {\n      name: 'Agreement.pdf',\n      description: 'Cardholder agreement',\n      size: '10 KB',\n      dateAdded: '01/28/2023',\n    },\n    {\n      name: 'Appendix.pdf',\n      description: 'Updated terms 2023',\n      size: '25 KB',\n      dateAdded: '05/05/2023',\n    },\n  ];\n  public gridOptions: GridOptions;\n\n  #dataManagerService = inject(SkyDataManagerService);\n  #agGridSvc = inject(SkyAgGridService);\n\n  #columnDefs: ColDef[] = [\n    {\n      colId: 'contextMenu',\n      headerName: '',\n      sortable: false,\n      cellRenderer: AttachmentsGridContextMenuComponent,\n      maxWidth: 55,\n    },\n    {\n      colId: 'name',\n      field: 'name',\n      headerName: 'Name',\n      width: 150,\n      cellRenderer: (params: ICellRendererParams): string => {\n        return `<a href=\"/\">${params.value}</a>`;\n      },\n    },\n    {\n      colId: 'description',\n      field: 'description',\n      headerName: 'Description',\n    },\n    {\n      colId: 'size',\n      field: 'size',\n      headerName: 'Size',\n    },\n    {\n      colId: 'dateAdded',\n      field: 'dateAdded',\n      headerName: 'Date Added',\n    },\n  ];\n\n  #viewConfig: SkyDataViewConfig = {\n    id: 'gridView',\n    name: 'Grid View',\n    searchEnabled: true,\n  };\n\n  constructor() {\n    this.gridOptions = this.#agGridSvc.getGridOptions({\n      gridOptions: {\n        columnDefs: this.#columnDefs,\n        onGridReady: (args) => {\n          args.api.sizeColumnsToFit();\n        },\n      },\n    });\n  }\n\n  public ngOnInit(): void {\n    this.#dataManagerService.initDataManager({\n      activeViewId: 'gridView',\n      dataManagerConfig: {},\n      defaultDataState: new SkyDataManagerState({\n        views: [\n          {\n            viewId: 'gridView',\n            displayedColumnIds: [\n              'contextMenu',\n              'name',\n              'description',\n              'size',\n              'dateAdded',\n            ],\n          },\n        ],\n      }),\n    });\n\n    this.#dataManagerService.initDataView(this.#viewConfig);\n  }\n}\n"
     },
     {
-      "fileName": "list-page-content.component.ts",
-      "filePath": "/projects/pages/documentation/code-examples/page/list-page-tabs-layout-demo/list-page-content.component.ts",
-      "rawContents": "import { Component } from '@angular/core';\nimport { SkyTabIndex } from '@skyux/tabs';\n\n@Component({\n  selector: 'app-list-page-content',\n  templateUrl: './list-page-content.component.html',\n})\nexport class ListPageContentComponent {\n  public activeTabIndex: SkyTabIndex = 0;\n\n  public myContacts = [\n    {\n      name: 'Wonda Lumpkin',\n      organization: 'Riverfront College of the Arts',\n      emailAddress: 'wlumpkin@yahoo.com',\n    },\n    {\n      name: 'Eliza Vanhorn',\n      organization: 'Summit School of the Arts',\n      emailAddress: 'evanhorn@outlook.com',\n    },\n    {\n      name: 'Ed Sipes',\n      organization: 'Reflections Middle School',\n      emailAddress: 'esipes@yahoo.com',\n    },\n    {\n      name: 'Elwood Farris',\n      organization: 'Sandy Lagoon College',\n      emailAddress: 'elfarris@gmail.com',\n    },\n    {\n      name: 'Cristen Sizemore',\n      organization: 'Grafton Vision Health',\n      emailAddress: 'cristen.sizemore@aol.com',\n    },\n    {\n      name: 'Latrice Ashmore',\n      organization: 'Food Bank of Rapid City',\n      emailAddress: 'lashmore@gmail.com',\n    },\n  ];\n\n  public allContacts = [\n    ...this.myContacts,\n    {\n      name: 'Kanesha Hutto',\n      organization: 'Los Angeles College of the Arts',\n      emailAddress: 'khutto@yahoo.com',\n    },\n    {\n      name: 'Kristeen Lunsford',\n      organization: 'Food Bank of Los Angeles',\n      emailAddress: 'kristeen.lunsford@yahoo.com',\n    },\n    {\n      name: 'Barbara Durr',\n      organization: 'Riverfront Middle School',\n      emailAddress: 'bdurr@gmail.com',\n    },\n    {\n      name: 'Ilene Woo',\n      organization: 'Rapid City High School',\n      emailAddress: 'ilene.woo@aol.com',\n    },\n    {\n      name: 'Darcel Lenz',\n      organization: 'Riverfront College of the Arts',\n      emailAddress: 'dlenz@yahoo.com',\n    },\n  ];\n}\n"
+      "fileName": "record-page-attachments-tab.component.html",
+      "filePath": "/projects/pages/documentation/code-examples/page/record-page-tabs-layout-demo/record-page-attachments-tab.component.html",
+      "rawContents": "<sky-data-manager>\n  <div class=\"sky-margin-stacked-xs\">\n    <sky-data-manager-toolbar>\n      <sky-data-manager-toolbar-primary-item>\n        <button class=\"sky-btn sky-btn-default\" aria-label=\"New attachment\">\n          <sky-icon iconType=\"skyux\" icon=\"add\"></sky-icon>\n          New\n        </button>\n      </sky-data-manager-toolbar-primary-item>\n    </sky-data-manager-toolbar>\n  </div>\n  <div class=\"sky-margin-stacked-sm\">\n    <sky-key-info layout=\"horizontal\" class=\"sky-padding-horizontal-sm\">\n      <sky-key-info-value class=\"sky-font-display-4\">\n        {{ items.length }}\n      </sky-key-info-value>\n      <sky-key-info-label> Attachments </sky-key-info-label>\n    </sky-key-info>\n  </div>\n  <sky-data-view skyAgGridDataManagerAdapter viewId=\"gridView\">\n    <sky-ag-grid-wrapper>\n      <ag-grid-angular [gridOptions]=\"gridOptions\" [rowData]=\"items\">\n      </ag-grid-angular>\n    </sky-ag-grid-wrapper>\n  </sky-data-view>\n</sky-data-manager>\n"
     },
     {
-      "fileName": "list-page-tabs-layout-demo.component.html",
-      "filePath": "/projects/pages/documentation/code-examples/page/list-page-tabs-layout-demo/list-page-tabs-layout-demo.component.html",
-      "rawContents": "<sky-page layout=\"tabs\">\n  <sky-page-header pageTitle=\"Contacts\" />\n  <sky-page-content>\n    <app-list-page-content></app-list-page-content>\n  </sky-page-content>\n</sky-page>\n"
+      "fileName": "attachments-grid-context-menu.component.ts",
+      "filePath": "/projects/pages/documentation/code-examples/page/record-page-tabs-layout-demo/attachments-grid-context-menu.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\n\nimport { ICellRendererAngularComp } from 'ag-grid-angular';\nimport { ICellRendererParams } from 'ag-grid-community';\n\n@Component({\n  selector: 'app-attachments-grid-context-menu',\n  templateUrl: './attachments-grid-context-menu.component.html',\n})\nexport class AttachmentsGridContextMenuComponent\n  implements ICellRendererAngularComp\n{\n  public attachmentName = '';\n\n  public agInit(params: ICellRendererParams): void {\n    this.attachmentName = params.data && params.data.name;\n  }\n\n  public refresh(): boolean {\n    return false;\n  }\n}\n"
     },
     {
-      "fileName": "list-page-tabs-layout-demo.component.spec.ts",
-      "filePath": "/projects/pages/documentation/code-examples/page/list-page-tabs-layout-demo/list-page-tabs-layout-demo.component.spec.ts",
-      "rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { ComponentFixture, TestBed } from '@angular/core/testing';\nimport { NoopAnimationsModule } from '@angular/platform-browser/animations';\nimport { RouterTestingModule } from '@angular/router/testing';\nimport { SkyPageHarness } from '@skyux/pages/testing';\n\nimport { ListPageTabsLayoutDemoComponent } from './list-page-tabs-layout-demo.component';\nimport { ListPageTabsLayoutDemoModule } from './list-page-tabs-layout-demo.module';\n\nfdescribe('List page tabs layout demo', async () => {\n  async function setupTest(): Promise<{\n    pageHarness: SkyPageHarness;\n    fixture: ComponentFixture<ListPageTabsLayoutDemoComponent>;\n  }> {\n    const fixture = TestBed.createComponent(ListPageTabsLayoutDemoComponent);\n\n    const loader = TestbedHarnessEnvironment.documentRootLoader(fixture);\n    const pageHarness = await loader.getHarness(SkyPageHarness);\n\n    return { pageHarness, fixture };\n  }\n\n  beforeEach(() => {\n    TestBed.configureTestingModule({\n      imports: [\n        ListPageTabsLayoutDemoModule,\n        NoopAnimationsModule,\n        RouterTestingModule,\n      ],\n    });\n  });\n\n  it('should have a tabs layout', async () => {\n    const { pageHarness } = await setupTest();\n\n    await expectAsync(pageHarness.getLayout()).toBeResolvedTo('tabs');\n  });\n\n  it('should have the correct page header text', async () => {\n    const { pageHarness } = await setupTest();\n\n    const pageHeaderHarness = await pageHarness.getPageHeader();\n\n    await expectAsync(pageHeaderHarness.getPageTitle()).toBeResolvedTo(\n      'Contacts'\n    );\n  });\n});\n"
+      "fileName": "attachments-grid-context-menu.component.html",
+      "filePath": "/projects/pages/documentation/code-examples/page/record-page-tabs-layout-demo/attachments-grid-context-menu.component.html",
+      "rawContents": "<sky-dropdown\n  buttonType=\"context-menu\"\n  [label]=\"'context menu for ' + attachmentName\"\n>\n  <sky-dropdown-menu>\n    <sky-dropdown-item>\n      <button type=\"button\" [attr.aria-label]=\"'Edit ' + attachmentName\">\n        Edit\n      </button>\n    </sky-dropdown-item>\n    <sky-dropdown-item>\n      <button type=\"button\" [attr.aria-label]=\"'Delete ' + attachmentName\">\n        Delete\n      </button>\n    </sky-dropdown-item>\n  </sky-dropdown-menu>\n</sky-dropdown>\n"
     },
     {
-      "fileName": "list-page-tabs-layout-demo.component.ts",
-      "filePath": "/projects/pages/documentation/code-examples/page/list-page-tabs-layout-demo/list-page-tabs-layout-demo.component.ts",
-      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-list-page-tabs-layout-demo',\n  templateUrl: './list-page-tabs-layout-demo.component.html',\n})\nexport class ListPageTabsLayoutDemoComponent {}\n"
+      "fileName": "record-page-content.component.ts",
+      "filePath": "/projects/pages/documentation/code-examples/page/record-page-blocks-layout-demo/record-page-content.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-record-page-content',\n  templateUrl: './record-page-content.component.html',\n  styleUrls: ['./record-page-content.component.scss'],\n})\nexport class RecordPageContentComponent {\n  public recordDetails = [\n    {\n      detail: 'Designation',\n      info: 'General operating',\n    },\n    {\n      detail: 'Source',\n      info: 'Online donation form',\n    },\n    {\n      detail: 'Status',\n      info: 'Active',\n    },\n    {\n      detail: 'Due date',\n      info: '12/12/2023',\n    },\n    {\n      detail: 'Create date',\n      info: '01/05/2023',\n    },\n    {\n      detail: 'Frequency',\n      info: 'Quarterly',\n    },\n  ];\n\n  public actualPayments = [\n    {\n      category: 'Amount',\n      value: '$845.00',\n    },\n    {\n      category: 'Assigned',\n      value: '$800.00',\n    },\n    {\n      category: 'Applied',\n      value: '$800.00',\n    },\n    {\n      category: 'Payments',\n      value: 25,\n    },\n  ];\n\n  public projectedPayments = [\n    {\n      category: 'Amount',\n      value: '$0',\n    },\n    {\n      category: 'Line items',\n      value: 0,\n    },\n  ];\n\n  public recentActivity = [\n    {\n      activity: '$250.00 payment processed successfully.',\n      date: '07/01/2023 12:02 am',\n    },\n    {\n      activity: '$150.00 payment processed successfully.',\n      date: '06/15/2023 12:02 am',\n    },\n    {\n      activity: '$250.00 payment processed successfully.',\n      date: '04/01/2023 12:02 am',\n    },\n  ];\n}\n"
     },
     {
-      "fileName": "list-page-tabs-layout-demo.module.ts",
-      "filePath": "/projects/pages/documentation/code-examples/page/list-page-tabs-layout-demo/list-page-tabs-layout-demo.module.ts",
-      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyAgGridModule } from '@skyux/ag-grid';\nimport { SkyDataManagerModule } from '@skyux/data-manager';\nimport { SkyIconModule, SkyKeyInfoModule } from '@skyux/indicators';\nimport { SkyPageModule } from '@skyux/pages';\nimport { SkyDropdownModule } from '@skyux/popovers';\nimport { SkyTabsModule } from '@skyux/tabs';\n\nimport { AgGridModule } from 'ag-grid-angular';\n\nimport { ContactContextMenuComponent } from './contact-context-menu.component';\nimport { ListPageContactsGridComponent } from './list-page-contacts-grid.component';\nimport { ListPageContentComponent } from './list-page-content.component';\nimport { ListPageTabsLayoutDemoComponent } from './list-page-tabs-layout-demo.component';\n\n@NgModule({\n  declarations: [\n    ContactContextMenuComponent,\n    ListPageTabsLayoutDemoComponent,\n    ListPageContentComponent,\n    ListPageContactsGridComponent,\n  ],\n  exports: [ListPageTabsLayoutDemoComponent],\n  imports: [\n    CommonModule,\n    SkyPageModule,\n    SkyTabsModule,\n    SkyDataManagerModule,\n    SkyAgGridModule,\n    AgGridModule,\n    SkyKeyInfoModule,\n    SkyDropdownModule,\n    SkyIconModule,\n  ],\n})\nexport class ListPageTabsLayoutDemoModule {}\n"
+      "fileName": "record-page-content.component.scss",
+      "filePath": "/projects/pages/documentation/code-examples/page/record-page-blocks-layout-demo/record-page-content.component.scss",
+      "rawContents": ".box-2-content {\n  display: flex;\n\n  div {\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n  }\n\n  .box-2-actuals {\n    margin-right: 60px;\n  }\n}\n"
     },
     {
-      "fileName": "record-page-blocks-layout-demo.component.html",
-      "filePath": "/projects/pages/documentation/code-examples/page/record-page-blocks-layout-demo/record-page-blocks-layout-demo.component.html",
-      "rawContents": "<sky-page layout=\"blocks\">\n  <sky-page-header\n    pageTitle=\"$500 pledge\"\n    [parentLink]=\"{\n      label: 'Pledges',\n      permalink: {\n        route: {\n          commands: ['/']\n        }\n      }\n    }\"\n  />\n  <sky-page-content>\n    <app-record-page-content></app-record-page-content>\n  </sky-page-content>\n</sky-page>\n"
+      "fileName": "record-page-content.component.html",
+      "filePath": "/projects/pages/documentation/code-examples/page/record-page-blocks-layout-demo/record-page-content.component.html",
+      "rawContents": "<sky-fluid-grid gutterSize=\"medium\" [disableMargin]=\"true\">\n  <sky-row>\n    <sky-column [screenMedium]=\"4\" [screenSmall]=\"12\">\n      <sky-box class=\"sky-margin-stacked-xl\">\n        <sky-box-header>\n          <h2 class=\"sky-font-heading-2\">Details</h2>\n        </sky-box-header>\n        <sky-box-controls>\n          <button\n            class=\"sky-btn sky-btn-icon-borderless\"\n            aria-label=\"Edit button for details\"\n          >\n            <sky-icon icon=\"edit\" iconType=\"skyux\"></sky-icon>\n          </button>\n        </sky-box-controls>\n        <sky-box-content>\n          <sky-description-list mode=\"vertical\">\n            <sky-description-list-content\n              *ngFor=\"let recordDetail of recordDetails\"\n            >\n              <sky-description-list-term>\n                {{ recordDetail.detail }}\n              </sky-description-list-term>\n              <sky-description-list-description>\n                {{ recordDetail.info }}\n              </sky-description-list-description>\n            </sky-description-list-content>\n          </sky-description-list>\n        </sky-box-content>\n      </sky-box>\n    </sky-column>\n    <sky-column [screenMedium]=\"4\" [screenSmall]=\"12\">\n      <sky-box class=\"sky-margin-stacked-xl\">\n        <sky-box-header>\n          <h2 class=\"sky-font-heading-2\">Payments</h2>\n        </sky-box-header>\n        <sky-box-content>\n          <div class=\"box-2-content\">\n            <div class=\"box-2-actuals\">\n              <h3 class=\"sky-font-heading-4\">Actuals</h3>\n              <sky-key-info\n                [ngClass]=\"{\n                  'sky-margin-stacked-lg': i < actualPayments.length - 1\n                }\"\n                *ngFor=\"let actual of actualPayments; let i = index\"\n              >\n                <sky-key-info-value class=\"sky-font-display-3\">\n                  {{ actual.value }}\n                </sky-key-info-value>\n                <sky-key-info-label>{{ actual.category }}</sky-key-info-label>\n              </sky-key-info>\n            </div>\n            <div class=\"box-2-projected\">\n              <h3 class=\"sky-font-heading-4\">Projected</h3>\n              <sky-key-info\n                [ngClass]=\"{\n                  'sky-margin-stacked-lg': i < projectedPayments.length - 1\n                }\"\n                *ngFor=\"let projected of projectedPayments; let i = index\"\n              >\n                <sky-key-info-value class=\"sky-font-display-3\">\n                  {{ projected.value }}\n                </sky-key-info-value>\n                <sky-key-info-label>\n                  {{ projected.category }}\n                </sky-key-info-label>\n              </sky-key-info>\n            </div>\n          </div>\n        </sky-box-content>\n      </sky-box>\n    </sky-column>\n    <sky-column [screenMedium]=\"4\" [screenSmall]=\"12\">\n      <sky-box>\n        <sky-box-header>\n          <h2 class=\"sky-font-heading-2\">Recent activity</h2>\n        </sky-box-header>\n        <sky-box-content>\n          <sky-repeater>\n            <sky-repeater-item *ngFor=\"let activity of recentActivity\">\n              <sky-repeater-item-content>\n                <div class=\"sky-margin-stacked-xs\">\n                  {{ activity.activity }}\n                </div>\n                <div class=\"sky-font-deemphasized\">{{ activity.date }}</div>\n              </sky-repeater-item-content>\n            </sky-repeater-item>\n          </sky-repeater>\n        </sky-box-content>\n      </sky-box>\n    </sky-column>\n  </sky-row>\n</sky-fluid-grid>\n"
     },
     {
-      "fileName": "record-page-blocks-layout-demo.component.spec.ts",
-      "filePath": "/projects/pages/documentation/code-examples/page/record-page-blocks-layout-demo/record-page-blocks-layout-demo.component.spec.ts",
-      "rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { ComponentFixture, TestBed } from '@angular/core/testing';\nimport { NoopAnimationsModule } from '@angular/platform-browser/animations';\nimport { RouterTestingModule } from '@angular/router/testing';\nimport { SkyPageHarness } from '@skyux/pages/testing';\n\nimport { RecordPageBlocksLayoutDemoComponent } from './record-page-blocks-layout-demo.component';\nimport { RecordPageBlocksLayoutDemoModule } from './record-page-blocks-layout-demo.module';\n\nfdescribe('Record page blocks layout demo', async () => {\n  async function setupTest(): Promise<{\n    pageHarness: SkyPageHarness;\n    fixture: ComponentFixture<RecordPageBlocksLayoutDemoComponent>;\n  }> {\n    const fixture = TestBed.createComponent(\n      RecordPageBlocksLayoutDemoComponent\n    );\n\n    const loader = TestbedHarnessEnvironment.documentRootLoader(fixture);\n    const pageHarness = await loader.getHarness(SkyPageHarness);\n\n    return { pageHarness, fixture };\n  }\n\n  beforeEach(() => {\n    TestBed.configureTestingModule({\n      imports: [\n        NoopAnimationsModule,\n        RecordPageBlocksLayoutDemoModule,\n        RouterTestingModule,\n      ],\n    });\n  });\n\n  it('should have a blocks layout', async () => {\n    const { pageHarness, fixture } = await setupTest();\n\n    fixture.detectChanges();\n\n    await expectAsync(pageHarness.getLayout()).toBeResolvedTo('blocks');\n  });\n\n  it('should have the correct page header text', async () => {\n    const { pageHarness } = await setupTest();\n\n    const pageHeaderHarness = await pageHarness.getPageHeader();\n\n    await expectAsync(pageHeaderHarness.getPageTitle()).toBeResolvedTo(\n      '$500 pledge'\n    );\n\n    await expectAsync(pageHeaderHarness.getParentLinkText()).toBeResolvedTo(\n      'Pledges'\n    );\n  });\n});\n"
+      "fileName": "record-page-blocks-layout-demo.module.ts",
+      "filePath": "/projects/pages/documentation/code-examples/page/record-page-blocks-layout-demo/record-page-blocks-layout-demo.module.ts",
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyIconModule, SkyKeyInfoModule } from '@skyux/indicators';\nimport {\n  SkyBoxModule,\n  SkyDescriptionListModule,\n  SkyFluidGridModule,\n} from '@skyux/layout';\nimport { SkyRepeaterModule } from '@skyux/lists';\nimport { SkyPageModule } from '@skyux/pages';\n\nimport { RecordPageBlocksLayoutDemoComponent } from './record-page-blocks-layout-demo.component';\nimport { RecordPageContentComponent } from './record-page-content.component';\n\n@NgModule({\n  declarations: [\n    RecordPageBlocksLayoutDemoComponent,\n    RecordPageContentComponent,\n  ],\n  exports: [RecordPageBlocksLayoutDemoComponent],\n  imports: [\n    CommonModule,\n    SkyBoxModule,\n    SkyDescriptionListModule,\n    SkyFluidGridModule,\n    SkyIconModule,\n    SkyKeyInfoModule,\n    SkyPageModule,\n    SkyRepeaterModule,\n  ],\n})\nexport class RecordPageBlocksLayoutDemoModule {}\n"
     },
     {
       "fileName": "record-page-blocks-layout-demo.component.ts",
@@ -3276,129 +3276,129 @@
       "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-record-page-block-layout-demo',\n  templateUrl: './record-page-blocks-layout-demo.component.html',\n})\nexport class RecordPageBlocksLayoutDemoComponent {}\n"
     },
     {
-      "fileName": "record-page-blocks-layout-demo.module.ts",
-      "filePath": "/projects/pages/documentation/code-examples/page/record-page-blocks-layout-demo/record-page-blocks-layout-demo.module.ts",
-      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyIconModule, SkyKeyInfoModule } from '@skyux/indicators';\nimport {\n  SkyBoxModule,\n  SkyDescriptionListModule,\n  SkyFluidGridModule,\n} from '@skyux/layout';\nimport { SkyRepeaterModule } from '@skyux/lists';\nimport { SkyPageModule } from '@skyux/pages';\n\nimport { RecordPageBlocksLayoutDemoComponent } from './record-page-blocks-layout-demo.component';\nimport { RecordPageContentComponent } from './record-page-content.component';\n\n@NgModule({\n  declarations: [\n    RecordPageBlocksLayoutDemoComponent,\n    RecordPageContentComponent,\n  ],\n  exports: [RecordPageBlocksLayoutDemoComponent],\n  imports: [\n    CommonModule,\n    SkyBoxModule,\n    SkyDescriptionListModule,\n    SkyFluidGridModule,\n    SkyIconModule,\n    SkyKeyInfoModule,\n    SkyPageModule,\n    SkyRepeaterModule,\n  ],\n})\nexport class RecordPageBlocksLayoutDemoModule {}\n"
+      "fileName": "record-page-blocks-layout-demo.component.spec.ts",
+      "filePath": "/projects/pages/documentation/code-examples/page/record-page-blocks-layout-demo/record-page-blocks-layout-demo.component.spec.ts",
+      "rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { ComponentFixture, TestBed } from '@angular/core/testing';\nimport { NoopAnimationsModule } from '@angular/platform-browser/animations';\nimport { RouterTestingModule } from '@angular/router/testing';\nimport { SkyPageHarness } from '@skyux/pages/testing';\n\nimport { RecordPageBlocksLayoutDemoComponent } from './record-page-blocks-layout-demo.component';\nimport { RecordPageBlocksLayoutDemoModule } from './record-page-blocks-layout-demo.module';\n\nfdescribe('Record page blocks layout demo', async () => {\n  async function setupTest(): Promise<{\n    pageHarness: SkyPageHarness;\n    fixture: ComponentFixture<RecordPageBlocksLayoutDemoComponent>;\n  }> {\n    const fixture = TestBed.createComponent(\n      RecordPageBlocksLayoutDemoComponent\n    );\n\n    const loader = TestbedHarnessEnvironment.documentRootLoader(fixture);\n    const pageHarness = await loader.getHarness(SkyPageHarness);\n\n    return { pageHarness, fixture };\n  }\n\n  beforeEach(() => {\n    TestBed.configureTestingModule({\n      imports: [\n        NoopAnimationsModule,\n        RecordPageBlocksLayoutDemoModule,\n        RouterTestingModule,\n      ],\n    });\n  });\n\n  it('should have a blocks layout', async () => {\n    const { pageHarness, fixture } = await setupTest();\n\n    fixture.detectChanges();\n\n    await expectAsync(pageHarness.getLayout()).toBeResolvedTo('blocks');\n  });\n\n  it('should have the correct page header text', async () => {\n    const { pageHarness } = await setupTest();\n\n    const pageHeaderHarness = await pageHarness.getPageHeader();\n\n    await expectAsync(pageHeaderHarness.getPageTitle()).toBeResolvedTo(\n      '$500 pledge'\n    );\n\n    await expectAsync(pageHeaderHarness.getParentLinkText()).toBeResolvedTo(\n      'Pledges'\n    );\n  });\n});\n"
     },
     {
-      "fileName": "record-page-content.component.html",
-      "filePath": "/projects/pages/documentation/code-examples/page/record-page-blocks-layout-demo/record-page-content.component.html",
-      "rawContents": "<sky-fluid-grid gutterSize=\"medium\" [disableMargin]=\"true\">\n  <sky-row>\n    <sky-column [screenMedium]=\"4\" [screenSmall]=\"12\">\n      <sky-box class=\"sky-margin-stacked-xl\">\n        <sky-box-header>\n          <h2 class=\"sky-font-heading-2\">Details</h2>\n        </sky-box-header>\n        <sky-box-controls>\n          <button\n            class=\"sky-btn sky-btn-icon-borderless\"\n            aria-label=\"Edit button for details\"\n          >\n            <sky-icon icon=\"edit\" iconType=\"skyux\"></sky-icon>\n          </button>\n        </sky-box-controls>\n        <sky-box-content>\n          <sky-description-list mode=\"vertical\">\n            <sky-description-list-content\n              *ngFor=\"let recordDetail of recordDetails\"\n            >\n              <sky-description-list-term>\n                {{ recordDetail.detail }}\n              </sky-description-list-term>\n              <sky-description-list-description>\n                {{ recordDetail.info }}\n              </sky-description-list-description>\n            </sky-description-list-content>\n          </sky-description-list>\n        </sky-box-content>\n      </sky-box>\n    </sky-column>\n    <sky-column [screenMedium]=\"4\" [screenSmall]=\"12\">\n      <sky-box class=\"sky-margin-stacked-xl\">\n        <sky-box-header>\n          <h2 class=\"sky-font-heading-2\">Payments</h2>\n        </sky-box-header>\n        <sky-box-content>\n          <div class=\"box-2-content\">\n            <div class=\"box-2-actuals\">\n              <h3 class=\"sky-font-heading-4\">Actuals</h3>\n              <sky-key-info\n                [ngClass]=\"{\n                  'sky-margin-stacked-lg': i < actualPayments.length - 1\n                }\"\n                *ngFor=\"let actual of actualPayments; let i = index\"\n              >\n                <sky-key-info-value class=\"sky-font-display-3\">\n                  {{ actual.value }}\n                </sky-key-info-value>\n                <sky-key-info-label>{{ actual.category }}</sky-key-info-label>\n              </sky-key-info>\n            </div>\n            <div class=\"box-2-projected\">\n              <h3 class=\"sky-font-heading-4\">Projected</h3>\n              <sky-key-info\n                [ngClass]=\"{\n                  'sky-margin-stacked-lg': i < projectedPayments.length - 1\n                }\"\n                *ngFor=\"let projected of projectedPayments; let i = index\"\n              >\n                <sky-key-info-value class=\"sky-font-display-3\">\n                  {{ projected.value }}\n                </sky-key-info-value>\n                <sky-key-info-label>\n                  {{ projected.category }}\n                </sky-key-info-label>\n              </sky-key-info>\n            </div>\n          </div>\n        </sky-box-content>\n      </sky-box>\n    </sky-column>\n    <sky-column [screenMedium]=\"4\" [screenSmall]=\"12\">\n      <sky-box>\n        <sky-box-header>\n          <h2 class=\"sky-font-heading-2\">Recent activity</h2>\n        </sky-box-header>\n        <sky-box-content>\n          <sky-repeater>\n            <sky-repeater-item *ngFor=\"let activity of recentActivity\">\n              <sky-repeater-item-content>\n                <div class=\"sky-margin-stacked-xs\">\n                  {{ activity.activity }}\n                </div>\n                <div class=\"sky-font-deemphasized\">{{ activity.date }}</div>\n              </sky-repeater-item-content>\n            </sky-repeater-item>\n          </sky-repeater>\n        </sky-box-content>\n      </sky-box>\n    </sky-column>\n  </sky-row>\n</sky-fluid-grid>\n"
+      "fileName": "record-page-blocks-layout-demo.component.html",
+      "filePath": "/projects/pages/documentation/code-examples/page/record-page-blocks-layout-demo/record-page-blocks-layout-demo.component.html",
+      "rawContents": "<sky-page layout=\"blocks\">\n  <sky-page-header\n    pageTitle=\"$500 pledge\"\n    [parentLink]=\"{\n      label: 'Pledges',\n      permalink: {\n        route: {\n          commands: ['/']\n        }\n      }\n    }\"\n  />\n  <sky-page-content>\n    <app-record-page-content></app-record-page-content>\n  </sky-page-content>\n</sky-page>\n"
     },
     {
-      "fileName": "record-page-content.component.scss",
-      "filePath": "/projects/pages/documentation/code-examples/page/record-page-blocks-layout-demo/record-page-content.component.scss",
-      "rawContents": ".box-2-content {\n  display: flex;\n\n  div {\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n  }\n\n  .box-2-actuals {\n    margin-right: 60px;\n  }\n}\n"
+      "fileName": "list-page-tabs-layout-demo.module.ts",
+      "filePath": "/projects/pages/documentation/code-examples/page/list-page-tabs-layout-demo/list-page-tabs-layout-demo.module.ts",
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyAgGridModule } from '@skyux/ag-grid';\nimport { SkyDataManagerModule } from '@skyux/data-manager';\nimport { SkyIconModule, SkyKeyInfoModule } from '@skyux/indicators';\nimport { SkyPageModule } from '@skyux/pages';\nimport { SkyDropdownModule } from '@skyux/popovers';\nimport { SkyTabsModule } from '@skyux/tabs';\n\nimport { AgGridModule } from 'ag-grid-angular';\n\nimport { ContactContextMenuComponent } from './contact-context-menu.component';\nimport { ListPageContactsGridComponent } from './list-page-contacts-grid.component';\nimport { ListPageContentComponent } from './list-page-content.component';\nimport { ListPageTabsLayoutDemoComponent } from './list-page-tabs-layout-demo.component';\n\n@NgModule({\n  declarations: [\n    ContactContextMenuComponent,\n    ListPageTabsLayoutDemoComponent,\n    ListPageContentComponent,\n    ListPageContactsGridComponent,\n  ],\n  exports: [ListPageTabsLayoutDemoComponent],\n  imports: [\n    CommonModule,\n    SkyPageModule,\n    SkyTabsModule,\n    SkyDataManagerModule,\n    SkyAgGridModule,\n    AgGridModule,\n    SkyKeyInfoModule,\n    SkyDropdownModule,\n    SkyIconModule,\n  ],\n})\nexport class ListPageTabsLayoutDemoModule {}\n"
     },
     {
-      "fileName": "record-page-content.component.ts",
-      "filePath": "/projects/pages/documentation/code-examples/page/record-page-blocks-layout-demo/record-page-content.component.ts",
-      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-record-page-content',\n  templateUrl: './record-page-content.component.html',\n  styleUrls: ['./record-page-content.component.scss'],\n})\nexport class RecordPageContentComponent {\n  public recordDetails = [\n    {\n      detail: 'Designation',\n      info: 'General operating',\n    },\n    {\n      detail: 'Source',\n      info: 'Online donation form',\n    },\n    {\n      detail: 'Status',\n      info: 'Active',\n    },\n    {\n      detail: 'Due date',\n      info: '12/12/2023',\n    },\n    {\n      detail: 'Create date',\n      info: '01/05/2023',\n    },\n    {\n      detail: 'Frequency',\n      info: 'Quarterly',\n    },\n  ];\n\n  public actualPayments = [\n    {\n      category: 'Amount',\n      value: '$845.00',\n    },\n    {\n      category: 'Assigned',\n      value: '$800.00',\n    },\n    {\n      category: 'Applied',\n      value: '$800.00',\n    },\n    {\n      category: 'Payments',\n      value: 25,\n    },\n  ];\n\n  public projectedPayments = [\n    {\n      category: 'Amount',\n      value: '$0',\n    },\n    {\n      category: 'Line items',\n      value: 0,\n    },\n  ];\n\n  public recentActivity = [\n    {\n      activity: '$250.00 payment processed successfully.',\n      date: '07/01/2023 12:02 am',\n    },\n    {\n      activity: '$150.00 payment processed successfully.',\n      date: '06/15/2023 12:02 am',\n    },\n    {\n      activity: '$250.00 payment processed successfully.',\n      date: '04/01/2023 12:02 am',\n    },\n  ];\n}\n"
+      "fileName": "list-page-tabs-layout-demo.component.ts",
+      "filePath": "/projects/pages/documentation/code-examples/page/list-page-tabs-layout-demo/list-page-tabs-layout-demo.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-list-page-tabs-layout-demo',\n  templateUrl: './list-page-tabs-layout-demo.component.html',\n})\nexport class ListPageTabsLayoutDemoComponent {}\n"
     },
     {
-      "fileName": "attachments-grid-context-menu.component.html",
-      "filePath": "/projects/pages/documentation/code-examples/page/record-page-tabs-layout-demo/attachments-grid-context-menu.component.html",
-      "rawContents": "<sky-dropdown\n  buttonType=\"context-menu\"\n  [label]=\"'context menu for ' + attachmentName\"\n>\n  <sky-dropdown-menu>\n    <sky-dropdown-item>\n      <button type=\"button\" [attr.aria-label]=\"'Edit ' + attachmentName\">\n        Edit\n      </button>\n    </sky-dropdown-item>\n    <sky-dropdown-item>\n      <button type=\"button\" [attr.aria-label]=\"'Delete ' + attachmentName\">\n        Delete\n      </button>\n    </sky-dropdown-item>\n  </sky-dropdown-menu>\n</sky-dropdown>\n"
+      "fileName": "list-page-tabs-layout-demo.component.spec.ts",
+      "filePath": "/projects/pages/documentation/code-examples/page/list-page-tabs-layout-demo/list-page-tabs-layout-demo.component.spec.ts",
+      "rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { ComponentFixture, TestBed } from '@angular/core/testing';\nimport { NoopAnimationsModule } from '@angular/platform-browser/animations';\nimport { RouterTestingModule } from '@angular/router/testing';\nimport { SkyPageHarness } from '@skyux/pages/testing';\n\nimport { ListPageTabsLayoutDemoComponent } from './list-page-tabs-layout-demo.component';\nimport { ListPageTabsLayoutDemoModule } from './list-page-tabs-layout-demo.module';\n\nfdescribe('List page tabs layout demo', async () => {\n  async function setupTest(): Promise<{\n    pageHarness: SkyPageHarness;\n    fixture: ComponentFixture<ListPageTabsLayoutDemoComponent>;\n  }> {\n    const fixture = TestBed.createComponent(ListPageTabsLayoutDemoComponent);\n\n    const loader = TestbedHarnessEnvironment.documentRootLoader(fixture);\n    const pageHarness = await loader.getHarness(SkyPageHarness);\n\n    return { pageHarness, fixture };\n  }\n\n  beforeEach(() => {\n    TestBed.configureTestingModule({\n      imports: [\n        ListPageTabsLayoutDemoModule,\n        NoopAnimationsModule,\n        RouterTestingModule,\n      ],\n    });\n  });\n\n  it('should have a tabs layout', async () => {\n    const { pageHarness } = await setupTest();\n\n    await expectAsync(pageHarness.getLayout()).toBeResolvedTo('tabs');\n  });\n\n  it('should have the correct page header text', async () => {\n    const { pageHarness } = await setupTest();\n\n    const pageHeaderHarness = await pageHarness.getPageHeader();\n\n    await expectAsync(pageHeaderHarness.getPageTitle()).toBeResolvedTo(\n      'Contacts'\n    );\n  });\n});\n"
     },
     {
-      "fileName": "attachments-grid-context-menu.component.ts",
-      "filePath": "/projects/pages/documentation/code-examples/page/record-page-tabs-layout-demo/attachments-grid-context-menu.component.ts",
-      "rawContents": "import { Component } from '@angular/core';\n\nimport { ICellRendererAngularComp } from 'ag-grid-angular';\nimport { ICellRendererParams } from 'ag-grid-community';\n\n@Component({\n  selector: 'app-attachments-grid-context-menu',\n  templateUrl: './attachments-grid-context-menu.component.html',\n})\nexport class AttachmentsGridContextMenuComponent\n  implements ICellRendererAngularComp\n{\n  public attachmentName = '';\n\n  public agInit(params: ICellRendererParams): void {\n    this.attachmentName = params.data && params.data.name;\n  }\n\n  public refresh(): boolean {\n    return false;\n  }\n}\n"
+      "fileName": "list-page-tabs-layout-demo.component.html",
+      "filePath": "/projects/pages/documentation/code-examples/page/list-page-tabs-layout-demo/list-page-tabs-layout-demo.component.html",
+      "rawContents": "<sky-page layout=\"tabs\">\n  <sky-page-header pageTitle=\"Contacts\" />\n  <sky-page-content>\n    <app-list-page-content></app-list-page-content>\n  </sky-page-content>\n</sky-page>\n"
     },
     {
-      "fileName": "record-page-attachments-tab.component.html",
-      "filePath": "/projects/pages/documentation/code-examples/page/record-page-tabs-layout-demo/record-page-attachments-tab.component.html",
-      "rawContents": "<sky-data-manager>\n  <div class=\"sky-margin-stacked-xs\">\n    <sky-data-manager-toolbar>\n      <sky-data-manager-toolbar-primary-item>\n        <button class=\"sky-btn sky-btn-default\" aria-label=\"New attachment\">\n          <sky-icon iconType=\"skyux\" icon=\"add\"></sky-icon>\n          New\n        </button>\n      </sky-data-manager-toolbar-primary-item>\n    </sky-data-manager-toolbar>\n  </div>\n  <div class=\"sky-margin-stacked-sm\">\n    <sky-key-info layout=\"horizontal\" class=\"sky-padding-horizontal-sm\">\n      <sky-key-info-value class=\"sky-font-display-4\">\n        {{ items.length }}\n      </sky-key-info-value>\n      <sky-key-info-label> Attachments </sky-key-info-label>\n    </sky-key-info>\n  </div>\n  <sky-data-view skyAgGridDataManagerAdapter viewId=\"gridView\">\n    <sky-ag-grid-wrapper>\n      <ag-grid-angular [gridOptions]=\"gridOptions\" [rowData]=\"items\">\n      </ag-grid-angular>\n    </sky-ag-grid-wrapper>\n  </sky-data-view>\n</sky-data-manager>\n"
+      "fileName": "list-page-content.component.ts",
+      "filePath": "/projects/pages/documentation/code-examples/page/list-page-tabs-layout-demo/list-page-content.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\nimport { SkyTabIndex } from '@skyux/tabs';\n\n@Component({\n  selector: 'app-list-page-content',\n  templateUrl: './list-page-content.component.html',\n})\nexport class ListPageContentComponent {\n  public activeTabIndex: SkyTabIndex = 0;\n\n  public myContacts = [\n    {\n      name: 'Wonda Lumpkin',\n      organization: 'Riverfront College of the Arts',\n      emailAddress: 'wlumpkin@yahoo.com',\n    },\n    {\n      name: 'Eliza Vanhorn',\n      organization: 'Summit School of the Arts',\n      emailAddress: 'evanhorn@outlook.com',\n    },\n    {\n      name: 'Ed Sipes',\n      organization: 'Reflections Middle School',\n      emailAddress: 'esipes@yahoo.com',\n    },\n    {\n      name: 'Elwood Farris',\n      organization: 'Sandy Lagoon College',\n      emailAddress: 'elfarris@gmail.com',\n    },\n    {\n      name: 'Cristen Sizemore',\n      organization: 'Grafton Vision Health',\n      emailAddress: 'cristen.sizemore@aol.com',\n    },\n    {\n      name: 'Latrice Ashmore',\n      organization: 'Food Bank of Rapid City',\n      emailAddress: 'lashmore@gmail.com',\n    },\n  ];\n\n  public allContacts = [\n    ...this.myContacts,\n    {\n      name: 'Kanesha Hutto',\n      organization: 'Los Angeles College of the Arts',\n      emailAddress: 'khutto@yahoo.com',\n    },\n    {\n      name: 'Kristeen Lunsford',\n      organization: 'Food Bank of Los Angeles',\n      emailAddress: 'kristeen.lunsford@yahoo.com',\n    },\n    {\n      name: 'Barbara Durr',\n      organization: 'Riverfront Middle School',\n      emailAddress: 'bdurr@gmail.com',\n    },\n    {\n      name: 'Ilene Woo',\n      organization: 'Rapid City High School',\n      emailAddress: 'ilene.woo@aol.com',\n    },\n    {\n      name: 'Darcel Lenz',\n      organization: 'Riverfront College of the Arts',\n      emailAddress: 'dlenz@yahoo.com',\n    },\n  ];\n}\n"
     },
     {
-      "fileName": "record-page-attachments-tab.component.ts",
-      "filePath": "/projects/pages/documentation/code-examples/page/record-page-tabs-layout-demo/record-page-attachments-tab.component.ts",
-      "rawContents": "import { Component, OnInit, inject } from '@angular/core';\nimport { SkyAgGridService } from '@skyux/ag-grid';\nimport {\n  SkyDataManagerService,\n  SkyDataManagerState,\n  SkyDataViewConfig,\n} from '@skyux/data-manager';\n\nimport { ColDef, GridOptions, ICellRendererParams } from 'ag-grid-community';\n\nimport { AttachmentsGridContextMenuComponent } from './attachments-grid-context-menu.component';\n\n@Component({\n  selector: 'app-record-page-attachments-tab',\n  templateUrl: './record-page-attachments-tab.component.html',\n  providers: [SkyDataManagerService],\n})\nexport class RecordPageAttachmentsTabComponent implements OnInit {\n  public items = [\n    {\n      name: 'Agreement.pdf',\n      description: 'Cardholder agreement',\n      size: '10 KB',\n      dateAdded: '01/28/2023',\n    },\n    {\n      name: 'Appendix.pdf',\n      description: 'Updated terms 2023',\n      size: '25 KB',\n      dateAdded: '05/05/2023',\n    },\n  ];\n  public gridOptions: GridOptions;\n\n  #dataManagerService = inject(SkyDataManagerService);\n  #agGridSvc = inject(SkyAgGridService);\n\n  #columnDefs: ColDef[] = [\n    {\n      colId: 'contextMenu',\n      headerName: '',\n      sortable: false,\n      cellRenderer: AttachmentsGridContextMenuComponent,\n      maxWidth: 55,\n    },\n    {\n      colId: 'name',\n      field: 'name',\n      headerName: 'Name',\n      width: 150,\n      cellRenderer: (params: ICellRendererParams): string => {\n        return `<a href=\"/\">${params.value}</a>`;\n      },\n    },\n    {\n      colId: 'description',\n      field: 'description',\n      headerName: 'Description',\n    },\n    {\n      colId: 'size',\n      field: 'size',\n      headerName: 'Size',\n    },\n    {\n      colId: 'dateAdded',\n      field: 'dateAdded',\n      headerName: 'Date Added',\n    },\n  ];\n\n  #viewConfig: SkyDataViewConfig = {\n    id: 'gridView',\n    name: 'Grid View',\n    searchEnabled: true,\n  };\n\n  constructor() {\n    this.gridOptions = this.#agGridSvc.getGridOptions({\n      gridOptions: {\n        columnDefs: this.#columnDefs,\n        onGridReady: (args) => {\n          args.api.sizeColumnsToFit();\n        },\n      },\n    });\n  }\n\n  public ngOnInit(): void {\n    this.#dataManagerService.initDataManager({\n      activeViewId: 'gridView',\n      dataManagerConfig: {},\n      defaultDataState: new SkyDataManagerState({\n        views: [\n          {\n            viewId: 'gridView',\n            displayedColumnIds: [\n              'contextMenu',\n              'name',\n              'description',\n              'size',\n              'dateAdded',\n            ],\n          },\n        ],\n      }),\n    });\n\n    this.#dataManagerService.initDataView(this.#viewConfig);\n  }\n}\n"
+      "fileName": "list-page-content.component.html",
+      "filePath": "/projects/pages/documentation/code-examples/page/list-page-tabs-layout-demo/list-page-content.component.html",
+      "rawContents": "<sky-tabset [(active)]=\"activeTabIndex\">\n  <sky-tab tabHeading=\"My contacts\" layout=\"list\">\n    <app-list-page-contacts-grid\n      *ngIf=\"activeTabIndex === 0\"\n      [contacts]=\"myContacts\"\n    ></app-list-page-contacts-grid>\n  </sky-tab>\n  <sky-tab tabHeading=\"All contacts\" layout=\"list\">\n    <app-list-page-contacts-grid\n      *ngIf=\"activeTabIndex === 1\"\n      [contacts]=\"allContacts\"\n    ></app-list-page-contacts-grid>\n  </sky-tab>\n</sky-tabset>\n"
     },
     {
-      "fileName": "record-page-content.component.html",
-      "filePath": "/projects/pages/documentation/code-examples/page/record-page-tabs-layout-demo/record-page-content.component.html",
-      "rawContents": "<sky-tabset [(active)]=\"activeTabIndex\">\n  <sky-tab tabHeading=\"Overview\" layout=\"blocks\">\n    <app-record-page-overview-tab></app-record-page-overview-tab>\n  </sky-tab>\n  <sky-tab tabHeading=\"Notes\" layout=\"list\">\n    <app-record-page-notes-tab></app-record-page-notes-tab>\n  </sky-tab>\n  <sky-tab tabHeading=\"Attachments\" layout=\"list\">\n    <app-record-page-attachments-tab\n      *ngIf=\"activeTabIndex === 2\"\n    ></app-record-page-attachments-tab>\n  </sky-tab>\n</sky-tabset>\n"
+      "fileName": "list-page-contacts-grid.component.ts",
+      "filePath": "/projects/pages/documentation/code-examples/page/list-page-tabs-layout-demo/list-page-contacts-grid.component.ts",
+      "rawContents": "import { Component, Input, OnInit, inject } from '@angular/core';\nimport { SkyAgGridService } from '@skyux/ag-grid';\nimport {\n  SkyDataManagerService,\n  SkyDataManagerState,\n  SkyDataViewConfig,\n} from '@skyux/data-manager';\n\nimport { ColDef, GridOptions, ICellRendererParams } from 'ag-grid-community';\n\nimport { ContactContextMenuComponent } from './contact-context-menu.component';\n\ntype Contact = {\n  name: string;\n  organization: string;\n  emailAddress: string;\n};\n\n@Component({\n  selector: 'app-list-page-contacts-grid',\n  templateUrl: './list-page-contacts-grid.component.html',\n  providers: [SkyDataManagerService],\n})\nexport class ListPageContactsGridComponent implements OnInit {\n  @Input()\n  public contacts: Contact[] = [];\n\n  public gridOptions: GridOptions;\n\n  #dataManagerService = inject(SkyDataManagerService);\n  #agGridSvc = inject(SkyAgGridService);\n\n  #columnDefs: ColDef[] = [\n    {\n      colId: 'contextMenu',\n      headerName: '',\n      sortable: false,\n      cellRenderer: ContactContextMenuComponent,\n      maxWidth: 55,\n    },\n    {\n      colId: 'name',\n      field: 'name',\n      headerName: 'Name',\n      width: 150,\n      cellRenderer: (params: ICellRendererParams): string => {\n        return `<a href=\"/\">${params.value}</a>`;\n      },\n    },\n    {\n      colId: 'organization',\n      field: 'organization',\n      headerName: 'Organization',\n    },\n    {\n      colId: 'emailAddress',\n      field: 'emailAddress',\n      headerName: 'Email Address',\n    },\n  ];\n\n  #viewConfig: SkyDataViewConfig = {\n    id: 'gridView',\n    name: 'Grid View',\n    searchEnabled: true,\n    columnPickerEnabled: true,\n    columnOptions: [\n      { id: 'contextMenu', label: 'Context menu', alwaysDisplayed: true },\n      { id: 'name', label: 'Name' },\n      { id: 'organization', label: 'Organization' },\n      { id: 'emailAddress', label: 'Email Address' },\n    ],\n  };\n\n  constructor() {\n    this.gridOptions = this.#agGridSvc.getGridOptions({\n      gridOptions: {\n        columnDefs: this.#columnDefs,\n        onGridReady: (args) => {\n          args.api.sizeColumnsToFit();\n        },\n      },\n    });\n  }\n\n  public ngOnInit(): void {\n    this.#dataManagerService.initDataManager({\n      activeViewId: 'gridView',\n      dataManagerConfig: {},\n      defaultDataState: new SkyDataManagerState({\n        views: [\n          {\n            viewId: 'gridView',\n            displayedColumnIds: [\n              'contextMenu',\n              'name',\n              'organization',\n              'emailAddress',\n            ],\n          },\n        ],\n      }),\n    });\n\n    this.#dataManagerService.initDataView(this.#viewConfig);\n  }\n}\n"
     },
     {
-      "fileName": "record-page-content.component.ts",
-      "filePath": "/projects/pages/documentation/code-examples/page/record-page-tabs-layout-demo/record-page-content.component.ts",
-      "rawContents": "import { Component } from '@angular/core';\nimport { SkyTabIndex } from '@skyux/tabs';\n\n@Component({\n  selector: 'app-record-page-content',\n  templateUrl: './record-page-content.component.html',\n})\nexport class RecordPageContentComponent {\n  public activeTabIndex: SkyTabIndex = 0;\n}\n"
+      "fileName": "list-page-contacts-grid.component.html",
+      "filePath": "/projects/pages/documentation/code-examples/page/list-page-tabs-layout-demo/list-page-contacts-grid.component.html",
+      "rawContents": "<sky-data-manager>\n  <div class=\"sky-margin-stacked-xs\">\n    <sky-data-manager-toolbar>\n      <sky-data-manager-toolbar-primary-item>\n        <button class=\"sky-btn sky-btn-default\" aria-label=\"New contact\">\n          <sky-icon iconType=\"skyux\" icon=\"add\"></sky-icon>\n          New\n        </button>\n      </sky-data-manager-toolbar-primary-item>\n    </sky-data-manager-toolbar>\n  </div>\n  <div class=\"sky-margin-stacked-sm\">\n    <sky-key-info layout=\"horizontal\" class=\"sky-padding-horizontal-sm\">\n      <sky-key-info-value class=\"sky-font-display-4\">\n        {{ contacts.length }}\n      </sky-key-info-value>\n      <sky-key-info-label> Contacts </sky-key-info-label>\n    </sky-key-info>\n  </div>\n  <sky-data-view skyAgGridDataManagerAdapter viewId=\"gridView\">\n    <sky-ag-grid-wrapper>\n      <ag-grid-angular [gridOptions]=\"gridOptions\" [rowData]=\"contacts\">\n      </ag-grid-angular>\n    </sky-ag-grid-wrapper>\n  </sky-data-view>\n</sky-data-manager>\n"
     },
     {
-      "fileName": "record-page-notes-tab.component.html",
-      "filePath": "/projects/pages/documentation/code-examples/page/record-page-tabs-layout-demo/record-page-notes-tab.component.html",
-      "rawContents": "<div class=\"sky-margin-stacked-xs\">\n  <sky-toolbar>\n    <sky-toolbar-item>\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        aria-label=\"New note\"\n      >\n        <sky-icon iconType=\"skyux\" icon=\"add\"></sky-icon>\n        New\n      </button>\n    </sky-toolbar-item>\n    <sky-toolbar-item>\n      <sky-sort [showButtonText]=\"true\">\n        <sky-sort-item>\n          <span aria-label=\"Sort notes by date created (newest first)\">\n            Date created (newest first)\n          </span>\n        </sky-sort-item>\n        <sky-sort-item>\n          <span aria-label=\"Sort notes by date created (oldest first)\">\n            Date created (oldest first)\n          </span>\n        </sky-sort-item>\n      </sky-sort>\n    </sky-toolbar-item>\n    <sky-toolbar-item>\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        aria-label=\"Export notes\"\n      >\n        <sky-icon iconType=\"skyux\" icon=\"xls-file\"></sky-icon>\n        Export\n      </button>\n    </sky-toolbar-item>\n    <sky-toolbar-item>\n      <sky-search placeholderText=\"Find in notes\"> </sky-search>\n    </sky-toolbar-item>\n  </sky-toolbar>\n</div>\n<div class=\"sky-margin-stacked-sm\">\n  <sky-key-info layout=\"horizontal\">\n    <sky-key-info-value class=\"sky-font-display-4\">\n      {{ notes.length }}\n    </sky-key-info-value>\n    <sky-key-info-label> Notes </sky-key-info-label>\n  </sky-key-info>\n</div>\n<sky-repeater>\n  <sky-repeater-item *ngFor=\"let note of notes\">\n    <sky-repeater-item-context-menu>\n      <sky-dropdown\n        buttonType=\"context-menu\"\n        [label]=\"\n          'Context menu for note ' + note.noteNumber + ' from ' + note.date\n        \"\n      >\n        <sky-dropdown-menu>\n          <sky-dropdown-item>\n            <button\n              type=\"button\"\n              [attr.aria-label]=\"\n                'Edit note ' + note.noteNumber + ' from ' + note.date\n              \"\n            >\n              Edit\n            </button>\n          </sky-dropdown-item>\n          <sky-dropdown-item>\n            <button\n              type=\"button\"\n              [attr.aria-label]=\"\n                'Delete note ' + note.noteNumber + ' from ' + note.date\n              \"\n            >\n              Delete\n            </button>\n          </sky-dropdown-item>\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    </sky-repeater-item-context-menu>\n    <sky-repeater-item-content>\n      <div class=\"sky-margin-stacked-xs\">\n        {{ note.content }}\n      </div>\n      <div class=\"sky-font-deemphasized\">{{ note.date }}</div>\n    </sky-repeater-item-content>\n  </sky-repeater-item>\n</sky-repeater>\n"
+      "fileName": "contact-context-menu.component.ts",
+      "filePath": "/projects/pages/documentation/code-examples/page/list-page-tabs-layout-demo/contact-context-menu.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\n\nimport { ICellRendererAngularComp } from 'ag-grid-angular';\nimport { ICellRendererParams } from 'ag-grid-community';\n\n@Component({\n  selector: 'app-contacts-grid-context-menu',\n  templateUrl: './contact-context-menu.component.html',\n})\nexport class ContactContextMenuComponent implements ICellRendererAngularComp {\n  public contactName = '';\n\n  public agInit(params: ICellRendererParams): void {\n    this.contactName = params.data && params.data.name;\n  }\n\n  public refresh(): boolean {\n    return false;\n  }\n}\n"
     },
     {
-      "fileName": "record-page-notes-tab.component.ts",
-      "filePath": "/projects/pages/documentation/code-examples/page/record-page-tabs-layout-demo/record-page-notes-tab.component.ts",
-      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-record-page-notes-tab',\n  templateUrl: './record-page-notes-tab.component.html',\n})\nexport class RecordPageNotesTabComponent {\n  public notes = [\n    {\n      noteNumber: 1,\n      content: 'Attended our gala last year and had a great time.',\n      date: '11/17/2024',\n    },\n    {\n      noteNumber: 2,\n      content:\n        'Is a business owner and has a lot of connections in the community.',\n      date: '10/11/2024',\n    },\n  ];\n}\n"
+      "fileName": "contact-context-menu.component.html",
+      "filePath": "/projects/pages/documentation/code-examples/page/list-page-tabs-layout-demo/contact-context-menu.component.html",
+      "rawContents": "<sky-dropdown\n  buttonType=\"context-menu\"\n  [label]=\"'context menu for ' + contactName\"\n>\n  <sky-dropdown-menu>\n    <sky-dropdown-item>\n      <button type=\"button\" [attr.aria-label]=\"'Edit ' + contactName\">\n        Edit\n      </button>\n    </sky-dropdown-item>\n    <sky-dropdown-item>\n      <button type=\"button\" [attr.aria-label]=\"'Delete ' + contactName\">\n        Delete\n      </button>\n    </sky-dropdown-item>\n  </sky-dropdown-menu>\n</sky-dropdown>\n"
     },
     {
-      "fileName": "record-page-overview-tab.component.html",
-      "filePath": "/projects/pages/documentation/code-examples/page/record-page-tabs-layout-demo/record-page-overview-tab.component.html",
-      "rawContents": "<sky-fluid-grid gutterSize=\"medium\" [disableMargin]=\"true\">\n  <sky-row>\n    <sky-column [screenSmall]=\"4\" [screenXSmall]=\"12\">\n      <sky-box class=\"sky-margin-stacked-xl\">\n        <sky-box-header>\n          <h2 class=\"sky-font-heading-2\">Details</h2>\n        </sky-box-header>\n        <sky-box-controls>\n          <button\n            class=\"sky-btn sky-btn-icon-borderless\"\n            aria-label=\"Edit button for details\"\n          >\n            <sky-icon icon=\"edit\" iconType=\"skyux\"></sky-icon>\n          </button>\n        </sky-box-controls>\n        <sky-box-content>\n          <sky-description-list mode=\"vertical\">\n            <sky-description-list-content\n              *ngFor=\"let recordDetail of recordDetails\"\n            >\n              <sky-description-list-term>\n                {{ recordDetail.detail }}\n              </sky-description-list-term>\n              <sky-description-list-description>\n                {{ recordDetail.info }}\n              </sky-description-list-description>\n            </sky-description-list-content>\n          </sky-description-list>\n        </sky-box-content>\n      </sky-box>\n    </sky-column>\n    <sky-column [screenSmall]=\"4\" [screenXSmall]=\"12\">\n      <sky-box class=\"sky-margin-stacked-xl\">\n        <sky-box-header>\n          <h2 class=\"sky-font-heading-2\">Payments</h2>\n        </sky-box-header>\n        <sky-box-content>\n          <div class=\"box-2-content\">\n            <div class=\"box-2-actuals\">\n              <h3 class=\"sky-font-heading-4\">Actuals</h3>\n              <sky-key-info\n                [ngClass]=\"{\n                  'sky-margin-stacked-lg': i < actualPayments.length - 1\n                }\"\n                *ngFor=\"let actual of actualPayments; let i = index\"\n              >\n                <sky-key-info-value class=\"sky-font-display-3\">\n                  {{ actual.value }}\n                </sky-key-info-value>\n                <sky-key-info-label>{{ actual.category }}</sky-key-info-label>\n              </sky-key-info>\n            </div>\n            <div class=\"box-2-projected\">\n              <h3 class=\"sky-font-heading-4\">Projected</h3>\n              <sky-key-info\n                [ngClass]=\"{\n                  'sky-margin-stacked-lg': i < projectedPayments.length - 1\n                }\"\n                *ngFor=\"let projected of projectedPayments; let i = index\"\n              >\n                <sky-key-info-value class=\"sky-font-display-3\">\n                  {{ projected.value }}\n                </sky-key-info-value>\n                <sky-key-info-label>\n                  {{ projected.category }}\n                </sky-key-info-label>\n              </sky-key-info>\n            </div>\n          </div>\n        </sky-box-content>\n      </sky-box>\n    </sky-column>\n    <sky-column [screenSmall]=\"4\" [screenXSmall]=\"12\">\n      <sky-box>\n        <sky-box-header>\n          <h2 class=\"sky-font-heading-2\">Recent activity</h2>\n        </sky-box-header>\n        <sky-box-content>\n          <sky-repeater>\n            <sky-repeater-item *ngFor=\"let activity of recentActivity\">\n              <sky-repeater-item-content>\n                <div class=\"sky-margin-stacked-xs\">\n                  {{ activity.activity }}\n                </div>\n                <div class=\"sky-font-deemphasized\">{{ activity.date }}</div>\n              </sky-repeater-item-content>\n            </sky-repeater-item>\n          </sky-repeater>\n        </sky-box-content>\n      </sky-box>\n    </sky-column>\n  </sky-row>\n</sky-fluid-grid>\n"
+      "fileName": "list-page-list-layout-demo.module.ts",
+      "filePath": "/projects/pages/documentation/code-examples/page/list-page-list-layout-demo/list-page-list-layout-demo.module.ts",
+      "rawContents": "import { NgModule } from '@angular/core';\nimport { SkyAgGridModule } from '@skyux/ag-grid';\nimport { SkyDataManagerModule } from '@skyux/data-manager';\nimport { SkyIconModule, SkyKeyInfoModule } from '@skyux/indicators';\nimport { SkyPageModule } from '@skyux/pages';\nimport { SkyDropdownModule } from '@skyux/popovers';\n\nimport { AgGridModule } from 'ag-grid-angular';\n\nimport { DashboardGridContextMenuComponent } from './dashboards-grid-context-menu.component';\nimport { ListPageContentComponent } from './list-page-content.component';\nimport { ListPageListLayoutDemoComponent } from './list-page-list-layout-demo.component';\n\n@NgModule({\n  declarations: [\n    ListPageListLayoutDemoComponent,\n    DashboardGridContextMenuComponent,\n    ListPageContentComponent,\n  ],\n  exports: [ListPageListLayoutDemoComponent],\n  imports: [\n    SkyPageModule,\n    SkyDropdownModule,\n    SkyAgGridModule,\n    SkyDataManagerModule,\n    SkyIconModule,\n    AgGridModule,\n    SkyKeyInfoModule,\n  ],\n})\nexport class ListPageListLayoutDemoModule {}\n"
     },
     {
-      "fileName": "record-page-overview-tab.component.scss",
-      "filePath": "/projects/pages/documentation/code-examples/page/record-page-tabs-layout-demo/record-page-overview-tab.component.scss",
-      "rawContents": ".box-2-content {\n  display: flex;\n\n  div {\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n  }\n\n  .box-2-actuals {\n    margin-right: 60px;\n  }\n}\n"
+      "fileName": "list-page-list-layout-demo.component.ts",
+      "filePath": "/projects/pages/documentation/code-examples/page/list-page-list-layout-demo/list-page-list-layout-demo.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-list-page-list-layout-demo',\n  templateUrl: './list-page-list-layout-demo.component.html',\n})\nexport class ListPageListLayoutDemoComponent {}\n"
     },
     {
-      "fileName": "record-page-overview-tab.component.ts",
-      "filePath": "/projects/pages/documentation/code-examples/page/record-page-tabs-layout-demo/record-page-overview-tab.component.ts",
-      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-record-page-overview-tab',\n  templateUrl: './record-page-overview-tab.component.html',\n  styleUrls: ['./record-page-overview-tab.component.scss'],\n})\nexport class RecordPageOverviewTabComponent {\n  public recordDetails = [\n    {\n      detail: 'Designation',\n      info: 'General operating',\n    },\n    {\n      detail: 'Source',\n      info: 'Online donation form',\n    },\n    {\n      detail: 'Status',\n      info: 'Active',\n    },\n    {\n      detail: 'Due date',\n      info: '12/12/2023',\n    },\n    {\n      detail: 'Create date',\n      info: '01/05/2023',\n    },\n    {\n      detail: 'Frequency',\n      info: 'Quarterly',\n    },\n  ];\n\n  public actualPayments = [\n    {\n      category: 'Amount',\n      value: '$845.00',\n    },\n    {\n      category: 'Assigned',\n      value: '$800.00',\n    },\n    {\n      category: 'Applied',\n      value: '$800.00',\n    },\n    {\n      category: 'Payments',\n      value: 25,\n    },\n  ];\n\n  public projectedPayments = [\n    {\n      category: 'Amount',\n      value: '$0',\n    },\n    {\n      category: 'Line items',\n      value: 0,\n    },\n  ];\n\n  public recentActivity = [\n    {\n      activity: '$250.00 payment processed successfully.',\n      date: '07/01/2023 12:02 am',\n    },\n    {\n      activity: '$150.00 payment processed successfully.',\n      date: '06/15/2023 12:02 am',\n    },\n    {\n      activity: '$250.00 payment processed successfully.',\n      date: '04/01/2023 12:02 am',\n    },\n  ];\n}\n"
+      "fileName": "list-page-list-layout-demo.component.spec.ts",
+      "filePath": "/projects/pages/documentation/code-examples/page/list-page-list-layout-demo/list-page-list-layout-demo.component.spec.ts",
+      "rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { ComponentFixture, TestBed } from '@angular/core/testing';\nimport { NoopAnimationsModule } from '@angular/platform-browser/animations';\nimport { SkyPageHarness } from '@skyux/pages/testing';\n\nimport { ListPageListLayoutDemoComponent } from './list-page-list-layout-demo.component';\nimport { ListPageListLayoutDemoModule } from './list-page-list-layout-demo.module';\n\nfdescribe('List page list layout demo', async () => {\n  async function setupTest(): Promise<{\n    pageHarness: SkyPageHarness;\n    fixture: ComponentFixture<ListPageListLayoutDemoComponent>;\n  }> {\n    const fixture = TestBed.createComponent(ListPageListLayoutDemoComponent);\n\n    const loader = TestbedHarnessEnvironment.documentRootLoader(fixture);\n    const pageHarness = await loader.getHarness(SkyPageHarness);\n\n    return { pageHarness, fixture };\n  }\n\n  beforeEach(() => {\n    TestBed.configureTestingModule({\n      imports: [ListPageListLayoutDemoModule, NoopAnimationsModule],\n    });\n  });\n\n  it('should have a list layout', async () => {\n    const { pageHarness } = await setupTest();\n\n    await expectAsync(pageHarness.getLayout()).toBeResolvedTo('list');\n  });\n\n  it('should have the correct page header text', async () => {\n    const { pageHarness } = await setupTest();\n\n    const pageHeaderHarness = await pageHarness.getPageHeader();\n\n    await expectAsync(pageHeaderHarness.getPageTitle()).toBeResolvedTo(\n      'Dashboards'\n    );\n  });\n});\n"
     },
     {
-      "fileName": "record-page-tabs-layout-demo.component.html",
-      "filePath": "/projects/pages/documentation/code-examples/page/record-page-tabs-layout-demo/record-page-tabs-layout-demo.component.html",
-      "rawContents": "<sky-page layout=\"tabs\">\n  <sky-page-header pageTitle=\"Charlene Conners\">\n    <sky-page-header-alerts>\n      <sky-alert alertType=\"warning\" descriptionType=\"warning\">\n        Missing phone number for Charlene Conners.\n      </sky-alert>\n    </sky-page-header-alerts>\n    <sky-page-header-avatar>\n      <sky-avatar name=\"Charlene Conners\"> </sky-avatar>\n    </sky-page-header-avatar>\n    <sky-page-header-details>\n      <sky-label labelType=\"info\" descriptionType=\"important-info\">\n        VIP\n      </sky-label>\n    </sky-page-header-details>\n    <sky-page-header-actions>\n      <button class=\"sky-btn sky-btn-default\">Email contact</button>\n      <button class=\"sky-btn sky-btn-default\">Add to my contacts</button>\n    </sky-page-header-actions>\n  </sky-page-header>\n  <sky-page-content>\n    <app-record-page-content></app-record-page-content>\n  </sky-page-content>\n</sky-page>\n"
+      "fileName": "list-page-list-layout-demo.component.html",
+      "filePath": "/projects/pages/documentation/code-examples/page/list-page-list-layout-demo/list-page-list-layout-demo.component.html",
+      "rawContents": "<sky-page layout=\"list\">\n  <sky-page-header pageTitle=\"Dashboards\" />\n  <sky-page-content>\n    <app-list-page-content></app-list-page-content>\n  </sky-page-content>\n</sky-page>\n"
     },
     {
-      "fileName": "record-page-tabs-layout-demo.component.spec.ts",
-      "filePath": "/projects/pages/documentation/code-examples/page/record-page-tabs-layout-demo/record-page-tabs-layout-demo.component.spec.ts",
-      "rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { ComponentFixture, TestBed } from '@angular/core/testing';\nimport { NoopAnimationsModule } from '@angular/platform-browser/animations';\nimport { RouterTestingModule } from '@angular/router/testing';\nimport { SkyPageHarness } from '@skyux/pages/testing';\n\nimport { RecordPageTabsLayoutDemoComponent } from './record-page-tabs-layout-demo.component';\nimport { RecordPageTabsLayoutDemoModule } from './record-page-tabs-layout-demo.module';\n\nfdescribe('Record page tabs layout demo', async () => {\n  async function setupTest(): Promise<{\n    pageHarness: SkyPageHarness;\n    fixture: ComponentFixture<RecordPageTabsLayoutDemoComponent>;\n  }> {\n    const fixture = TestBed.createComponent(RecordPageTabsLayoutDemoComponent);\n\n    const loader = TestbedHarnessEnvironment.documentRootLoader(fixture);\n    const pageHarness = await loader.getHarness(SkyPageHarness);\n\n    return { pageHarness, fixture };\n  }\n\n  beforeEach(() => {\n    TestBed.configureTestingModule({\n      imports: [\n        NoopAnimationsModule,\n        RecordPageTabsLayoutDemoModule,\n        RouterTestingModule,\n      ],\n    });\n  });\n\n  it('should have a tabs layout', async () => {\n    const { pageHarness, fixture } = await setupTest();\n\n    fixture.detectChanges();\n\n    await expectAsync(pageHarness.getLayout()).toBeResolvedTo('tabs');\n  });\n\n  it('should have the correct page header text', async () => {\n    const { pageHarness } = await setupTest();\n\n    const pageHeaderHarness = await pageHarness.getPageHeader();\n\n    await expectAsync(pageHeaderHarness.getPageTitle()).toBeResolvedTo(\n      'Charlene Conners'\n    );\n  });\n});\n"
+      "fileName": "list-page-content.component.ts",
+      "filePath": "/projects/pages/documentation/code-examples/page/list-page-list-layout-demo/list-page-content.component.ts",
+      "rawContents": "import { Component, OnInit, inject } from '@angular/core';\nimport { SkyAgGridService } from '@skyux/ag-grid';\nimport {\n  SkyDataManagerService,\n  SkyDataManagerState,\n  SkyDataViewConfig,\n} from '@skyux/data-manager';\n\nimport { ColDef, GridOptions, ICellRendererParams } from 'ag-grid-community';\n\nimport { DashboardGridContextMenuComponent } from './dashboards-grid-context-menu.component';\n\n@Component({\n  selector: 'app-list-page-content',\n  templateUrl: './list-page-content.component.html',\n  providers: [SkyDataManagerService],\n})\nexport class ListPageContentComponent implements OnInit {\n  public items = [\n    {\n      dashboard: 'Cash Flow Tracker',\n      name: 'Kanesha Hutto',\n      lastUpdated: '06/21/2023',\n    },\n    {\n      dashboard: 'Accounts Receivable Dashboard',\n      name: 'Kristeen Lunsford',\n      lastUpdated: '06/30/2023',\n    },\n    {\n      dashboard: 'Accounts Payable Dashboard',\n      name: 'Darcel Lenz',\n      lastUpdated: '04/20/2023',\n    },\n    {\n      dashboard: 'Budget vs. Actual',\n      name: 'Barbara Durr',\n      lastUpdated: '12/04/2023',\n    },\n    {\n      dashboard: 'Balance Sheet - New',\n      name: 'Ilene Woo',\n      lastUpdated: '12/20/2023',\n    },\n    {\n      dashboard: 'Debt Management',\n      name: 'Tonja Sanderson',\n      lastUpdated: '09/10/2023',\n    },\n  ];\n  public gridOptions: GridOptions;\n\n  #dataManagerService = inject(SkyDataManagerService);\n  #agGridSvc = inject(SkyAgGridService);\n\n  #columnDefs: ColDef[] = [\n    {\n      colId: 'contextMenu',\n      headerName: '',\n      sortable: false,\n      cellRenderer: DashboardGridContextMenuComponent,\n      maxWidth: 55,\n    },\n    {\n      colId: 'dashboard',\n      field: 'dashboard',\n      headerName: 'Name',\n      width: 150,\n      cellRenderer: (params: ICellRendererParams): string => {\n        return `<a href=\"/\">${params.value}</a>`;\n      },\n    },\n    {\n      colId: 'name',\n      field: 'name',\n      headerName: 'Created By',\n    },\n    {\n      colId: 'lastUpdated',\n      field: 'lastUpdated',\n      headerName: 'Last Updated',\n    },\n  ];\n\n  #viewConfig: SkyDataViewConfig = {\n    id: 'gridView',\n    name: 'Grid View',\n    searchEnabled: true,\n  };\n\n  constructor() {\n    this.gridOptions = this.#agGridSvc.getGridOptions({\n      gridOptions: {\n        columnDefs: this.#columnDefs,\n        onGridReady: (args) => {\n          args.api.sizeColumnsToFit();\n        },\n      },\n    });\n  }\n\n  public ngOnInit(): void {\n    this.#dataManagerService.initDataManager({\n      activeViewId: 'gridView',\n      dataManagerConfig: {},\n      defaultDataState: new SkyDataManagerState({\n        views: [\n          {\n            viewId: 'gridView',\n            displayedColumnIds: [\n              'contextMenu',\n              'dashboard',\n              'name',\n              'lastUpdated',\n            ],\n          },\n        ],\n      }),\n    });\n\n    this.#dataManagerService.initDataView(this.#viewConfig);\n  }\n}\n"
     },
     {
-      "fileName": "record-page-tabs-layout-demo.component.ts",
-      "filePath": "/projects/pages/documentation/code-examples/page/record-page-tabs-layout-demo/record-page-tabs-layout-demo.component.ts",
-      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-record-page-tabs-layout-demo',\n  templateUrl: './record-page-tabs-layout-demo.component.html',\n})\nexport class RecordPageTabsLayoutDemoComponent {}\n"
+      "fileName": "list-page-content.component.html",
+      "filePath": "/projects/pages/documentation/code-examples/page/list-page-list-layout-demo/list-page-content.component.html",
+      "rawContents": "<sky-data-manager>\n  <div class=\"sky-margin-stacked-xs\">\n    <sky-data-manager-toolbar>\n      <sky-data-manager-toolbar-primary-item>\n        <button class=\"sky-btn sky-btn-default\" aria-label=\"New dashboard\">\n          <sky-icon iconType=\"skyux\" icon=\"add\"></sky-icon>\n          New\n        </button>\n      </sky-data-manager-toolbar-primary-item>\n    </sky-data-manager-toolbar>\n  </div>\n  <div class=\"sky-margin-stacked-sm\">\n    <sky-key-info layout=\"horizontal\" class=\"sky-padding-horizontal-sm\">\n      <sky-key-info-value class=\"sky-font-display-4\">\n        {{ items.length }}\n      </sky-key-info-value>\n      <sky-key-info-label> Dashboards </sky-key-info-label>\n    </sky-key-info>\n  </div>\n  <sky-data-view skyAgGridDataManagerAdapter viewId=\"gridView\">\n    <sky-ag-grid-wrapper>\n      <ag-grid-angular [gridOptions]=\"gridOptions\" [rowData]=\"items\">\n      </ag-grid-angular>\n    </sky-ag-grid-wrapper>\n  </sky-data-view>\n</sky-data-manager>\n"
     },
     {
-      "fileName": "record-page-tabs-layout-demo.module.ts",
-      "filePath": "/projects/pages/documentation/code-examples/page/record-page-tabs-layout-demo/record-page-tabs-layout-demo.module.ts",
-      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyAgGridModule } from '@skyux/ag-grid';\nimport { SkyAvatarModule } from '@skyux/avatar';\nimport { SkyDataManagerModule } from '@skyux/data-manager';\nimport {\n  SkyAlertModule,\n  SkyIconModule,\n  SkyKeyInfoModule,\n  SkyLabelModule,\n} from '@skyux/indicators';\nimport {\n  SkyBoxModule,\n  SkyDescriptionListModule,\n  SkyFluidGridModule,\n  SkyToolbarModule,\n} from '@skyux/layout';\nimport { SkyRepeaterModule, SkySortModule } from '@skyux/lists';\nimport { SkySearchModule } from '@skyux/lookup';\nimport { SkyPageModule } from '@skyux/pages';\nimport { SkyDropdownModule } from '@skyux/popovers';\nimport { SkyTabsModule } from '@skyux/tabs';\n\nimport { AgGridModule } from 'ag-grid-angular';\n\nimport { AttachmentsGridContextMenuComponent } from './attachments-grid-context-menu.component';\nimport { RecordPageAttachmentsTabComponent } from './record-page-attachments-tab.component';\nimport { RecordPageContentComponent } from './record-page-content.component';\nimport { RecordPageNotesTabComponent } from './record-page-notes-tab.component';\nimport { RecordPageOverviewTabComponent } from './record-page-overview-tab.component';\nimport { RecordPageTabsLayoutDemoComponent } from './record-page-tabs-layout-demo.component';\n\n@NgModule({\n  declarations: [\n    AttachmentsGridContextMenuComponent,\n    RecordPageAttachmentsTabComponent,\n    RecordPageContentComponent,\n    RecordPageNotesTabComponent,\n    RecordPageOverviewTabComponent,\n    RecordPageTabsLayoutDemoComponent,\n  ],\n  exports: [RecordPageTabsLayoutDemoComponent],\n  imports: [\n    AgGridModule,\n    CommonModule,\n    SkyAgGridModule,\n    SkyAlertModule,\n    SkyAvatarModule,\n    SkyBoxModule,\n    SkyDataManagerModule,\n    SkyDescriptionListModule,\n    SkyDropdownModule,\n    SkyFluidGridModule,\n    SkyIconModule,\n    SkyKeyInfoModule,\n    SkyLabelModule,\n    SkyPageModule,\n    SkyRepeaterModule,\n    SkySearchModule,\n    SkySortModule,\n    SkyTabsModule,\n    SkyToolbarModule,\n  ],\n})\nexport class RecordPageTabsLayoutDemoModule {}\n"
+      "fileName": "dashboards-grid-context-menu.component.ts",
+      "filePath": "/projects/pages/documentation/code-examples/page/list-page-list-layout-demo/dashboards-grid-context-menu.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\n\nimport { ICellRendererAngularComp } from 'ag-grid-angular';\nimport { ICellRendererParams } from 'ag-grid-community';\n\n@Component({\n  selector: 'app-dashboards-grid-context-menu',\n  templateUrl: './dashboards-grid-context-menu.component.html',\n})\nexport class DashboardGridContextMenuComponent\n  implements ICellRendererAngularComp\n{\n  public dashboardName = '';\n\n  public agInit(params: ICellRendererParams): void {\n    this.dashboardName = params.data && params.data.dashboard;\n  }\n\n  public refresh(): boolean {\n    return false;\n  }\n}\n"
     },
     {
-      "fileName": "split-view-page-content.component.html",
-      "filePath": "/projects/pages/documentation/code-examples/page/split-view-page-fit-layout-demo/split-view-page-content.component.html",
-      "rawContents": "<sky-split-view dock=\"fill\" [messageStream]=\"splitViewStream\">\n  <sky-split-view-drawer [ariaLabel]=\"'Transaction list'\" [width]=\"listWidth\">\n    <sky-repeater [activeIndex]=\"activeIndex\">\n      <sky-repeater-item\n        *ngFor=\"let item of items; let i = index\"\n        (click)=\"onItemClick(i)\"\n        (keyup.enter)=\"onItemClick(i)\"\n      >\n        <sky-repeater-item-content>\n          {{ item.amount }} <br />\n          {{ item.date }} <br />\n          {{ item.vendor }}\n        </sky-repeater-item-content>\n      </sky-repeater-item>\n    </sky-repeater>\n  </sky-split-view-drawer>\n\n  <sky-split-view-workspace ariaLabel=\"Transaction form\">\n    <sky-split-view-workspace-content class=\"sky-padding-even-large\">\n      <form [formGroup]=\"splitViewDemoForm\" (ngSubmit)=\"onApprove()\">\n        <sky-description-list class=\"sky-margin-stacked-xl\">\n          <sky-description-list-content>\n            <sky-description-list-term>\n              Receipt amount\n            </sky-description-list-term>\n            <sky-description-list-description>\n              {{ activeRecord.amount }}\n            </sky-description-list-description>\n          </sky-description-list-content>\n          <sky-description-list-content>\n            <sky-description-list-term> Date </sky-description-list-term>\n            <sky-description-list-description>\n              {{ activeRecord.date }}\n            </sky-description-list-description>\n          </sky-description-list-content>\n          <sky-description-list-content>\n            <sky-description-list-term> Vendor </sky-description-list-term>\n            <sky-description-list-description>\n              {{ activeRecord.vendor }}\n            </sky-description-list-description>\n          </sky-description-list-content>\n          <sky-description-list-content>\n            <sky-description-list-term>\n              Receipt image\n            </sky-description-list-term>\n            <sky-description-list-description>\n              {{ activeRecord.receiptImage }}\n            </sky-description-list-description>\n          </sky-description-list-content>\n        </sky-description-list>\n        <div class=\"sky-form-group\">\n          <sky-input-box>\n            <label class=\"sky-control-label\" [for]=\"amountInput.id\">\n              Approved amount\n            </label>\n            <input\n              class=\"sky-form-control\"\n              formControlName=\"approvedAmount\"\n              name=\"approvedAmount\"\n              type=\"text\"\n              skyId\n              #amountInput\n            />\n          </sky-input-box>\n        </div>\n\n        <div class=\"sky-form-group\">\n          <sky-input-box>\n            <label class=\"sky-control-label\" [for]=\"commentsInput.id\">\n              Comments\n            </label>\n            <textarea\n              class=\"sky-form-control\"\n              formControlName=\"comments\"\n              name=\"comments\"\n              skyId\n              #commentsInput\n            ></textarea>\n          </sky-input-box>\n        </div>\n      </form>\n    </sky-split-view-workspace-content>\n    <sky-split-view-workspace-footer>\n      <sky-summary-action-bar id=\"summary-action-bar\">\n        <sky-summary-action-bar-actions>\n          <sky-summary-action-bar-primary-action (actionClick)=\"onApprove()\">\n            Approve expense\n          </sky-summary-action-bar-primary-action>\n          <sky-summary-action-bar-secondary-actions>\n            <sky-summary-action-bar-secondary-action (actionClick)=\"onDeny()\">\n              Deny expense\n            </sky-summary-action-bar-secondary-action>\n          </sky-summary-action-bar-secondary-actions>\n        </sky-summary-action-bar-actions>\n      </sky-summary-action-bar>\n    </sky-split-view-workspace-footer>\n  </sky-split-view-workspace>\n</sky-split-view>\n"
+      "fileName": "dashboards-grid-context-menu.component.html",
+      "filePath": "/projects/pages/documentation/code-examples/page/list-page-list-layout-demo/dashboards-grid-context-menu.component.html",
+      "rawContents": "<sky-dropdown\n  buttonType=\"context-menu\"\n  [label]=\"'context menu for ' + dashboardName\"\n>\n  <sky-dropdown-menu>\n    <sky-dropdown-item>\n      <button type=\"button\" [attr.aria-label]=\"'Edit ' + dashboardName\">\n        Edit\n      </button>\n    </sky-dropdown-item>\n    <sky-dropdown-item>\n      <button type=\"button\" [attr.aria-label]=\"'Copy ' + dashboardName\">\n        Copy\n      </button>\n    </sky-dropdown-item>\n    <sky-dropdown-item>\n      <button type=\"button\" [attr.aria-label]=\"'Delete ' + dashboardName\">\n        Delete\n      </button>\n    </sky-dropdown-item>\n  </sky-dropdown-menu>\n</sky-dropdown>\n"
     },
     {
-      "fileName": "split-view-page-content.component.ts",
-      "filePath": "/projects/pages/documentation/code-examples/page/split-view-page-fit-layout-demo/split-view-page-content.component.ts",
-      "rawContents": "import { Component, inject } from '@angular/core';\nimport { FormBuilder } from '@angular/forms';\nimport { SkyConfirmService, SkyConfirmType } from '@skyux/modals';\nimport {\n  SkySplitViewMessage,\n  SkySplitViewMessageType,\n} from '@skyux/split-view';\n\nimport { Subject } from 'rxjs';\n\ninterface WorkspaceItem {\n  id: number;\n  amount: number;\n  date: string;\n  vendor: string;\n  receiptImage: string;\n  approvedAmount: number;\n  comments: string;\n}\n\n@Component({\n  selector: 'app-split-view-page-content',\n  templateUrl: './split-view-page-content.component.html',\n})\nexport class SplitViewPageContentComponent {\n  protected set activeIndex(value: number) {\n    this.#_activeIndex = value;\n    this.activeRecord = this.items[this.#_activeIndex];\n    this.#loadFormGroup(this.activeRecord);\n  }\n\n  protected get activeIndex(): number {\n    return this.#_activeIndex;\n  }\n\n  protected items: WorkspaceItem[] = [\n    {\n      id: 1,\n      amount: 73.19,\n      date: '5/13/2020',\n      vendor: 'amazon.com',\n      receiptImage: 'amzn-office-supply-order-5-13-19.png',\n      approvedAmount: 73.19,\n      comments: '',\n    },\n    {\n      id: 2,\n      amount: 214.12,\n      date: '5/14/2020',\n      vendor: 'Office Max',\n      receiptImage: 'office-max-order.png',\n      approvedAmount: 214.12,\n      comments: '',\n    },\n    {\n      id: 3,\n      amount: 29.99,\n      date: '5/14/2020',\n      vendor: 'amazon.com',\n      receiptImage: 'amzn-office-supply-order-5-14-19.png',\n      approvedAmount: 29.99,\n      comments: '',\n    },\n    {\n      id: 4,\n      amount: 1500,\n      date: '5/15/2020',\n      vendor: 'Fresh Catering, LLC',\n      receiptImage: 'fresh-catering-llc-order.png',\n      approvedAmount: 1500,\n      comments: '',\n    },\n    {\n      id: 5,\n      amount: 456.24,\n      date: '5/16/2020',\n      vendor: 'Wish',\n      receiptImage: 'wish-delivery-order.png',\n      approvedAmount: 456.24,\n      comments: '',\n    },\n    {\n      id: 6,\n      amount: 62.37,\n      date: '5/16/2020',\n      vendor: 'Staples',\n      receiptImage: 'staples-paper-bulk-order.png',\n      approvedAmount: 62.37,\n      comments: '',\n    },\n    {\n      id: 7,\n      amount: 51.84,\n      date: '5/17/2020',\n      vendor: 'amazon.com',\n      receiptImage: 'amzn-office-supply-order-5-17-19.png',\n      approvedAmount: 51.84,\n      comments: '',\n    },\n    {\n      id: 8,\n      amount: 92.55,\n      date: '5/18/2020',\n      vendor: 'Home Depot',\n      receiptImage: 'home-depot-order.png',\n      approvedAmount: 0.0,\n      comments: '',\n    },\n    {\n      id: 9,\n      amount: 38.29,\n      date: '5/18/2020',\n      vendor: 'Papa Johns',\n      receiptImage: 'papa-johns-order.png',\n      approvedAmount: 38.29,\n      comments: '',\n    },\n  ];\n\n  protected activeRecord = this.items[0];\n  protected listWidth: number | undefined;\n  protected splitViewStream = new Subject<SkySplitViewMessage>();\n\n  protected splitViewDemoForm = inject(FormBuilder).group({\n    approvedAmount: [this.activeRecord.approvedAmount],\n    comments: [this.activeRecord.comments],\n  });\n\n  #_activeIndex = 0;\n\n  #confirmSvc = inject(SkyConfirmService);\n\n  protected onItemClick(index: number): void {\n    // Prevent workspace from loading new data if the current workspace form is dirty.\n    if (this.splitViewDemoForm.dirty && index !== this.activeIndex) {\n      this.#openConfirmModal(index);\n    } else {\n      this.#loadWorkspace(index);\n    }\n  }\n\n  protected onApprove(): void {\n    console.log('Approved clicked!');\n    this.#saveForm();\n  }\n\n  protected onDeny(): void {\n    console.log('Denied clicked!');\n  }\n\n  #loadFormGroup(record: WorkspaceItem): void {\n    this.splitViewDemoForm.setValue({\n      approvedAmount: record.approvedAmount,\n      comments: record.comments,\n    });\n  }\n\n  #loadWorkspace(index: number): void {\n    this.activeIndex = index;\n    this.#setFocusInWorkspace();\n  }\n\n  #openConfirmModal(index: number): void {\n    this.#confirmSvc\n      .open({\n        message:\n          'You have unsaved work. Would you like to save it before you change records?',\n        type: SkyConfirmType.Custom,\n        buttons: [\n          {\n            action: 'yes',\n            text: 'Yes',\n            styleType: 'primary',\n          },\n          {\n            action: 'discard',\n            text: 'Discard changes',\n            styleType: 'link',\n          },\n        ],\n      })\n      .closed.subscribe((closeArgs) => {\n        if (closeArgs.action === 'yes') {\n          this.#saveForm();\n        }\n\n        this.#loadWorkspace(index);\n      });\n  }\n\n  #saveForm(): void {\n    this.activeRecord = Object.assign(\n      this.activeRecord,\n      this.splitViewDemoForm.value\n    );\n\n    this.splitViewDemoForm.markAsPristine();\n  }\n\n  #setFocusInWorkspace(): void {\n    this.splitViewStream.next({\n      type: SkySplitViewMessageType.FocusWorkspace,\n    });\n  }\n}\n"
+      "fileName": "settings-modal.component.ts",
+      "filePath": "/projects/pages/documentation/code-examples/action-hub/settings-modal.component.ts",
+      "rawContents": "import { Component, Inject } from '@angular/core';\nimport {\n  AbstractControl,\n  UntypedFormBuilder,\n  UntypedFormGroup,\n} from '@angular/forms';\nimport { SkyModalInstance } from '@skyux/modals';\n\n@Component({\n  selector: 'app-settings-modal',\n  templateUrl: './settings-modal.component.html',\n})\nexport class SettingsModalComponent {\n  public form: UntypedFormGroup;\n  public fields: string[] = [];\n\n  constructor(\n    fb: UntypedFormBuilder,\n    public modal: SkyModalInstance,\n    @Inject('modalTitle') public title: string\n  ) {\n    const controls: Record<string, AbstractControl> = {};\n    for (let i = 1; i <= 5; i++) {\n      const field = `${this.title} ${i}`;\n      this.fields.push(field);\n      controls[field] = fb.control('');\n    }\n    this.form = fb.group(controls);\n    this.modal.closed.subscribe((args) => {\n      if (args.reason === 'save') {\n        console.log(this.form.value);\n      }\n    });\n  }\n}\n"
     },
     {
-      "fileName": "split-view-page-fit-layout-demo.component.html",
-      "filePath": "/projects/pages/documentation/code-examples/page/split-view-page-fit-layout-demo/split-view-page-fit-layout-demo.component.html",
-      "rawContents": "<sky-page layout=\"fit\">\n  <sky-page-header\n    pageTitle=\"Expenses to approve\"\n    [parentLink]=\"{\n      label: 'Expenses',\n      permalink: {\n        route: {\n          commands: ['/']\n        }\n      }\n    }\"\n  >\n    <sky-page-header-alerts>\n      <sky-alert alertType=\"warning\" descriptionType=\"warning\">\n        There are multpile expense approvals due soon.\n      </sky-alert>\n    </sky-page-header-alerts>\n    <sky-page-header-actions>\n      <button class=\"sky-btn sky-btn-default\">Approve all</button>\n    </sky-page-header-actions>\n  </sky-page-header>\n  <sky-page-content>\n    <app-split-view-page-content></app-split-view-page-content>\n  </sky-page-content>\n</sky-page>\n"
+      "fileName": "settings-modal.component.html",
+      "filePath": "/projects/pages/documentation/code-examples/action-hub/settings-modal.component.html",
+      "rawContents": "<sky-modal>\n  <sky-modal-header>{{ title }}</sky-modal-header>\n  <sky-modal-content>\n    <form [formGroup]=\"form\" (submit)=\"modal.save()\">\n      <ng-container *ngFor=\"let field of fields\" class=\"row\">\n        <ng-container [ngSwitch]=\"title\">\n          <ng-container *ngSwitchDefault>\n            <sky-input-box [labelText]=\"field\">\n              <input [formControlName]=\"field\" type=\"text\" />\n            </sky-input-box>\n          </ng-container>\n          <ng-container *ngSwitchCase=\"'Color'\">\n            <div class=\"sky-form-group\">\n              <label class=\"sky-control-label\" [for]=\"input.id\">{{\n                field\n              }}</label>\n              <sky-colorpicker #colorPicker>\n                <input\n                  [formControlName]=\"field\"\n                  [skyColorpickerInput]=\"colorPicker\"\n                  skyId\n                  #input=\"skyId\"\n                  type=\"text\"\n                />\n              </sky-colorpicker>\n            </div>\n          </ng-container>\n        </ng-container>\n      </ng-container>\n    </form>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      class=\"sky-btn sky-btn-primary sky-margin-inline-sm\"\n      type=\"button\"\n      (click)=\"modal.save()\"\n    >\n      Save\n    </button>\n    <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"modal.close()\">\n      Close\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n"
     },
     {
-      "fileName": "split-view-page-fit-layout-demo.component.spec.ts",
-      "filePath": "/projects/pages/documentation/code-examples/page/split-view-page-fit-layout-demo/split-view-page-fit-layout-demo.component.spec.ts",
-      "rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { ComponentFixture, TestBed } from '@angular/core/testing';\nimport { NoopAnimationsModule } from '@angular/platform-browser/animations';\nimport { RouterTestingModule } from '@angular/router/testing';\nimport { SkyPageHarness } from '@skyux/pages/testing';\n\nimport { SplitViewPageFitLayoutDemoComponent } from './split-view-page-fit-layout-demo.component';\nimport { SplitViewPageFitLayoutDemoModule } from './split-view-page-fit-layout-demo.module';\n\nfdescribe('Split view page fit layout demo', async () => {\n  async function setupTest(): Promise<{\n    pageHarness: SkyPageHarness;\n    fixture: ComponentFixture<SplitViewPageFitLayoutDemoComponent>;\n  }> {\n    const fixture = TestBed.createComponent(\n      SplitViewPageFitLayoutDemoComponent\n    );\n\n    const loader = TestbedHarnessEnvironment.documentRootLoader(fixture);\n    const pageHarness = await loader.getHarness(SkyPageHarness);\n\n    return { pageHarness, fixture };\n  }\n\n  beforeEach(() => {\n    TestBed.configureTestingModule({\n      imports: [\n        NoopAnimationsModule,\n        RouterTestingModule,\n        SplitViewPageFitLayoutDemoModule,\n      ],\n    });\n  });\n\n  it('should have a fit layout', async () => {\n    const { pageHarness, fixture } = await setupTest();\n\n    fixture.detectChanges();\n\n    await expectAsync(pageHarness.getLayout()).toBeResolvedTo('fit');\n  });\n});\n"
+      "fileName": "action-hub-demo.module.ts",
+      "filePath": "/projects/pages/documentation/code-examples/action-hub/action-hub-demo.module.ts",
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { SkyColorpickerModule } from '@skyux/colorpicker';\nimport { SkyIdModule } from '@skyux/core';\nimport { SkyInputBoxModule } from '@skyux/forms';\nimport { SkyIconModule } from '@skyux/indicators';\nimport { SkyModalModule } from '@skyux/modals';\nimport { SkyActionHubModule } from '@skyux/pages';\n\nimport { ActionHubDemoComponent } from './action-hub-demo.component';\nimport { SettingsModalComponent } from './settings-modal.component';\n\n@NgModule({\n  declarations: [ActionHubDemoComponent, SettingsModalComponent],\n  exports: [ActionHubDemoComponent],\n  imports: [\n    CommonModule,\n    SkyActionHubModule,\n    SkyColorpickerModule,\n    SkyIconModule,\n    SkyIdModule,\n    SkyInputBoxModule,\n    SkyModalModule,\n    ReactiveFormsModule,\n  ],\n})\nexport class ActionHubDemoModule {}\n"
     },
     {
-      "fileName": "split-view-page-fit-layout-demo.component.ts",
-      "filePath": "/projects/pages/documentation/code-examples/page/split-view-page-fit-layout-demo/split-view-page-fit-layout-demo.component.ts",
-      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-split-view-page-fit-layout-demo',\n  templateUrl: './split-view-page-fit-layout-demo.component.html',\n})\nexport class SplitViewPageFitLayoutDemoComponent {}\n"
+      "fileName": "action-hub-demo.component.ts",
+      "filePath": "/projects/pages/documentation/code-examples/action-hub/action-hub-demo.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\nimport { SkyPageModalLinksInput } from '@skyux/pages';\n\nimport { SettingsModalComponent } from './settings-modal.component';\n\nconst pastHours = Array.from(Array(5).keys()).map((i) => {\n  const date = new Date();\n  date.setHours(date.getHours() - (i + 1));\n  return date;\n});\n\n@Component({\n  selector: 'app-action-hub-visual',\n  templateUrl: './action-hub-demo.component.html',\n})\nexport class ActionHubDemoComponent {\n  public buttons = [\n    {\n      label: 'Action 1',\n      permalink: {\n        url: '#',\n      },\n    },\n    {\n      label: 'Action 2',\n      permalink: {\n        url: '#',\n      },\n    },\n    {\n      label: 'Action 3',\n      permalink: {\n        url: '#',\n      },\n    },\n  ];\n\n  public needsAttention = [\n    {\n      title: '9',\n      message: 'updates from portal',\n      permalink: {\n        url: '#',\n      },\n    },\n    {\n      title: '8',\n      message: 'new messages from online donation',\n      permalink: {\n        url: '#',\n      },\n    },\n    {\n      title: '7',\n      message: 'possible duplicates from constituent lists',\n      permalink: {\n        url: '#',\n      },\n    },\n    {\n      title: '6',\n      message: 'updates from portal',\n      permalink: {\n        url: '#',\n      },\n    },\n    {\n      title: '5',\n      message: 'new messages from online donation',\n      permalink: {\n        url: '#',\n      },\n    },\n    {\n      title: '4',\n      message: 'possible duplicates from constituent lists',\n      permalink: {\n        url: '#',\n      },\n    },\n    {\n      title: '3',\n      message: 'update from portal',\n      permalink: {\n        url: '#',\n      },\n    },\n    {\n      title: '2',\n      message: 'new messages from online donation',\n      permalink: {\n        url: '#',\n      },\n    },\n    {\n      title: '1',\n      message: 'possible duplicate from constituent lists',\n      permalink: {\n        url: '#',\n      },\n    },\n  ];\n\n  public recentLinks = [\n    {\n      label: 'Recent 1',\n      permalink: {\n        url: '#',\n      },\n      lastAccessed: pastHours[0],\n    },\n    {\n      label: 'Recent 2',\n      permalink: {\n        url: '#',\n      },\n      lastAccessed: pastHours[1],\n    },\n    {\n      label: 'Recent 3',\n      permalink: {\n        url: '#',\n      },\n      lastAccessed: pastHours[2],\n    },\n    {\n      label: 'Recent 4',\n      permalink: {\n        url: '#',\n      },\n      lastAccessed: pastHours[3],\n    },\n    {\n      label: 'Recent 5',\n      permalink: {\n        url: '#',\n      },\n      lastAccessed: pastHours[4],\n    },\n  ];\n\n  public relatedLinks = [\n    {\n      label: 'Link 1',\n      permalink: {\n        url: '#',\n      },\n    },\n    {\n      label: 'Link 2',\n      permalink: {\n        url: '#',\n      },\n    },\n    {\n      label: 'Link 3',\n      permalink: {\n        url: '#',\n      },\n    },\n  ];\n\n  public settingsLinks: SkyPageModalLinksInput = [\n    {\n      label: 'Number',\n      modal: {\n        component: SettingsModalComponent,\n        config: {\n          size: 'large',\n          providers: [\n            {\n              provide: 'modalTitle',\n              useValue: 'Number',\n            },\n          ],\n        },\n      },\n    },\n    {\n      label: 'Color',\n      modal: {\n        component: SettingsModalComponent,\n        config: {\n          size: 'large',\n          providers: [\n            {\n              provide: 'modalTitle',\n              useValue: 'Color',\n            },\n          ],\n        },\n      },\n    },\n  ];\n\n  public title = 'Page title';\n}\n"
     },
     {
-      "fileName": "split-view-page-fit-layout-demo.module.ts",
-      "filePath": "/projects/pages/documentation/code-examples/page/split-view-page-fit-layout-demo/split-view-page-fit-layout-demo.module.ts",
-      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { SkySummaryActionBarModule } from '@skyux/action-bars';\nimport { SkyInputBoxModule } from '@skyux/forms';\nimport { SkyAlertModule } from '@skyux/indicators';\nimport { SkyDescriptionListModule } from '@skyux/layout';\nimport { SkyRepeaterModule } from '@skyux/lists';\nimport { SkyPageModule } from '@skyux/pages';\nimport { SkySplitViewModule } from '@skyux/split-view';\n\nimport { SplitViewPageContentComponent } from './split-view-page-content.component';\nimport { SplitViewPageFitLayoutDemoComponent } from './split-view-page-fit-layout-demo.component';\n\n@NgModule({\n  declarations: [\n    SplitViewPageFitLayoutDemoComponent,\n    SplitViewPageContentComponent,\n  ],\n  exports: [SplitViewPageFitLayoutDemoComponent],\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    SkyAlertModule,\n    SkyDescriptionListModule,\n    SkyInputBoxModule,\n    SkyPageModule,\n    SkyRepeaterModule,\n    SkySplitViewModule,\n    SkySummaryActionBarModule,\n  ],\n})\nexport class SplitViewPageFitLayoutDemoModule {}\n"
+      "fileName": "action-hub-demo.component.html",
+      "filePath": "/projects/pages/documentation/code-examples/action-hub/action-hub-demo.component.html",
+      "rawContents": "<sky-action-hub\n  [needsAttention]=\"needsAttention\"\n  [recentLinks]=\"recentLinks\"\n  [relatedLinks]=\"relatedLinks\"\n  [settingsLinks]=\"settingsLinks\"\n  [title]=\"title\"\n>\n  <sky-action-hub-buttons>\n    <a\n      *ngFor=\"let button of buttons\"\n      class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n      [href]=\"button.permalink.url\"\n    >\n      {{ button.label }}\n    </a>\n  </sky-action-hub-buttons>\n\n  <sky-action-hub-content>\n    <h2 class=\"sky-font-heading-2\">Additional content</h2>\n    <p>More content can go here as needed for the functional area.</p>\n  </sky-action-hub-content>\n</sky-action-hub>\n"
     }
   ]
 }