### Quick Start Commands

Source: https://github.com/bullhorn/novo-elements/blob/next/README.md

Commands to clone, install, and run the project locally.

```bash
# Clone the project
git clone git@github.com:bullhorn/novo-elements.git

# Change directory
cd novo-elements

# Install
npm ci

# Start (you will need two terminals)
npm run build (builds the library, alternatively you can use npm run build:watch for live-reload)
npm start (starts the demo)

# Access the Demo in your browser at
http://localhost:4200/
```

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

### Build Examples

Source: https://github.com/bullhorn/novo-elements/blob/next/README.md

Commands to compile markdown and manage example builds.

```bash
# Compile markdown, generate routes, and AOT build the project
npm run build:examples

# Automatically rebuild changes to the examples project
npm run build:examples:watch
```

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

### Pop Over Placement Example

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/pop-over/popover-examples.md

Demonstrates the placement configuration for the Pop Over component.

```html
<code-example example="pop-over-placement"></code-example>
```

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

### Basic Quick Note Example

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/utils/quick-note/quick-note.md

Implements a standard quick note component.

```html
<code-example example="basic-quick-note"></code-example>
```

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

### Formatted Picker Example

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/form-controls/picker/picker.md

Demonstrates a picker with formatted display options.

```html
<code-example example="formatted-picker"></code-example>
```

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

### Start Development Server

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/home/home.md

Launch the local development server to view the application.

```bash
ng serve
```

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

### Tooltip Sizes Example

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/tooltip/tooltip-examples.md

Shows how to adjust the size of the tooltip container.

```html
<code-example example="tooltip-sizes"></code-example>
```

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

### Install NOVO Elements

Source: https://github.com/bullhorn/novo-elements/blob/next/README.md

Command to add the library to an existing project.

```bash
# Install the module from NPM
npm install --save novo-elements
```

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

### Switch Usage Example

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/switch/switch.md

Displays the standard implementation of the switch component.

```html
<code-example example="switch-usage"></code-example>
```

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

### Install Novo Elements

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/home/home.md

Use the Angular CLI schematic to install the library and its dependencies.

```bash
# Install
ng add novo-elements
```

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

### Dynamic Button Example

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/buttons/button-examples.md

Demonstrates buttons with parameters that can be set dynamically at runtime.

```html
<code-example example="button-dynamic"></code-example>
```

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

### Loading Button Example

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/buttons/button-examples.md

Shows the button component in a loading state with a spinner.

```html
<code-example example="button-loading"></code-example>
```

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

### Implement a basic toolbar

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/toolbar/toolbar-examples.md

Use the basic-toolbar example to render a standard toolbar component.

```html
<code-example example="basic-toolbar"></code-example>
```

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

### Pop Over Behavior Example

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/pop-over/popover-examples.md

Demonstrates various interaction behaviors for the Pop Over component.

```html
<code-example example="pop-over-behaviors"></code-example>
```

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

### Icon Button Example

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/buttons/button-examples.md

Demonstrates the icon-only button theme.

```html
<code-example example="button-icon"></code-example>
```

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

### Button Overview Example

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/buttons/button-examples.md

Displays the general overview of available button themes and configurations.

```html
<code-example example="button-overview"></code-example>
```

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

### Date Time Picker Usage Examples

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/form-controls/date-time-picker/date-time-picker-develop.md

Examples showing the deprecated standalone input usage versus the preferred novo-field implementation.

```html
<!-- Deprecated Usage -->
<novo-date-time-picker-input [(ngModel)]="dateTimeInput"></novo-date-time-picker-input>
```

```html
<!-- Preferred Usage -->
<novo-field>
  <novo-label>Date of Birth</novo-label>
  <input novoInput dateTimeFormat="iso8601" [picker]="datetimepicker" [(ngModel)]="date" />
  <novo-picker-toggle novoSuffix icon="calendar">
    <novo-date-time-picker #datetimepicker></novo-date-time-picker>
  </novo-picker-toggle>
</novo-field>
```

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

### Basic Picker Example

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/form-controls/picker/picker.md

Displays a standard picker component where options are selected from a list.

```html
<code-example example="basic-picker"></code-example>
```

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

### Example staging environment test run

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-e2e/README.md

Demonstrates running tests against a staging URL using environment variables.

```bash
E2E_BASE_URL=https://staging.example.com npm run e2e
```

```bash
export E2E_BASE_URL=https://staging.example.com
npm run e2e
npm run e2e:single button
# Variable remains set for all subsequent commands
```

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

