### Card with basic setup example

Source: https://github.com/blackbaud/skyux-skills/blob/main/skills/skyux-sidekick/references/skyux/components/card.md

Example of how to implement a card with basic setup in an Angular component.

```APIDOC
## Card with basic setup

### example.component.ts (primary file)

```typescript
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { SkyCheckboxModule } from '@skyux/forms';
import { SkyCardModule } from '@skyux/layout';
import { SkyDropdownModule } from '@skyux/popovers';

/**
 * @title Card with basic setup
 */
@Component({
  selector: 'app-layout-card-basic-example',
  templateUrl: './example.component.html',
  imports: [FormsModule, SkyCardModule, SkyCheckboxModule, SkyDropdownModule],
})
export class LayoutCardBasicExampleComponent {
  protected showAction = true;
  protected showCheckbox = true;
  protected showContent = true;
  protected showTitle = true;

  protected triggerAlert(): void {
    alert('Action clicked!');
  }
}
```
```

--------------------------------

### Alert with basic setup

Source: https://github.com/blackbaud/skyux-skills/blob/main/skills/skyux-sidekick/references/skyux/components/alert.md

Example of how to implement a basic alert with dynamic properties.

```APIDOC
### Alert with basic setup

#### example.component.ts (primary file)

```typescript
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { SkyAlertModule } from '@skyux/indicators';

/**
 * @title Alert with basic setup
 */
@Component({
  selector: 'app-indicators-alert-basic-example',
  templateUrl: './example.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [SkyAlertModule],
})
export class IndicatorsAlertBasicExampleComponent {
  @Input()
  public days = 9;

  protected onClosedChange(event: boolean): void {
    alert(`Alert closed with: ${event}`);
  }
}
```

#### example.component.html

```html
<sky-alert
  data-sky-id="alert-example"
  [alertType]="days < 8 ? 'danger' : 'warning'"
  [closeable]="days >= 8"
  [descriptionType]="days < 8 ? 'danger' : 'important-warning'"
  (closedChange)="onClosedChange($event)"
>
  Your password expires in {{ days }} day(s)!
</sky-alert>
```
```

--------------------------------

### Alert with basic setup

Source: https://github.com/blackbaud/skyux-skills/blob/main/skills/skyux-sidekick/references/skyux/components/alert.md

This example demonstrates a basic alert setup with dynamic configuration based on input properties. It includes an event handler for when the alert is closed.

```typescript
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { SkyAlertModule } from '@skyux/indicators';

/**
 * @title Alert with basic setup
 */
@Component({
  selector: 'app-indicators-alert-basic-example',
  templateUrl: './example.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [SkyAlertModule],
})
export class IndicatorsAlertBasicExampleComponent {
  @Input()
  public days = 9;

  protected onClosedChange(event: boolean): void {
    alert(`Alert closed with: ${event}`);
  }
}
```

```html
<sky-alert
  data-sky-id="alert-example"
  [alertType]="days < 8 ? 'danger' : 'warning'"
  [closeable]="days >= 8"
  [descriptionType]="days < 8 ? 'danger' : 'important-warning'"
  (closedChange)="onClosedChange($event)"
>
  Your password expires in {{ days }} day(s)!
</sky-alert>
```

--------------------------------

### Label with basic setup

Source: https://github.com/blackbaud/skyux-skills/blob/main/skills/skyux-sidekick/references/skyux/components/label.md

Example of how to implement a label component with basic setup in an Angular application.

```APIDOC
## Code Examples

### Label with basic setup

#### example.component.ts (primary file)

```typescript
import { Component, Input } from '@angular/core';
import { SkyIndicatorDescriptionType, SkyLabelModule, SkyLabelType } from '@skyux/indicators';

/**
 * @title Label with basic setup
 */
@Component({
  selector: 'app-indicators-label-basic-example',
  templateUrl: './example.component.html',
  imports: [SkyLabelModule],
})
export class IndicatorsLabelBasicExampleComponent {
  @Input()
  public get daysUntilDue(): number {
    return this.#_daysUntilDue;
  }

  public set daysUntilDue(days: number) {
    this.#_daysUntilDue = days;
    this.#updateLabelProperties(this.submitted, days);
  }

  @Input()
  public get submitted(): boolean {
    return this.#_submitted;
  }

  public set submitted(submitted: boolean) {
    this.#_submitted = submitted;
    this.#updateLabelProperties(submitted, this.daysUntilDue);
  }

  protected descriptionType: SkyIndicatorDescriptionType = 'attention';
  protected labelText = 'Incomplete';
  protected labelType: SkyLabelType = 'info';

  #_daysUntilDue = 14;
  #_submitted = false;

  #updateLabelProperties(submitted: boolean, days: number): void {
    if (submitted) {
      this.labelType = 'success';
      this.descriptionType = 'completed';
      this.labelText = 'Submitted';
    } else if (days <= 0) {
      this.labelType = 'danger';
      this.descriptionType = 'danger';
      this.labelText = 'Overdue';
    } else if (days <= 7) {
      this.labelType = 'warning';
      this.descriptionType = 'important-warning';
      this.labelText = 'Due soon';
    } else {
      this.labelType = 'info';
      this.descriptionType = 'attention';
      this.labelText = 'Incomplete';
    }
  }
}
```

#### example.component.html

```html
<sky-label data-sky-id="label-example" [descriptionType]="descriptionType" [labelType]="labelType">
  {{ labelText }}
</sky-label>
```
```

--------------------------------

### Modal with basic setup, tested with controller