### Customizing Week Start

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/form-controls/date-picker/date-picker-examples.md

Displays a date picker with a customized week start day.

```html
<code-example example="week-start"></code-example>
```

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

### Implement Picker Controls

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/form-controls/form/form.md

Use this example to integrate picker components into a static form.

```html
<code-example example="picker-controls"></code-example>
```

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

### Tooltip Types Example

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/tooltip/tooltip-examples.md

Demonstrates different visual styles or types of tooltips.

```html
<code-example example="tooltip-types"></code-example>
```

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

### Tooltip Options Example

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/tooltip/tooltip-examples.md

Configures various functional options for the tooltip component.

```html
<code-example example="tooltip-options"></code-example>
```

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

### Initialize Highlight.js on page load

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/demo/assets/lib/hljs/README.md

The standard setup requires linking the library and a stylesheet, then calling initHighlightingOnLoad.

```html
<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
```

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

### Basic Select Example

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/form-controls/select/select.md

Displays a standard dropdown menu for selecting a single option.

```html
<code-example example="basic-select"></code-example>
```

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

### Basic Tab Implementation

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/layouts/tabs/tabs-develop.md

Demonstrates the standard setup using novo-nav and novo-nav-outlet to link navigation tabs with their respective content.

```html
<novo-nav [outlet]="ref">
  <novo-tab>Overview</novo-tab>
  <novo-tab>Activity</novo-tab>
</novo-nav>

<novo-nav-outlet #ref>
  <novo-nav-content>
    <h1>Overview</h1>
  </novo-nav-content>
  <novo-nav-content>
    <h1>Activity</h1>
  </novo-nav-content>
</novo-nav-outlet>
```

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

### Implement File Input Controls

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/form-controls/form/form.md

Use this example to integrate file upload inputs into a static form.

```html
<code-example example="file-input-controls"></code-example>
```

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

### Display Week Start Date

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/form-controls/date-picker/week-start/week-start-example.html

Displays the formatted week start date or 'N/A' if the value is null or undefined.

```html
Value {{(weekStartDate | date) || 'N/A'}}
```

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

### Upgrade to Version 6

Source: https://github.com/bullhorn/novo-elements/blob/next/README.md

Commands to install dependencies and run migrations for version 6.

```bash
npm install --save timezone-support@2 novo-design-tokens@0 angular-imask@6 imask@6
npm install --save novo-elements@6
ng update novo-elements --migrate-only --from=0.0.0 --to=6.0.0 --force --allow-dirty
```

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

### Implement Address Controls

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/form-controls/form/form.md

Use this example to integrate address input fields into a static form.

```html
<code-example example="address-control"></code-example>
```

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

### Fab Button Example

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/buttons/button-examples.md

Shows the floating action button (Fab) theme.

```html
<code-example example="button-fab"></code-example>
```

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

### Implement a context-aware menu

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/menu/menu-examples.md

Use the menu-context example to pass context data for controlling visibility or callback actions.

```html
<code-example example="menu-context"></code-example>
```

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

### Primary Button Example

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/buttons/button-examples.md

Demonstrates the primary button theme used for main calls-to-action.

```html
<code-example example="button-primary"></code-example>
```

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

### Color Input Example

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/form-controls/color-picker/color-picker.md

Displays the color picker component configured as an input field.

```html
<code-example example="color-input"></code-example>
```

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

### Dynamic HTML in Pop Over Example

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/pop-over/popover-examples.md

Demonstrates how to render dynamic HTML content within a Pop Over.

```html
<code-example example="pop-over-dynamic"></code-example>
```

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

### Implement a multi-row toolbar

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/toolbar/toolbar-examples.md

Use the multi-row-toolbar example to render a toolbar with multiple rows.

```html
<code-example example="multi-row-toolbar"></code-example>
```

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

### Implement Card using config object and actions

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/layouts/cards/card-examples.md

Utilize the card-config example component to render a card defined by a configuration object, including support for card-actions.

```html
<code-example example="card-config"></code-example>
```

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

### Implement Checkbox Controls

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/form-controls/form/form.md

Use this example to integrate checkbox inputs into a static form.

```html
<code-example example="check-box-controls"></code-example>
```

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

### Search Usage Example

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/search/search.md

Displays the standard implementation of the search component using the code-example tag.

```html
<code-example example="search-usage"></code-example>
```

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

### Custom Triggers Quick Note Example

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/utils/quick-note/quick-note.md

Implements a quick note component with custom trigger configurations.

```html
<code-example example="custom-quick-note"></code-example>
```

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

### Automatic Placement of Pop Over Example

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/pop-over/popover-examples.md

Demonstrates the automatic placement functionality for the Pop Over component.

```html
<code-example example="pop-over-auto-placement"></code-example>
```

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

### Basic Drag and Drop Example

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/utils/drag-drop/drag-drop.md

Implements the drag-and-drop functionality using the novoDragDrop directive.

```html
<code-example example="drag-drop"></code-example>
```

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

### Basic Dynamic Form Implementation

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/form-controls/dynamic-form/dynamic-form.md

Use the basic dynamic form example to render a standard form structure.

```html
<code-example example="dynamic-form"></code-example>
```

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

### Implement Calendar Controls

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/form-controls/form/form.md

Use this example to integrate date and calendar selection inputs into a static form.

```html
<code-example example="calendar-input-controls"></code-example>
```

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

### Pop Over Horizontal Alignment Example

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/pop-over/popover-examples.md

Demonstrates horizontal alignment options for the Pop Over component.

```html
<code-example example="pop-over-horizontal"></code-example>
```

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

### Tooltip Alignment Example

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/tooltip/tooltip-examples.md

Configures the alignment of the tooltip relative to the trigger element.

```html
<code-example example="tooltip-align"></code-example>
```

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

### Pop Over Vertical Alignment Example

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/pop-over/popover-examples.md

Demonstrates vertical alignment options for the Pop Over component.

```html
<code-example example="pop-over-vertical"></code-example>
```

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

### Tooltip Placement Example

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/tooltip/tooltip-examples.md

Displays the tooltip in different positions relative to the target element.

```html
<code-example example="tooltip-placement"></code-example>
```

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

### Implement Basic Card using attributes

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/layouts/cards/card-examples.md

Utilize the basic-card example component to render a standard card layout via attributes.

```html
<code-example example="basic-card"></code-example>
```

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

### Standalone Time Picker Example

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/form-controls/time-picker/time-picker-examples.md

Displays a basic time picker component using the code-example directive.

```html
<code-example example="time-picker"></code-example>
```

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

### Two-Icon Button Example

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/buttons/button-examples.md

Demonstrates a button configured with two icons on opposite sides.

```html
<code-example example="button-two-icon"></code-example>
```

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

### Implement Card with Image

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/layouts/cards/card-examples.md

Utilize the card-with-image example component to render a card that includes an image element.

```html
<code-example example="card-with-image"></code-example>
```

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

### Implement a nested menu

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/menu/menu-examples.md

Use the nested-menu example to create sub-menus within menu items.

```html
<code-example example="nested-menu"></code-example>
```

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

### Custom Results Template Quick Note Example

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/utils/quick-note/quick-note.md

Implements a quick note component using a custom template for displaying results.

```html
<code-example example="custom-quick-note-results"></code-example>
```

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

### Display Dot Spinner Loading Animation

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/loading/loading-examples.md

Use the loading-circle example to show an alternate spinner animation.

```html
<code-example example="loading-circle"></code-example>
```

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

### Implement Text-based Controls

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/form-controls/form/form.md

Use this example to integrate standard text input fields into a static form.

```html
<code-example example="text-based-controls"></code-example>
```

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

### Tooltip Toggle Trigger Example

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/tooltip/tooltip-examples.md

Demonstrates using a toggle trigger to show or hide the tooltip.

```html
<code-example example="tooltip-toggle"></code-example>
```

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

### Implement Number Range Controls

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/form-controls/form/form.md

Use this example to integrate number range inputs into a static form.

```html
<code-example example="number-range-control"></code-example>
```

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

### Dialogue Button Example

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/buttons/button-examples.md

Shows the dialogue button theme, which supports icons and side positioning.

```html
<code-example example="button-dialogue"></code-example>
```

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

### Secondary Button Example

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/buttons/button-examples.md

Shows the secondary button theme for alternative or secondary actions.

```html
<code-example example="button-secondary"></code-example>
```

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

### Display Dot Line Loading Animation

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/loading/loading-examples.md

Use the loading-line example to show an indeterminate line animation.

```html
<code-example example="loading-line"></code-example>
```

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

### Tooltip Overflow Example

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/tooltip/tooltip-examples.md

Handles tooltip display when content exceeds container boundaries.

```html
<code-example example="tooltip-overflow"></code-example>
```

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

### Standard Button Example

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/buttons/button-examples.md