Source: https://github.com/blackbaud/skyux-skills/blob/main/skills/skyux-sidekick/references/skyux/components/modal.md

This example demonstrates opening a modal with basic setup and testing it using the controller. It includes handling before-close events and potential errors.

```typescript
import { Component, OnDestroy, inject } from '@angular/core';
import { SkyHelpService } from '@skyux/core';
import { SkyModalError, SkyModalInstance, SkyModalService } from '@skyux/modals';

import { MyHelpService } from './help.service';
import { ModalContext } from './modal-context';
import { ModalComponent } from './modal.component';

/**
 * @title Modal with basic setup, tested with controller
 */
@Component({
  selector: 'app-modals-modal-basic-with-controller-example',
  template: `<button class="sky-btn sky-btn-default" type="button" (click)="openModal()">Open modal</button>`, 
})
export class ModalsModalBasicWithControllerExampleComponent implements OnDestroy {
  public hasErrors = false;

  protected errors: SkyModalError[] = [];

  readonly #instances: SkyModalInstance[] = [];
  readonly #modalSvc = inject(SkyModalService);

  public ngOnDestroy(): void {
    this.#instances.forEach((i) => {
      i.close();
    });
  }

  public openModal(): void {
    const instance = this.#modalSvc.open(ModalComponent, {
      providers: [
        {
          provide: ModalContext,
          useValue: { value1: 'Hello!' },
        },
        // NOTE: The help service is normally provided at the application root, but
        // it is added here purely for demonstration purposes.
        // See: https://developer.blackbaud.com/skyux/learn/develop/global-help
        {
          provide: SkyHelpService,
          useExisting: MyHelpService,
        },
      ],
    });

    instance.beforeClose.subscribe((handler) => {
      if (this.hasErrors && handler.closeArgs.reason !== 'cancel') {
        this.errors = [
          {
            message: 'Something bad happened.',
          },
        ];
      } else {
        handler.closeModal();
      }
    });

    this.#instances.push(instance);
  }
}

```

--------------------------------

### Text highlight with basic setup

Source: https://github.com/blackbaud/skyux-skills/blob/main/skills/skyux-sidekick/references/skyux/components/text-highlight.md

Example demonstrating how to use the text highlight directive with basic setup, including input binding for the search term and conditional display of additional content.

```APIDOC
### Text highlight with basic setup

#### example.component.ts (primary file)

```typescript
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { SkyCheckboxModule, SkyInputBoxModule } from '@skyux/forms';
import { SkyTextHighlightModule } from '@skyux/indicators';

/**
 * @title Text highlight with basic setup
 */
@Component({
  selector: 'app-indicators-text-highlight-basic-example',
  templateUrl: './example.component.html',
  imports: [FormsModule, SkyCheckboxModule, SkyInputBoxModule, SkyTextHighlightModule],
})
export class IndicatorsTextHighlightBasicExampleComponent {
  protected searchTerm = '';
  protected showAdditionalContent = false;
}
```

#### example.component.html

```html
<div class="sky-theme-margin-bottom-l">
  <sky-input-box labelText="Text to highlight" [stacked]="true">
    <input type="text" [(ngModel)]="searchTerm" />
  </sky-input-box>
</div>

<div class="sky-theme-margin-bottom-l">
  <sky-checkbox labelText="Display additional content" [(ngModel)]="showAdditionalContent" />
</div>

<div [skyHighlight]="searchTerm">
  The text that you enter is highlighted here. @if (showAdditionalContent) {
  <div>This additional content is highlighted too!</div>
  }
</div>
```
```

--------------------------------

### Text expand repeater with basic setup

Source: https://github.com/blackbaud/skyux-skills/blob/main/skills/skyux-sidekick/references/skyux/components/text-expand-repeater.md

This example demonstrates the basic setup for the text expand repeater component, showing how to provide data and an item template.

```html
<sky-text-expand-repeater
  [data]="items"
  [maxItems]="3">
  <ng-template #itemTemplate let-item>
    {{ item.name }}
  </ng-template>
</sky-text-expand-repeater>
```

--------------------------------

### Dropdown with basic setup

Source: https://github.com/blackbaud/skyux-skills/blob/main/skills/skyux-sidekick/references/skyux/components/dropdown.md

Example of a basic dropdown component setup in SKY UX.

```APIDOC
## Code Examples

### Dropdown with basic setup

#### example.component.ts (primary file)

```typescript
import { Component } from '@angular/core';
import { SkyDropdownModule } from '@skyux/popovers';

interface DropdownItem {
  name: string;
  disabled: boolean;
}

/**
 * @title Dropdown with basic setup
 */
@Component({
  selector: 'app-popovers-dropdown-basic-example',
  templateUrl: './example.component.html',
  imports: [SkyDropdownModule],
})
export class PopoversDropdownBasicExampleComponent {
  protected items: DropdownItem[] = [
    { name: 'Option 1', disabled: false },
    { name: 'Disabled option', disabled: true },
    { name: 'Option 3', disabled: false },
    { name: 'Option 4', disabled: false },
    { name: 'Option 5', disabled: false },
  ];

  public actionClicked(action: string): void {
    alert(`You selected ${action}.`);
  }
}
```

#### example.component.html

```html
<sky-dropdown data-sky-id="dropdown-example" label="Test dropdown">
  <sky-dropdown-button> Show dropdown </sky-dropdown-button>
  <sky-dropdown-menu>
    @for (item of items; track item) {
    <sky-dropdown-item>
      <button type="button" [attr.disabled]="item.disabled ? '' : null" (click)="actionClicked(item.name)">
        {{ item.name }}
      </button>
    </sky-dropdown-item>
    }
  </sky-dropdown-menu>