Displays the standard button theme, typically used for cancellation or stopping progress.

```html
<code-example example="button-standard"></code-example>
```

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

### Inverse Secondary Button Example

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/buttons/button-examples.md

Demonstrates the secondary button theme with the inverse attribute for colored backgrounds.

```html
<code-example example="button-inverse"></code-example>
```

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

### Console Logging Example

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/patterns/patterns-test.md

A standard console log statement displayed within a preformatted code block.

```javascript
// This logs a message to the console and check out the scrollbar.<br>console.log('Hello, world!')
```

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

### Feature Commit with Body Example

Source: https://github.com/bullhorn/novo-elements/blob/next/CONTRIBUTING.md

A commit message including a body to explain the motivation behind a new feature and a footer to reference a closed issue.

```text
feat(DataTable): support multi-column sorting

Allow holding shift while clicking column headers to sort by more than one
column. Sort order is preserved when data is refreshed.

Closes #1523
```

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

### Simple Bug Fix Commit Example

Source: https://github.com/bullhorn/novo-elements/blob/next/CONTRIBUTING.md

A minimal commit message using only the header for a bug fix.

```text
fix(Address): use sessions for search service to reduce cost
```

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

### Implement asynchronous chip loading

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/form-controls/chips/chips-examples.md

Demonstrates loading options asynchronously for the chip component.

```html
<code-example example="async-chips"></code-example>
```

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

### Toast Options Configuration

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/toaster/toaster-examples.md

Demonstrates how to configure various options for a toast notification.

```html
<code-example example="toast-options"></code-example>
```

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

### Implement basic chip selection

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/form-controls/chips/chips-examples.md

Basic configuration where clicking the element triggers an options list for selection.

```html
<code-example example="basic-chips"></code-example>
```

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

### Basic Expansion Panel Usage

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-elements/src/elements/expansion/expansion.md

Displays a standard expansion panel with a title and description in the header.

```html
<novo-expansion-panel>
  <novo-expansion-panel-header>
    <novo-panel-title> This is the expansion title </novo-panel-title>
    <novo-panel-description> This is a summary of the content </novo-panel-description>
  </novo-expansion-panel-header>

  <p>This is the primary content of the panel.</p>
</novo-expansion-panel>
```

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

### Standard List Component

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/layouts/list/list.md

Displays a basic list structure using the code-example component.

```html
<code-example example="basic-list"></code-example>
```

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

### Implement Agenda Component

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/agenda/agenda-examples.md

Use the code-example tag to render the Agenda component in your application.

```html
<code-example example="agenda"></code-example>
```

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

### Initialize with jQuery

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/demo/assets/lib/hljs/README.md

Manually trigger highlighting for code blocks using jQuery's each method.

```javascript
$(document).ready(function() {
  $('pre code').each(function(i, block) {
    hljs.highlightBlock(block);
  });
});
```

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

### Implement a Basic Record Header

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/layouts/header/header.md

Displays entity record details and tabbed navigation.

```html
<code-example example="basic-header"></code-example>
```

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

### Basic CK Editor Implementation

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/form-controls/ck-editor/ck-editor.md

Displays a standard HTML editor instance using the CK Editor component.

```html
<code-example example="basic-editor"></code-example>
```

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

### Implement Basic Query Builder

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/query-builder/query-builder-develop.md

Basic usage of the novo-query-builder component requiring a controlName and configuration object.

```html
<novo-query-builder controlName="criteria" [config]="config"></novo-query-builder>
```

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

### Implement novo-tip-well component

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/tip-well/tip-well-develop.md

Basic usage of the novo-tip-well element with a name and icon.

```html
<novo-tip-well name="Demo" icon="info">
  Sed sodales ligula et fermentum bibendum. Aliquam tincidunt sagittis leo eget auctor. Fusce eu sagittis metus, ut viverra magna. Mauris mollis nisl nec libero tincidunt posuere.
</novo-tip-well>
```

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

### Basic Icon Usage

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/icon/icon-examples.md

Standard implementation of the icon component.

```html
<code-example example="basic-icons"></code-example>
```

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

### Configure custom block settings

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/demo/assets/lib/hljs/README.md

Use configure to enable specific options like useBR when using non-standard containers.

```javascript
hljs.configure({useBR: true});

$('div.code').each(function(i, block) {
  hljs.highlightBlock(block);
});
```

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

### Basic Criteria Builder Implementation

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/query-builder/query-builder-examples.md