</sky-dropdown>
<br />
<sky-dropdown buttonType="context-menu" label="Code example context menu">
  <sky-dropdown-menu>
    @for (item of items; track item) {
    <sky-dropdown-item>
      <button type="button" [attr.disabled]="item.disabled ? '' : null" (click)="actionClicked(item.name)">
        {{ item.name }}
      </button>
    </sky-dropdown-item>
    }
  </sky-dropdown-menu>
</sky-dropdown>
```
```

--------------------------------

### Key info with basic setup

Source: https://github.com/blackbaud/skyux-skills/blob/main/skills/skyux-sidekick/references/skyux/components/key-info.md

Example of how to set up and use the Key Info component with basic configuration.

```APIDOC
### Key info with basic setup

#### example.component.ts (primary file)

```typescript
import { Component, Input } from '@angular/core';
import { SkyKeyInfoLayoutType, SkyKeyInfoModule } from '@skyux/indicators';

/**
 * @title Key info with basic setup
 */
@Component({
  selector: 'app-indicators-key-info-basic-example',
  templateUrl: './example.component.html',
  imports: [SkyKeyInfoModule],
})
export class IndicatorsKeyInfoBasicExampleComponent {
  @Input()
  public set value(value: number | undefined) {
    this.#_value = value;

    this.layout = this.#_value && this.#_value >= 100 ? 'vertical' : 'horizontal';
  }

  public get value(): number | undefined {
    return this.#_value;
  }

  protected layout: SkyKeyInfoLayoutType = 'vertical';

  #_value: number | undefined = 575;
}
```
```

--------------------------------

### Repeater with basic setup

Source: https://github.com/blackbaud/skyux-skills/blob/main/skills/skyux-sidekick/references/skyux/components/repeater.md

This example demonstrates a basic repeater setup with sample data and an action handler. It imports necessary modules from SKY UX lists and popovers.

```typescript
import { Component } from '@angular/core';
import { SkyRepeaterModule } from '@skyux/lists';
import { SkyDropdownModule } from '@skyux/popovers';

/**
 * @title Repeater with basic setup
 */
@Component({
  selector: 'app-lists-repeater-basic-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.scss'],
  imports: [SkyDropdownModule, SkyRepeaterModule],
})
export class ListsRepeaterBasicExampleComponent {
  protected items: {
    note: string;
    status?: string;
    title?: string;
    accessibilityLabel?: string;
  }[] = [
    {
      title: 'Call Robert Hernandez',
      note: 'Robert recently gave a very generous gift. We should call him to thank him.',
      status: 'Completed',
    },
    {
      title: 'Send invitation to Spring Ball',
      note: "The Spring Ball is coming up soon. Let's get those invitations out!",
      status: 'Past due',
    },
    {
      title: 'Assign prospects',
      note: 'There are 14 new prospects who are not assigned to fundraisers.',
      status: 'Due tomorrow',
    },
    {
      title: 'Process gift receipts',
      note: 'There are 28 recent gifts that are not receipted.',
      status: 'Due next week',
    },
    {
      note: 'Three other tasks were not displayed',
      accessibilityLabel: 'Other tasks',
    },
  ];

  protected onActionClicked(buttonText: string): void {
    alert(buttonText + ' was clicked!');
  }
}

```

--------------------------------

### Spot illustration with basic setup

Source: https://github.com/blackbaud/skyux-skills/blob/main/skills/skyux-sidekick/references/skyux/components/illustration.md

Example of how to set up and use the `sky-illustration` component with basic configuration.

```APIDOC
### Spot illustration with basic setup

#### example.component.ts (primary file)

```typescript
import { Component } from '@angular/core';
import { SkyIllustrationModule, SkyIllustrationResolverService } from '@skyux/indicators';

import { IllustrationDemoResolverService } from './illustration-demo-resolver.service';

/**
 * @title Spot illustration with basic setup
 */
@Component({
  selector: 'app-indicators-illustration-basic-example',
  templateUrl: './example.component.html',
  imports: [SkyIllustrationModule],
  // This service is provided here as an example; your implementation of `SkyIllustrationResolverService`
  // should be provided at the application level.
  providers: [
    {
      provide: SkyIllustrationResolverService,
      useClass: IllustrationDemoResolverService,
    },
  ],
})
export class IndicatorsIllustrationBasicExampleComponent {}
```

#### example.component.html

```html
<sky-illustration data-sky-id="illustration-example" name="analytics-graph" size="md" />
```
```

--------------------------------

### List summary with basic setup

Source: https://github.com/blackbaud/skyux-skills/blob/main/skills/skyux-sidekick/references/skyux/components/list-summary.md

Example demonstrating how to set up and use the list summary component with basic configuration.

```APIDOC
## Code Examples

### List summary with basic setup

#### example.component.ts (primary file)

```typescript
import { Component } from '@angular/core';
import { SkyListSummaryModule } from '@skyux/lists';

/**
 * @title List summary with basic setup
 */
@Component({
  selector: 'app-lists-list-summary-basic-example',
  templateUrl: './example.component.html',
  imports: [SkyListSummaryModule],
})
export class ListsListSummaryBasicExampleComponent {
  protected summaryItems = [
    {
      label: 'Total records',
      value: 1247,
      helpPopoverContent: 'The total number of records in the current dataset.',
      helpPopoverTitle: 'Total records help',
    },
    {
      label: 'Active items',
      value: 892,
      helpPopoverContent: 'The number of items that are currently active and available for use.',
    },
    {
      label: 'Revenue',
      value: 1234567.89,
      valueFormat: { format: 'currency' },
      helpPopoverContent: 'Total revenue generated from all active items in the current period.',
    },
    {
      label: 'Average score',
      value: 87.5,
      valueFormat: { format: 'number', digitsInfo: '1.1-1' },
    },
  ];
}
```

#### example.component.html

```html
<sky-list-summary>
  @for (item of summaryItems; track item.label) {
  <sky-list-summary-item
    [labelText]="item.label"
    [value]="item.value"
    [valueFormat]="item.valueFormat"
    [helpPopoverContent]="item.helpPopoverContent"
    [helpPopoverTitle]="item.helpPopoverTitle"
  />
  }
</sky-list-summary>
```
```

--------------------------------

### Tokens with basic setup

Source: https://github.com/blackbaud/skyux-skills/blob/main/skills/skyux-sidekick/references/skyux/components/tokens.md

Example of how to set up and use the SKY UX tokens component with basic configuration.

```APIDOC
## Code Examples

### Tokens with basic setup

#### example.component.ts (primary file)

```typescript
import { Component } from '@angular/core';
import { SkyToken, SkyTokensModule } from '@skyux/indicators';

/**
 * @title Tokens with basic setup
 */
@Component({
  selector: 'app-indicators-tokens-basic-example',
  templateUrl: './example.component.html',
  imports: [SkyTokensModule],
})
export class IndicatorsTokensBasicExampleComponent {
  public colors: SkyToken<{
    name: string;
  }>[] = [
    { value: { name: 'Red' } },
    { value: { name: 'Black' } },
    { value: { name: 'Blue' } },
    { value: { name: 'Brown' } },
    { value: { name: 'Green' } },
    { value: { name: 'Orange' } },
    { value: { name: 'Pink' } },
    { value: { name: 'Purple' } },
    { value: { name: 'Turquoise' } },
    { value: { name: 'White' } },
    { value: { name: 'Yellow' } },
  ];
}
```

#### example.component.html

```html
<sky-tokens data-sky-id="color-tokens" [(tokens)]="colors" />
```
```

--------------------------------

### Tile dashboard with basic setup

Source: https://github.com/blackbaud/skyux-skills/blob/main/skills/skyux-sidekick/references/skyux/components/tile.md

Example of setting up a basic tile dashboard component in an Angular application.

```APIDOC
## Code Examples

### Tile dashboard with basic setup

#### example.component.ts (primary file)

```typescript
import { Component } from '@angular/core';
import { SkyTileDashboardConfig, SkyTilesModule } from '@skyux/tiles';

import { Tile1Component } from './tile1.component';
import { Tile2Component } from './tile2.component';

/**
 * @title Tile dashboard with basic setup
 */
@Component({
  selector: 'app-tiles-basic-example',
  templateUrl: './example.component.html',
  imports: [SkyTilesModule],
})
export class TilesBasicExampleComponent {
  protected dashboardConfig: SkyTileDashboardConfig = {
    tiles: [
      {
        id: 'tile1',
        componentType: Tile1Component,
      },
      {
        id: 'tile2',
        componentType: Tile2Component,
      },
    ],
    layout: {
      singleColumn: {
        tiles: [
          {
            id: 'tile2',
            isCollapsed: false,
          },
          {
            id: 'tile1',
            isCollapsed: true,
          },
        ],
      },
      multiColumn: [
        {
          tiles: [
            {
              id: 'tile1',
              isCollapsed: true,
            },
          ],
        },
        {
          tiles: [
            {
              id: 'tile2',
              isCollapsed: false,
            },
          ],
        },
      ],
    },
  };
}
```

#### example.component.html

```html
<sky-tile-dashboard data-sky-id="basic-dashboard" [(config)]="dashboardConfig" />
```
```

--------------------------------

### Flyout with basic setup

Source: https://github.com/blackbaud/skyux-skills/blob/main/skills/skyux-sidekick/references/skyux/components/flyout.md

Example of how to set up and use the SkyUX Flyout component in an Angular application.

```typescript
import { Component, inject } from '@angular/core';
import { SkyFlyoutInstance, SkyFlyoutService } from '@skyux/flyout';

import { FlyoutComponent } from './flyout.component';

/**
 * @title Flyout with basic setup
 */
@Component({
  selector: 'app-flyout-basic-example',
  templateUrl: './example.component.html',
})
export class FlyoutBasicExampleComponent {
  #flyout: SkyFlyoutInstance<FlyoutComponent> | undefined;

  readonly #flyoutSvc = inject(SkyFlyoutService);

  protected closeAndRemoveFlyout(): void {
    if (this.#flyout?.isOpen) {
      this.#flyoutSvc.close();
    }

    this.#flyout = undefined;
  }

  public openFlyoutWithCustomWidth(): void {
    this.#flyout = this.#flyoutSvc.open(FlyoutComponent, {
      ariaLabelledBy: 'flyout-title',
      ariaRole: 'dialog',
      defaultWidth: 350,
      maxWidth: 500,
      minWidth: 200,
    });

    this.#flyout.closed.subscribe(() => {
      this.#flyout = undefined;
    });
  }

  protected openSimpleFlyout(): void {
    this.#flyout = this.#flyoutSvc.open(FlyoutComponent, {
      ariaLabelledBy: 'flyout-title',
      ariaRole: 'dialog',
    });

    this.#flyout.closed.subscribe(() => {
      this.#flyout = undefined;
    });
  }
}

```