Displays a standard criteria builder for collecting multiple conditions joined by conjunctions.

```html
<code-example example="just-criteria"></code-example>
```

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

### Basic Color Picker Usage

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/form-controls/color-picker/color-picker.md

Displays the standard color picker component implementation.

```html
<code-example example="color-picker"></code-example>
```

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

### Basic Dropdown Menu

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/dropdown/dropdown-examples.md

A standard implementation of the dropdown menu component.

```html
<code-example example="basic-drop-down"></code-example>
```

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

### Standard Expansion Panel

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/layouts/expansion/expansion.md

Displays a basic expandable panel with a header and optional action bar.

```html
<code-example example="basic-expansion"></code-example>
```

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

### Toaster Actions Implementation

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/toaster/toaster-examples.md

Demonstrates how to add interactive actions to toast notifications.

```html
<code-example example="toast-actions"></code-example>
```

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

### Implement declarative card layout

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/layouts/cards/card-develop.md

Recommended approach for creating card layouts using sub-components for header, content, and footer.

```html
<novo-card>
  <novo-card-header>
    <novo-title>Title</novo-title>
    <novo-action icon="times" tooltip="Close Card"></novo-action>
  </novo-card-header>
  <novo-card-content> Any Content Can Go Here </novo-card-content>
  <novo-card-footer>
    <novo-button> Action <novo-icon>arrow-right</novo-icon> </novo-button>
  </novo-card-footer>
</novo-card>
```

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

### Basic Toolbar Usage

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/toolbar/toolbar-develop.md

Displays a standard toolbar with a title, icon, and multiple action buttons. Requires the NovoToolbarModule to be imported.

```html
<novo-toolbar color="company" gap="1rem">
  <novo-icon>company</novo-icon>
  <novo-title>Taurus Industries</novo-title>
  <span class="example-spacer"></span>
  <novo-action icon="share" tooltip="Share"></novo-action>
  <novo-action icon="print" tooltip="Print"></novo-action>
  <novo-action icon="times" tooltip="Close"></novo-action>
</novo-toolbar>
```

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

### Implement a Condensed Header

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/layouts/header/header.md

A compact version of the record header.

```html
<code-example example="condensed-header"></code-example>
```

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

### Basic Tip Well Usage

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/tip-well/tip-well-examples.md

Displays a standard tip well component.

```html
<code-example example="basic-tip-well"></code-example>
```

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

### Implement Basic Non Ideal State

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/non-ideal-state/non-ideal-state-develop.md

Basic implementation of the component with an icon, title, description, and action button.

```html
<novo-non-ideal-state icon="file" title="This folder is empty" description="Upload a new file to populate the folder.">
  <novo-button theme="primary" icon="upload">Upload</novo-button>
</novo-non-ideal-state>
```

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

### Manual Release Commands

Source: https://github.com/bullhorn/novo-elements/blob/next/RELEASE_PROCESS.md

Use these commands to manually publish a release if the automated GitHub Action fails.

```bash
# Manually update the projects/*/package.json to the version you want
# TAG
# npm test
# npm run lint
# npm run build
# CD INTO EACH PROJECT IN DIST
# npm publish
```

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

### Toaster Service Implementation

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/toaster/toaster-examples.md

Illustrates the usage of the Toaster service to trigger notifications.

```html
<code-example example="toast-service"></code-example>
```

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

### Themed List Component

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/layouts/list/list.md

Displays a themed list structure using the code-example component.

```html
<code-example example="themed-list"></code-example>
```

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

### Minimal CK Editor Implementation

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/form-controls/ck-editor/ck-editor.md

Displays a stripped-down version of the HTML editor for minimal interface requirements.

```html
<code-example example="minimal-editor"></code-example>
```

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

### NovoAsideService.open(component, params)

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/aside/aside-develop.md

Opens a slideout component. The component must be declared in the module's entryComponents.

```APIDOC
## open(component, params)

### Description
Opens a slideout component. Use the params object to pass data to the component, which will be accessible via NovoAsideRef.params.

### Parameters
- **component** (Class) - Required - The angular component to be opened.
- **params** (Object) - Optional - Arguments injected into the slideout component's NovoAsideRef.params property.
```

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

### open(component, params)

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/query-builder/query-builder-develop.md

Opens a modal using the provided component and optional parameters.

```APIDOC
## open(component, params)

### Description
Used to open all modals via the service. Use `params` to pass values to your component.

### Parameters
- **component** (Class) - Required - The angular component which represents the Modal to be opened.
- **params** (Object) - Optional - Arguments that will be injected into `NovoAsideRef.params`.
```

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

### Basic Calendar Usage

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/calendar/calendar-examples.md

Displays the standard implementation of the calendar component.

```html
<code-example example="calendar"></code-example>
```

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

### Optimize module with r.js

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/demo/assets/lib/hljs/README.md

Use the optimizer to define a module name when working with Almond.

```text
r.js -o name=hljs paths.hljs=/path/to/highlight out=highlight.js
```

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

### Basic Chip List Implementation

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/form-controls/chips/chips-develop.md

A simple container for grouping multiple chip elements.

```html
<novo-chip-list>
  <novo-chip>Celtics</novo-chips>
  <novo-chip>Bulls</novo-chips>
</novo-chip-list>
```

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

### Async Picker with Infinite Scroll

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/form-controls/picker/picker.md

Implements a picker that loads options asynchronously and supports infinite scrolling.

```html
<code-example example="async-picker"></code-example>
```

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

### Run E2E tests locally

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-e2e/README.md

Execute the test suite in headless or headed modes using npm scripts.

```bash
# Run tests in headless mode (default)
npm run e2e

# Run tests in headed mode (browser window visible)
npm run e2e:headed

# Run tests in headless mode (explicit)
npm run e2e:headless
```

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

### Preferred Date Picker Usage

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/form-controls/date-picker/date-picker-develop.md

Recommended implementation using novo-field, dateFormat directive, and novo-picker-toggle.

```html
<!-- Preferred Usage -->
<novo-field>
  <novo-label>Date of Birth</novo-label>
  <input novoInput dateFormat="iso8601" [picker]="datepicker" [(ngModel)]="date" />
  <novo-picker-toggle novoSuffix icon="calendar">
    <novo-date-picker #datepicker></novo-date-picker>
  </novo-picker-toggle>
</novo-field>
```

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

### Implement basic chip usage

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/form-controls/chips/chips-examples.md

Standard implementation of the chip element for general multi-input scenarios.

```html
<code-example example="chip-usage"></code-example>
```

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

### Import NovoTipWellModule

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/tip-well/tip-well-develop.md

Required module import for using Tip Well components.

```typescript
import { NovoTipWellModule } from 'novo-elements';
```

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

### Using the static data service

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/data-table/data-table.md

Implement the static data service to manage table data within the component.

```html
<code-example example="data-table-service"></code-example>
```

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

### Open and Manage Aside via NovoAsideService

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/aside/aside-develop.md

Use the NovoAsideService to open a component as a slideout and handle the close promise.

```typescript
@Component({...})
class RandomComponent {
  constructor(private aside:NovoAsideService) {}
  handleAction() {
    const ref = this.aside.open(AddFormSlideout, { record: 123 });
    /* you can listen to the close event */
    ref.onClosed.then((result) => {
      /* result is the argument sent via the ref */
      if (res === 'success') {
        /* perfom some action */
      }
    });
    /* close the slideout from the parent */
    ref.close('success')
  }
}
```

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

### Basic NovoLoading Usage

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/loading/loading-develop.md

Displays the linear loading dots component.

```html
<novo-loading></novo-loading>
```

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

### Lazy Expansion Panel

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/layouts/expansion/expansion.md

Displays an expansion panel that loads its content lazily.

```html
<code-example example="lazy-expansion"></code-example>
```

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

### Basic Slide Implementation

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/slides/slides.md

Displays a standard slide component for toggling information.

```html
<code-example example="basic-slide"></code-example>
```

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

### Apply Spacing via HTML

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/design/spacing/spacing.md

Directly apply spacing variables to the novo-box component.

```html
<novo-box margin="xs" padding="xl">...</novo-box>
```

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

### Basic NovoButton Usage

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/buttons/button-develop.md

Standard implementation of the novo-button element.

```html
<novo-button>Save</novo-button>
```

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

### Run specific test files

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-e2e/README.md

Execute a single test file by providing its name without the .e2e.ts extension.

```bash
# Run a single test file by name
npm run e2e:single button
# This runs: projects/novo-e2e/src/e2e/button.e2e.ts

# Run a single test file in headed mode (browser window visible)
npm run e2e:single:headed button
# This runs: projects/novo-e2e/src/e2e/button.e2e.ts
```

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

### Apply Spacing Variables

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/design/spacing/spacing.md

Use theme-based variables for margin and padding to ensure consistency.