```html
<button class="sky-btn sky-btn-default sky-theme-margin-right-s" type="button" (click)="openSimpleFlyout()">
  Open flyout
</button>

<button class="sky-btn sky-btn-default sky-theme-margin-right-s" type="button" (click)="openFlyoutWithCustomWidth()">
  Open flyout with custom width
</button>

<button class="sky-btn sky-btn-default" type="button" (click)="closeAndRemoveFlyout()">
  Close flyout programmatically
</button>

```

--------------------------------

### Tile dashboard with basic setup

Source: https://github.com/blackbaud/skyux-skills/blob/main/skills/skyux-sidekick/references/skyux/components/tile.md

This example demonstrates the basic setup of a tile dashboard component using SkyUX. It defines the dashboard configuration, including tile components and layout options for single and multi-column views.

```typescript
import { Component } from '@angular/core';
import { SkyTileDashboardConfig, SkyTilesModule } from '@skyux/tiles';

import { Tile1Component } from './tile1.component';
import { Tile2Component } from './tile2.component';

/**
 * @title Tile dashboard with basic setup
 */
@Component({
  selector: 'app-tiles-basic-example',
  templateUrl: './example.component.html',
  imports: [SkyTilesModule],
})
export class TilesBasicExampleComponent {
  protected dashboardConfig: SkyTileDashboardConfig = {
    tiles: [
      {
        id: 'tile1',
        componentType: Tile1Component,
      },
      {
        id: 'tile2',
        componentType: Tile2Component,
      },
    ],
    layout: {
      singleColumn: {
        tiles: [
          {
            id: 'tile2',
            isCollapsed: false,
          },
          {
            id: 'tile1',
            isCollapsed: true,
          },
        ],
      },
      multiColumn: [
        {
          tiles: [
            {
              id: 'tile1',
              isCollapsed: true,
            },
          ],
        },
        {
          tiles: [
            {
              id: 'tile2',
              isCollapsed: false,
            },
          ],
        },
      ],
    },
  };
}
```

```html
<sky-tile-dashboard data-sky-id="basic-dashboard" [(config)]="dashboardConfig" />
```

--------------------------------

### Sort with basic setup

Source: https://github.com/blackbaud/skyux-skills/blob/main/skills/skyux-sidekick/references/skyux/components/sort.md

Example component demonstrating the basic setup and usage of the SKY UX sort component, including defining sortable items and sort options, and implementing a sorting function.

```APIDOC
## Code Examples

### Sort with basic setup

#### example.component.ts (primary file)

```typescript
import { CommonModule } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { SkyToolbarModule } from '@skyux/layout';
import { SkyRepeaterModule, SkySortModule } from '@skyux/lists';

interface Item {
  title: string;
  note: string;
  assignee: string;
  date: Date;
}

interface SortOption {
  id: number;
  label: string;
  name: keyof Item;
  descending: boolean;
}

/**
 * @title Sort with basic setup
 */
@Component({
  selector: 'app-lists-sort-basic-example',
  styles: [
    '.item-wrapper {
      display: flex;
      justify-content: space-between;
    }
  '],
  templateUrl: './example.component.html',
  imports: [CommonModule, SkyRepeaterModule, SkySortModule, SkyToolbarModule],
})
export class ListsSortBasicExampleComponent implements OnInit {
  protected initialState = 3;

  protected sortedItems: Item[] = [
    {
      title: 'Call Robert Hernandez',
      note: 'Robert recently gave a very generous gift. We should call to thank him.',
      assignee: 'Debby Fowler',
      date: new Date('12/22/2015'),
    },
    {
      title: 'Send invitation to ball',
      note: "The Spring Ball is coming up soon. Let's get those invitations out!",
      assignee: 'Debby Fowler',
      date: new Date('1/1/2016'),
    },
    {
      title: 'Clean up desk',
      note: 'File and organize papers.',
      assignee: 'Tim Howard',
      date: new Date('2/2/2016'),
    },
    {
      title: 'Investigate leads',
      note: 'Check out leads for important charity event funding.',
      assignee: 'Larry Williams',
      date: new Date('4/5/2016'),
    },
    {
      title: 'Send thank you note',
      note: 'Send a thank you note to Timothy for his donation.',
      assignee: 'Catherine Hooper',
      date: new Date('11/11/2015'),
    },
  ];

  protected sortOptions: SortOption[] = [
    {
      id: 1,
      label: 'Assigned to (A - Z)',
      name: 'assignee',
      descending: false,
    },
    {
      id: 2,
      label: 'Assigned to (Z - A)',
      name: 'assignee',
      descending: true,
    },
    {
      id: 3,
      label: 'Date created (newest first)',
      name: 'date',
      descending: true,
    },
    {
      id: 4,
      label: 'Date created (oldest first)',
      name: 'date',
      descending: false,
    },
    {
      id: 5,
      label: 'Note title (A - Z)',
      name: 'title',
      descending: false,
    },
    {
      id: 6,
      label: 'Note title (Z - A)',
      name: 'title',
      descending: true,
    },
  ];

  public ngOnInit(): void {
    this.sortItems(this.sortOptions[2]);
  }

  protected sortItems(option: SortOption): void {
    this.sortedItems = this.sortedItems.sort((a, b) => {
      const descending = option.descending ? -1 : 1;
      const sortProperty: keyof typeof a = option.name;

      if (a[sortProperty] > b[sortProperty]) {
        return descending;
      } else if (a[sortProperty] < b[sortProperty]) {
        return -1 * descending;
      } else {
        return 0;
      }
    });
  }
}
```
```

--------------------------------

### Basic Icon Setup