```html
<novo-box margin="xs" padding="xl"></novo-box>
```

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

### Implement Basic Breadcrumb

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/breadcrumb/breadcrumb-develop.md

Standard HTML structure using novo-breadcrumb and novo-breadcrumb-item elements.

```html
<novo-breadcrumb>
  <novo-breadcrumb-item>
    <a routerLink="/components/get-start">Home</a>
  </novo-breadcrumb-item>
  <novo-breadcrumb-item>
    <span>Components</span>
  </novo-breadcrumb-item>
</novo-breadcrumb>
```

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

### Basic Usage of NovoAgendaMonth

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/agenda/agenda-develop.md

Implement the month view calendar by binding the viewDate and events, and handling day click events.

```html
  <novo-agenda-month [(viewDate)]="viewDate" [events]="events"
    (dayClicked)="dayClicked($event.day.date)">
  </novo-agenda-month>
```

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

### Basic Autocomplete Usage

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/autocomplete/autocomplete-develop.md

Implements a standard autocomplete dropdown within a novo-field container using static options.

```html
<novo-field class="example-full-width">
  <novo-label>Number</novo-label>
  <input type="text" novoInput placeholder="Pick one" autocomplete="off" />
  <novo-autocomplete>
    <novo-option [value]="1">One</novo-option>
    <novo-option [value]="2">Two</novo-option>
    <novo-option [value]="3">Three</novo-option>
  </novo-autocomplete>
</novo-field>
```

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

### Implement grouped multi-picker chips

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/form-controls/chips/chips-examples.md

Uses custom templates to create a category-based multi-picker interface.

```html
<code-example example="grouped-multi-picker"></code-example>
```

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

### Render Address Fields

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/form-controls/value/value.md

Displays structured address data.

```html
<code-example example="address-value"></code-example>
```

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

### Dropdown Position Options

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/dropdown/dropdown-examples.md

Demonstrates the use of the [side] input to control popup positioning and fallback locations.

```html
<code-example example="position-drop-down"></code-example>
```

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

### Basic Field Usage

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/field/field-examples.md

Implementation of a standard field component.

```html
<code-example example="field-usage"></code-example>
```

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

### Implement NovoField with Prefix and Suffix

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/field/field-develop.md

Configures a horizontal field layout with input, prefix, suffix, and hint elements.

```html
<novo-field layout="horizontal">
  <novo-label>Amount</novo-label>
  <input novoInput type="number" class="example-right-align" />
  <span novoPrefix>$&nbsp;</span>
  <span novoSuffix>.00</span>
  <novo-hint>Enter some money</novo-hint>
</novo-field>
```

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

### Basic Static Grouped Multi Picker

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/form-controls/chips/grouped-multi-picker/grouped-multi-picker-example.html

Implements a fully static data source with an optional 'all' category enabled.

```html
<novo-grouped-multi-picker [options]="groupedMultiPicker1Options" [(ngModel)]="groupedMultiPicker1Value" [allCategory]="true"></novo-grouped-multi-picker>

Selected Value: {{ groupedMultiPicker1Value }}
```

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

### Basic Checkbox Implementation

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/form-controls/checkbox/checkbox.md

Displays a standard checkbox component.

```html
<code-example example="basic-checkbox"></code-example>
```

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

### Basic NovoDropdown Usage

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/dropdown/dropdown-develop.md

Implement a dropdown menu using the novo-dropdown component with a trigger button and selectable options.

```html
<novo-dropdown>
  <novo-button theme="secondary" icon="collapse">Actions</novo-button>
  <novo-option (click)="alert('Item 1')">Menu Item 1</novo-option>
  <novo-option (click)="alert('Item 2')">Menu Item 2</novo-option>
</novo-dropdown>
```

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

### Themed and Colored Icons

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/icon/icon-examples.md

Implementation of icons with specific themes and color applications.

```html
<code-example example="themed-icons"></code-example>
```

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

### Basic MultiPicker Implementation

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/form-controls/multi-picker/multi-picker.md

Displays a standard multi-picker control where users can select multiple items from a list.

```html
<code-example example="basic-multi-picker"></code-example>
```

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

### Configure Novo Title Size

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/design/typography/typography.md

Apply dynamic sizing to the novo-title component using the size input property.

```html
<novo-title [size]="size.value">
      Creating an incredible customer experience
    </novo-title>
```