Source: https://github.com/blackbaud/skyux-skills/blob/main/skills/skyux-sidekick/references/skyux/components/icon.md

Demonstrates the basic setup and usage of the sky-icon component with different sizes and a variant. This example shows how to import the SkyIconModule and use the sky-icon tag in an Angular template.

```typescript
import { Component } from '@angular/core';
import { SkyIconModule } from '@skyux/icon';

/**
 * @title Icon with basic setup
 */
@Component({
  selector: 'app-icon-basic-example',
  templateUrl: './example.component.html',
  imports: [SkyIconModule],
})
export class IconBasicExampleComponent {}
```

```html
<sky-icon iconName="calendar-ltr" iconSize="xxxs" />
<sky-icon iconName="calendar-ltr" iconSize="xxs" />
<sky-icon iconName="calendar-ltr" iconSize="xs" />
<sky-icon iconName="calendar-ltr" iconSize="s" />
<sky-icon iconName="calendar-ltr" />
<sky-icon iconName="calendar-ltr" iconSize="l" />
<sky-icon iconName="calendar-ltr" iconSize="xl" />
<sky-icon iconName="calendar-ltr" iconSize="xxl" />
<sky-icon iconName="calendar-ltr" iconSize="xxxl" />
<sky-icon data-sky-id="icon-example" iconName="calendar-ltr" variant="solid" iconSize="xl" />

<div>
  <sky-icon iconName="navigation" iconSize="xl" />
</div>

<div>
  <sky-icon iconName="chevron-down" iconSize="xl" />
</div>
```

--------------------------------

### Dropdown Basic Setup Example

Source: https://github.com/blackbaud/skyux-skills/blob/main/skills/skyux-sidekick/references/skyux/components/dropdown.md

Demonstrates a basic SKY UX dropdown with a list of items. Imports the necessary SKY UX module. Use this for standard dropdown implementations.

```typescript
import { Component } from '@angular/core';
import { SkyDropdownModule } from '@skyux/popovers';

interface DropdownItem {
  name: string;
  disabled: boolean;
}

/**
 * @title Dropdown with basic setup
 */
@Component({
  selector: 'app-popovers-dropdown-basic-example',
  templateUrl: './example.component.html',
  imports: [SkyDropdownModule],
})
export class PopoversDropdownBasicExampleComponent {
  protected items: DropdownItem[] = [
    { name: 'Option 1', disabled: false },
    { name: 'Disabled option', disabled: true },
    { name: 'Option 3', disabled: false },
    { name: 'Option 4', disabled: false },
    { name: 'Option 5', disabled: false },
  ];

  public actionClicked(action: string): void {
    alert(`You selected ${action}.`);
  }
}

```

```html
<sky-dropdown data-sky-id="dropdown-example" label="Test dropdown">
  <sky-dropdown-button> Show dropdown </sky-dropdown-button>
  <sky-dropdown-menu>
    @for (item of items; track item) {
    <sky-dropdown-item>
      <button type="button" [attr.disabled]="item.disabled ? '' : null" (click)="actionClicked(item.name)">
        {{ item.name }}
      </button>
    </sky-dropdown-item>
    }
  </sky-dropdown-menu>
</sky-dropdown>
<br />
<sky-dropdown buttonType="context-menu" label="Code example context menu">
  <sky-dropdown-menu>
    @for (item of items; track item) {
    <sky-dropdown-item>
      <button type="button" [attr.disabled]="item.disabled ? '' : null" (click)="actionClicked(item.name)">
        {{ item.name }}
      </button>
    </sky-dropdown-item>
    }
  </sky-dropdown-menu>
</sky-dropdown>

```

--------------------------------

### Toolbar with basic setup

Source: https://github.com/blackbaud/skyux-skills/blob/main/skills/skyux-sidekick/references/skyux/components/toolbar.md

Example of how to set up and use the SKY UX Toolbar component in an Angular application.

```APIDOC
## Code Examples

### Toolbar with basic setup

#### example.component.ts (primary file)

```typescript
import { Component } from '@angular/core';
import { SkyIconModule } from '@skyux/icon';
import { SkyToolbarModule } from '@skyux/layout';

/**
 * @title Toolbar with basic setup
 */
@Component({
  selector: 'app-layout-toolbar-basic-example',
  templateUrl: './example.component.html',
  imports: [SkyIconModule, SkyToolbarModule],
})
export class LayoutToolbarBasicExampleComponent {
  public onButtonClicked(buttonText: string): void {
    alert(buttonText + ' clicked!');
  }
}
```

#### example.component.html

```html
<sky-toolbar data-sky-id="basic-toolbar">
  <sky-toolbar-item data-sky-id="toolbar-item-1">
    <button class="sky-btn sky-btn-primary" type="button" (click)="onButtonClicked('Button 1')">Button 1</button>
  </sky-toolbar-item>
  <sky-toolbar-item data-sky-id="toolbar-item-2">
    <button class="sky-btn sky-btn-default" type="button" (click)="onButtonClicked('Button 2')">Button 2</button>
  </sky-toolbar-item>
  <sky-toolbar-view-actions>
    <button
      class="sky-btn sky-btn-default sky-btn-icon"
      title="Sort descending"
      type="button"
      (click)="onButtonClicked('Expand')"
    >
      <sky-icon iconName="chevron-double-down" />
    </button>
    <button
      class="sky-btn sky-btn-default sky-btn-icon"
      title="Sort ascending"
      type="button"
      (click)="onButtonClicked('Collapse')"
    >
      <sky-icon iconName="chevron-double-up" />
    </button>
  </sky-toolbar-view-actions>
</sky-toolbar>
```
```

--------------------------------

### Inline Form Basic Setup Example

Source: https://github.com/blackbaud/skyux-skills/blob/main/skills/skyux-sidekick/references/skyux/components/inline-form.md

Demonstrates a basic setup for an inline form in an Angular component. This includes importing necessary modules, defining form controls, and handling form open/close events.

```typescript
import { Component, inject } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { SkyInputBoxModule } from '@skyux/forms';
import { SkyIconModule } from '@skyux/icon';
import {
  SkyInlineFormButtonLayout,
  SkyInlineFormCloseArgs,
  SkyInlineFormConfig,
  SkyInlineFormModule,
} from '@skyux/inline-form';

interface DemoForm {
  firstName: FormControl<string>;
}

/**
 * @title Inline form with basic setup
 */
@Component({
  selector: 'app-inline-form-basic-example',
  templateUrl: './example.component.html',
  imports: [FormsModule, ReactiveFormsModule, SkyIconModule, SkyInlineFormModule, SkyInputBoxModule],
})
export class InlineFormBasicExampleComponent {
  protected firstName = 'Jane';
  public formGroup: FormGroup<DemoForm>;

  protected inlineFormConfig: SkyInlineFormConfig = {
    buttonLayout: SkyInlineFormButtonLayout.SaveCancel,
  };

  protected showForm = false;

  constructor() {
    this.formGroup = inject(FormBuilder).group({
      firstName: new FormControl<string>('', { nonNullable: true }),
    });
  }

  protected onInlineFormClose(args: SkyInlineFormCloseArgs): void {
    if (args.reason === 'save') {
      this.firstName = this.formGroup.value.firstName ?? '';
    }

    this.showForm = false;
    this.formGroup.patchValue({
      firstName: undefined,
    });
  }

  protected onInlineFormOpen(): void {
    this.showForm = true;
    this.formGroup.patchValue({
      firstName: this.firstName,
    });
  }
}

```

```html
<sky-inline-form
  data-sky-id="first-name"
  [config]="inlineFormConfig"
  [showForm]="showForm"
  [template]="inlineFormTemplate"
  (close)="onInlineFormClose($event)"
>
  <table>
    <tr>
      <th>First name:</th>
      <td>{{ firstName }}</td>
      <td>
        <button aria-label="Edit" class="sky-btn sky-btn-icon-borderless" type="button" (click)="onInlineFormOpen()">
          <sky-icon iconName="edit" />
        </button>
      </td>
    </tr>
  </table>
</sky-inline-form>

<ng-template #inlineFormTemplate>
  <form [formGroup]="formGroup">
    <sky-input-box labelText="First name">
      <input formControlName="firstName" type="text" />
    </sky-input-box>
  </form>
</ng-template>

```

--------------------------------

### Status indicator with basic setup

Source: https://github.com/blackbaud/skyux-skills/blob/main/skills/skyux-sidekick/references/skyux/components/status-indicator.md

Example of how to set up and use the Status Indicator component with various configurations.

```APIDOC
### Status indicator with basic setup

#### example.component.ts (primary file)

```typescript
import { Component } from '@angular/core';
import { SkyStatusIndicatorModule } from '@skyux/indicators';

/**
 * @title Status indicator with basic setup
 */
@Component({
  selector: 'app-indicators-status-indicator-basic-example',
  templateUrl: './example.component.html',
  imports: [SkyStatusIndicatorModule],
})
export class IndicatorsStatusIndicatorBasicExampleComponent {}
```

#### example.component.html

```html
<sky-status-indicator data-sky-id="status-indicator-error" descriptionType="error" indicatorType="danger">
  Danger status indicator
</sky-status-indicator>

<sky-status-indicator
  data-sky-id="status-indicator-important-info"
  descriptionType="important-info"
  indicatorType="info"
>
  Info status indicator
</sky-status-indicator>

<sky-status-indicator data-sky-id="status-indicator-completed" descriptionType="completed" indicatorType="success">
  Success status indicator
</sky-status-indicator>

<sky-status-indicator data-sky-id="status-indicator-warning" descriptionType="warning" indicatorType="warning">
  Warning status indicator
</sky-status-indicator>

<sky-status-indicator
  customDescription="Custom warning"
  data-sky-id="status-indicator-custom"
  descriptionType="custom"
  indicatorType="warning"
>
  Warning status indicator with custom screen reader description
</sky-status-indicator>

<sky-status-indicator
  data-sky-id="status-indicator-error-with-help"
  descriptionType="error"
  indicatorType="danger"
  helpPopoverContent="
    This contextual help can provide more information about
    the status as well as possible next steps."
>
  Danger status indicator with help
</sky-status-indicator>
```
```

--------------------------------

### Inline form with basic setup

Source: https://github.com/blackbaud/skyux-skills/blob/main/skills/skyux-sidekick/references/skyux/components/inline-form.md

Example of setting up and using the SKY UX inline form component with basic configuration.

```APIDOC
## Code Example: Inline form with basic setup

### example.component.ts (primary file)

```typescript
import { Component, inject } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { SkyInputBoxModule } from '@skyux/forms';
import { SkyIconModule } from '@skyux/icon';
import {
  SkyInlineFormButtonLayout,
  SkyInlineFormCloseArgs,
  SkyInlineFormConfig,
  SkyInlineFormModule,
} from '@skyux/inline-form';

interface DemoForm {
  firstName: FormControl<string>;
}

/**
 * @title Inline form with basic setup
 */