```html
<novo-radio-group #size appearance="vertical" value="xl">
      <novo-radio value="xs">xs</novo-radio>
      <novo-radio value="sm">sm</novo-radio>
      <novo-radio value="md">md</novo-radio>
      <novo-radio value="lg">lg</novo-radio>
      <novo-radio value="xl">xl</novo-radio>
      <novo-radio value="2xl">2xl</novo-radio>
    </novo-radio-group>
```

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

### Basic Autocomplete Usage

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/autocomplete/autocomplete-examples.md

Standard implementation of the autocomplete component.

```html
<code-example example="autocomplete-usage"></code-example>
```

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

### Define a Basic Menu

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/menu/menu-develop.md

Use the novo-menu component to define a set of menu items and link it to a trigger element using the [menu] attribute.

```html
<!-- Define a menu with a set of menuItems -->
<novo-menu #menu>
  <novo-option *menuItem (click)="handleViewDetails($event)">
    <novo-icon>preview</novo-icon>
    <span>View Details</span>
  </novo-option>
  <novo-divider *menuItem></novo-divider>
  <novo-option (click)="handleDelete($event)">
    <novo-icon>delete-o</novo-icon>
    <span>Delete Record</span>
  </novo-option>
</novo-menu>
<!-- Add menu attribute to link the menu to an element -->
<novo-button [menu]="menu">Actions</novo-button>
```

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

### Basic SideNav Implementation

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/layouts/sidenav/sidenav.md

Use the basic SideNav component via attributes for standard layout requirements.

```html
<code-example example="basic-sidenav"></code-example>
```

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

### Opening Modals with NovoModalService

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/modal/modal-develop.md

Shows how to open a modal component and handle the close event using the service.

```typescript
@Component({...})
class RandomComponent {
  constructor(private modal:NovoModalService) {}
  handleAction() {
    const ref = this.modal.open(ConfirmDeleteModal, { record: 123 });
    /* you can listen to the close event */
    ref.onClosed.then((result) => {
      /* result is the argument sent via the ref */
      if (res === 'success') {
        /* perfom some action */
      }
    });
    /* close the modal from the parent */
    ref.close('success')
  }
}
```

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

### Basic NovoIcon Usage

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/components/icon/icon-develop.md

Displays a standard icon using the novo-icon component.

```html
<novo-icon>bull</novo-icon>
```

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

### Implement a basic NovoCard layout

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/layouts/cards/card-develop.md

Use this structure to create a card with a header, content area, and footer. The content area can contain nested elements like lists and values.

```html
<novo-card>
  <novo-card-header>
    <novo-title>Ferdinand the Bull</novo-title>
    <novo-action icon="times" tooltip="Close Card"></novo-action>
  </novo-card-header>
  <novo-card-content>
    <novo-card-content condensed>
    <novo-list class="bgc-off-white-striped" direction="vertical">
      <novo-value row label="Author" data="Munro Leaf"></novo-value>
      <novo-value row label="Cover artist" data="Robert Lawson"></novo-value>
      <novo-value row label="Language" data="English"></novo-value>
      <novo-value row label="Published" data="1936"></novo-value>
      <novo-value row label="Genre" data="Childrens"></novo-value>
    </novo-list>
  </novo-card-content>
  <novo-card-footer>
    <novo-button> PIN <novo-icon>pin</novo-icon> </novo-button>
    <novo-button> SHARE <novo-icon>share</novo-icon> </novo-button>
  </novo-card-footer>
</novo-card>
```

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

### Application Routing Tabs

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/layouts/tabs/tabs-examples.md

Integrate tabs with application routing by manually applying classes and using router-outlet.

```html
<code-example example="tabs-router"></code-example>
```

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

### Implement Novo Title Component or Mixin

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/design/typography/typography.md

Use the novo-title component or the novo-title-text SCSS mixin to apply standard title styling.

```html
<novo-title>
      Creating an incredible customer experience
    </novo-title>
```

```scss
@include novo-title-text()
```

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

### Checkbox List Implementation

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-examples/src/form-controls/checkbox/checkbox.md

Displays a list of checkbox components.

```html
<code-example example="checkbox-list"></code-example>
```

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

### Disambiguate duplicate automation IDs

Source: https://github.com/bullhorn/novo-elements/blob/next/projects/novo-e2e/AUTOMATION_STANDARDS.md

Use the codeExample helper to scope selectors when multiple demo sections share the same automation ID.

```typescript
// Both 'section-a' and 'section-b' have a button with automation ID 'submit-trigger'
await click(`${codeExample('section-b')} ${automationId('submit-trigger')}`);
```