@Component({
  selector: 'app-inline-form-basic-example',
  templateUrl: './example.component.html',
  imports: [FormsModule, ReactiveFormsModule, SkyIconModule, SkyInlineFormModule, SkyInputBoxModule],
})
export class InlineFormBasicExampleComponent {
  protected firstName = 'Jane';
  public formGroup: FormGroup<DemoForm>;

  protected inlineFormConfig: SkyInlineFormConfig = {
    buttonLayout: SkyInlineFormButtonLayout.SaveCancel,
  };

  protected showForm = false;

  constructor() {
    this.formGroup = inject(FormBuilder).group({
      firstName: new FormControl<string>('', { nonNullable: true }),
    });
  }

  protected onInlineFormClose(args: SkyInlineFormCloseArgs): void {
    if (args.reason === 'save') {
      this.firstName = this.formGroup.value.firstName ?? '';
    }

    this.showForm = false;
    this.formGroup.patchValue({
      firstName: undefined,
    });
  }

  protected onInlineFormOpen(): void {
    this.showForm = true;
    this.formGroup.patchValue({
      firstName: this.firstName,
    });
  }
}
```

### example.component.html

```html
<sky-inline-form
  data-sky-id="first-name"
  [config]="inlineFormConfig"
  [showForm]="showForm"
  [template]="inlineFormTemplate"
  (close)="onInlineFormClose($event)"
>
  <table>
    <tr>
      <th>First name:</th>
      <td>{{ firstName }}</td>
      <td>
        <button aria-label="Edit" class="sky-btn sky-btn-icon-borderless" type="button" (click)="onInlineFormOpen()">
          <sky-icon iconName="edit" />
        </button>
      </td>
    </tr>
  </table>
</sky-inline-form>

<ng-template #inlineFormTemplate>
  <form [formGroup]="formGroup">
    <sky-input-box labelText="First name">
      <input formControlName="firstName" type="text" />
    </sky-input-box>
  </form>
</ng-template>
```
```

--------------------------------

### Popover with basic setup

Source: https://github.com/blackbaud/skyux-skills/blob/main/skills/skyux-sidekick/references/skyux/components/popover.md

Example of setting up and using a basic SKY UX popover in an Angular component.

```APIDOC
## Code Examples

### Popover with basic setup

#### example.component.ts (primary file)

```typescript
import { Component } from '@angular/core';
import { SkyPopoverAlignment, SkyPopoverModule, SkyPopoverPlacement } from '@skyux/popovers';

/**
 * @title Popover with basic setup
 */
@Component({
  selector: 'app-popovers-popover-basic-example',
  templateUrl: './example.component.html',
  imports: [SkyPopoverModule],
})
export class PopoversPopoverBasicExampleComponent {
  public popoverAlignment: SkyPopoverAlignment | undefined;
  public popoverBody = 'This is a popover.';
  public popoverPlacement: SkyPopoverPlacement | undefined;
  public popoverTitle: string | undefined = 'Did you know?';
}
```

#### example.component.html

```html
<button
  class="sky-btn sky-btn-default sky-theme-margin-right-s"
  data-sky-id="popover-example"
  type="button"
  [skyPopover]="myPopover"
  [skyPopoverAlignment]="popoverAlignment"
  [skyPopoverPlacement]="popoverPlacement"
>
  Open popover
</button>

<sky-popover #myPopover [popoverTitle]="popoverTitle"> {{ popoverBody }} </sky-popover>
```
```

--------------------------------

### Flyout with basic setup

Source: https://github.com/blackbaud/skyux-skills/blob/main/skills/skyux-sidekick/references/skyux/components/flyout.md

Demonstrates how to open and close a basic flyout component using the SkyFlyoutService. Includes examples for opening with default and custom widths, and programmatic closing.

```typescript
import { Component, inject } from '@angular/core';
import { SkyFlyoutInstance, SkyFlyoutService } from '@skyux/flyout';

import { FlyoutComponent } from './flyout.component';

/**
 * @title Flyout with basic setup
 */
@Component({
  selector: 'app-flyout-basic-example',
  templateUrl: './example.component.html',
})
export class FlyoutBasicExampleComponent {
  #flyout: SkyFlyoutInstance<FlyoutComponent> | undefined;

  readonly #flyoutSvc = inject(SkyFlyoutService);

  protected closeAndRemoveFlyout(): void {
    if (this.#flyout?.isOpen) {
      this.#flyoutSvc.close();
    }

    this.#flyout = undefined;
  }

  public openFlyoutWithCustomWidth(): void {
    this.#flyout = this.#flyoutSvc.open(FlyoutComponent, {
      ariaLabelledBy: 'flyout-title',
      ariaRole: 'dialog',
      defaultWidth: 350,
      maxWidth: 500,
      minWidth: 200,
    });

    this.#flyout.closed.subscribe(() => {
      this.#flyout = undefined;
    });
  }

  protected openSimpleFlyout(): void {
    this.#flyout = this.#flyoutSvc.open(FlyoutComponent, {
      ariaLabelledBy: 'flyout-title',
      ariaRole: 'dialog',
    });

    this.#flyout.closed.subscribe(() => {
      this.#flyout = undefined;
    });
  }
}
```

```html
<button class="sky-btn sky-btn-default sky-theme-margin-right-s" type="button" (click)="openSimpleFlyout()">
  Open flyout
</button>

<button class="sky-btn sky-btn-default sky-theme-margin-right-s" type="button" (click)="openFlyoutWithCustomWidth()">
  Open flyout with custom width
</button>

<button class="sky-btn sky-btn-default" type="button" (click)="closeAndRemoveFlyout()">
  Close flyout programmatically
</button>
```