### Clone and Run Project

Source: https://github.com/ng-matero/extensions/blob/main/README.md

Clone the Ng-Matero Extensions repository, install dependencies with yarn, and start the development server.

```bash
$ git clone git@github.com:ng-matero/extensions.git
$ cd extensions
$ yarn
$ yarn run start
```

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

### Display Example Description

Source: https://github.com/ng-matero/extensions/blob/main/projects/docs/src/app/shared/example-viewer/example-viewer.html

Conditionally displays a description for an example if 'exampleData.description' is provided.

```html
@if (exampleData.description) {

}
```

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

### Display Example Source Code

Source: https://github.com/ng-matero/extensions/blob/main/projects/docs/src/app/shared/example-viewer/example-viewer.html

Conditionally displays the source code for an example if the 'showSource' flag is true. It iterates through the files associated with the example data.

```html
@if (showSource) {

@for (f of exampleData.files; track f) {

content_copy

}

}
```

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

### Install Ng-Matero Extensions

Source: https://github.com/ng-matero/extensions/blob/main/README.md

Install the Ng-Matero Extensions library using npm. Ensure Angular Material is installed and set up first.

```bash
$ npm install @ng-matero/extensions --save
```

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

### Tooltip with Customization Options

Source: https://github.com/ng-matero/extensions/blob/main/projects/docs/src/app/pages/components/tooltip/tooltip-overview.html

Illustrates how to customize tooltip appearance and behavior using various input properties. This example shows setting position and show delay.

```html
<button mat-raised-button matTooltip="Info" matTooltipPosition="below" [matTooltipShowDelay]="500">Hover me</button>
```

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

### Material Select with Test Templates

Source: https://github.com/ng-matero/extensions/blob/main/projects/dev-app/src/app/select/select-demo.html

Demonstrates a Material Select component used with test templates, including an avatar image and placeholder text. This example highlights custom content within the select options.

```html
![](//www.gravatar.com/avatar/b0d8c6e5ea589e6fc3d3e08afb1873bb?d=retro&r=g&s=30 2x)
Select your food
Choose your favorite food
Please choose a food
Choose your favorite food
Please choose a food
close
Choose your favorite food
Please choose a food
```

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

### Customizing Datetime Picker Formats

Source: https://github.com/ng-matero/extensions/blob/main/projects/docs/src/app/pages/components/datetimepicker/datetimepicker-overview.html

To customize the parse and display formats of the Datetime Picker, please refer to issue #141 for detailed instructions and examples.

```html
@if (route.data | async; as data) { @for (exampleData of data.examples; track exampleData) { } }
```

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

### Use Pre-built Theme

Source: https://github.com/ng-matero/extensions/blob/main/README.md

Import a pre-built theme CSS file directly into your project for quick theme application.

```scss
@import '@ng-matero/extensions/prebuilt-themes/azure-blue.css'
```

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

### Get Scroll Top Value

Source: https://github.com/ng-matero/extensions/blob/main/projects/dev-app/src/app/grid/grid-demo.html

Retrieves the current vertical scroll position of the element. Useful for tracking scroll state.

```javascript
Get scrollTop
```

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

### Get Scroll Left Value

Source: https://github.com/ng-matero/extensions/blob/main/projects/dev-app/src/app/grid/grid-demo.html

Retrieves the current horizontal scroll position of the element. Useful for tracking horizontal scroll state.

```javascript
Get scrollLeft
```

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

### Basic Tooltip Usage

Source: https://github.com/ng-matero/extensions/blob/main/projects/docs/src/app/pages/components/tooltip/tooltip-overview.html

Demonstrates how to apply a basic tooltip to an element using the `matTooltip` directive. Ensure the `MatTooltipModule` is imported.

```html
<button mat-raised-button [matTooltip]="'Tooltip for this button'">Hover over me</button>
```

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

### MtxGridSortProp Interface Definition

Source: https://github.com/ng-matero/extensions/blob/main/projects/docs/src/app/pages/components/grid/grid.md

Defines properties for column sorting, including arrow position, clear disable state, ID, and starting direction.

```typescript
interface MtxGridSortProp {
  arrowPosition?: 'before' | 'after';
  disableClear?: boolean;
  id?: string;
  start?: 'asc' | 'desc';
}
```

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

### Datetimepicker Dropdown Position X Type

Source: https://github.com/ng-matero/extensions/blob/main/projects/docs/src/app/pages/components/datetimepicker/datetimepicker.md

Defines the possible positions for the datetimepicker dropdown along the X axis. Use 'start' or 'end'.

```typescript
type DatetimepickerDropdownPositionX = 'start' | 'end';
```

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

### Using MtxTooltip with Simple Text and Configuration

Source: https://context7.com/ng-matero/extensions/llms.txt

Demonstrates basic usage of the mtxTooltip directive for simple text tooltips. Configure show and hide delays, and tooltip position using input properties.

```typescript
import { Component } from '@angular/core';
import { MatButton } from '@angular/material/button';
import { MtxTooltip } from '@ng-matero/extensions/tooltip';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [MatButton, MtxTooltip],
  template: `
    <!-- Simple text tooltip -->
    <button mat-raised-button
            mtxTooltip="Click to submit the form"
            mtxTooltipPosition="above"
            [mtxTooltipShowDelay]="300"
            [mtxTooltipHideDelay]="100">
      Submit
    </button>

    <!-- Template tooltip with context -->
    <button mat-icon-button
            [mtxTooltip]="richTip"
            [mtxTooltipContext]="{ name: 'John', role: 'Admin' }"
            mtxTooltipClass="custom-tip"
            mtxTooltipPosition="right">
      <mat-icon>info</mat-icon>
    </button>

    <ng-template #richTip let-ctx>
      <strong>{{ ctx.name }}</strong> — {{ ctx.role }}
    </ng-template>
  `,
})
export class AppComponent {}
```

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

### Drawer Configuration Options

Source: https://github.com/ng-matero/extensions/blob/main/projects/dev-app/src/app/drawer/drawer-demo.html

Illustrates common configuration properties for the Drawer component such as position, backdrop, and close behavior. These options control the drawer's appearance and interaction.

```html
position: top right bottom left hasBackdrop disableClose closeOnNavigation

width  height
```

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

### Tooltip with HTML Content

Source: https://github.com/ng-matero/extensions/blob/main/projects/docs/src/app/pages/components/tooltip/tooltip-overview.html

Demonstrates enabling HTML content within a tooltip. Use `[matTooltipClass]` for styling and `matTooltip` for content. Ensure `MatTooltipModule` is imported.

```html
<button mat-raised-button [matTooltip]="'<b>HTML</b> tooltip'">Hover over me</button>
```

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

### MtxCalendar Component

Source: https://github.com/ng-matero/extensions/blob/main/projects/docs/src/app/pages/components/datetimepicker/datetimepicker.md

A calendar component used as part of the datetimepicker. It allows for date filtering, setting min/max selectable dates, and configuring the start view and time input.

```APIDOC
## MtxCalendar Component

### Description
A calendar that is used as part of the datetimepicker.

### Selector
`mtx-calendar`

### Exported as
`mtxCalendar`

### Properties
- `@Input() dateFilter: (date: D, type: MtxDatetimepickerFilterType) => boolean` - Function used to filter which dates are selectable.
- `@Input() type: MtxDatetimepickerType` - The type of datetimepicker. Default is **`'date'`**.
- `@Input() multiYearSelector: boolean` - Whether to show multi-year view. Default is **`false`**.
- `@Input() headerComponent: ComponentType<any>` - Component for a custom header.
- `@Input() actionsPortal: TemplatePortal` - Input for providing action buttons. Default is **`null`**.
- `@Input() twelvehour: boolean` - Whether the clock uses 12 hour format. Default is **`false`**.
- `@Input() timeInterval: number` - Step over minutes. Default is **`1`**.
- `@Input() maxDate: D | null` - The maximum selectable date.
- `@Input() minDate: D | null` - The minimum selectable date.
- `@Input() selected: D | null` - The currently selected datetime.
- `@Input() startAt: D | null` - A date representing the period (month or year) to start the calendar in.
- `@Input() startView: MtxCalendarView` - The calendar started view. Default is **`'month'`**.
- `@Input() timeInput: boolean` - Whether to show the time input in time mode. When the `touchUi` is enabled it will be disabled. Default is **`false`**.
- `@Input() timeInpuAutoFocus: boolean` - Whether the time input should be auto-focused after view init. Default is **`true`**.
- `@Input() showWeekNumbers: boolean` - Whether to show week numbers in month view. Default is **`false`**.

### Outputs
- `@Output() selectedChange: EventEmitter<D | null>` - Emits when the currently selected datetime changes.
- `@Output() viewChanged: EventEmitter<MtxCalendarView>` - Emits when the current view changes.
```

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

### Custom Option Template with Conditional Rendering

Source: https://github.com/ng-matero/extensions/blob/main/projects/docs/src/app/pages/components/select/examples/custom-option-template/app.html

Use `ng-option-tmp` to define a custom template for select options. This example shows conditional rendering within the template based on item properties.

```html
<select>
  <option *ngFor="let item of items" [value]="item.id" [ngValue]="item">
    <ng-container *ngIf="item.name === 'Kaunas'">
      {{ item.name }}
    </ng-container>
    <ng-container *ngIf="item.name !== 'Kaunas'">
      {{ item.name }}
    </ng-container>
  </option>
</select>
```

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

### Basic Material Select

Source: https://github.com/ng-matero/extensions/blob/main/projects/dev-app/src/app/select/select-demo.html

Illustrates a basic Material Select component with options bound using `@for` loop. Ensure items are properly defined in your component.

```html
Choose an option @for (food of items; track food) { {{ food.name }} }
Choose an option @for (food of items; track food) { {{ food.name }} }
```

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

### MtxGridColumnButtonTooltip Interface

Source: https://github.com/ng-matero/extensions/blob/main/projects/docs/src/app/pages/components/grid/grid.md

Configuration for tooltips on buttons.

```APIDOC
## MtxGridColumnButtonTooltip Interface

Defines the properties for a tooltip that appears when hovering over a button.

### Properties
- **message** (string | Observable<string>) - The tooltip message content.
- **position** (TooltipPosition) - The position of the tooltip (e.g., 'left', 'right', 'above', 'below').
- **positionAtOrigin** (boolean) - Whether the tooltip position is relative to the origin.
- **class** (any) - Custom CSS class for the tooltip.
- **hideDelay** (number) - Delay in milliseconds before hiding the tooltip.
- **showDelay** (number) - Delay in milliseconds before showing the tooltip.
- **touchGestures** (TooltipTouchGestures) - Touch gesture behavior for the tooltip.
- **disabled** (boolean) - Whether the tooltip is disabled.
```

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

### Bind Options Directly in HTML with Mtx-Option

Source: https://github.com/ng-matero/extensions/blob/main/projects/docs/src/app/pages/components/select/examples/mtx-option/app.html

Use mtx-option to bind options directly in HTML for simple select use cases, omitting the need for an items array. This example shows how to toggle disabled states and select cars.

```html
<mat-form-field>
  <mat-label>Select Car</mat-label>
  <mat-select [(ngModel)]="selectedCars" multiple>
    @for (car of cars; track car) {
      <mat-option [value]="car">{{ car.name }}</mat-option>
    }
  </mat-select>
</mat-form-field>

<p>Custom</p>
<mat-form-field>
  <mat-label>Choose your favorite car</mat-label>
  <mat-select [(ngModel)]="selectedCar">
    <mat-option>-- None --</mat-option>
    <mat-option value="volvo">Volvo</mat-option>
    <mat-option value="saab">Saab</mat-option>
    <mat-option value="mercedes">Mercedes</mat-option>
  </mat-select>
</mat-form-field>

<p>Selected car ID: {{ selectedCar | json }}</p>
```

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

### Tooltip Module Import

Source: https://github.com/ng-matero/extensions/blob/main/projects/docs/src/app/pages/components/tooltip/tooltip.md

Import the MtxTooltipModule into your application to use the tooltip component.

```APIDOC
import { MtxTooltipModule } from '@ng-matero/extensions/tooltip';
```

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

### Custom Select Label Template Example

Source: https://github.com/ng-matero/extensions/blob/main/projects/docs/src/app/pages/components/select/examples/custom-label-template/app.html

Use the `ng-label-tmp` directive within the select component to define a custom template for displaying the selected item's label. This allows for richer display of selected data beyond a simple string.

```html
<form class="m-4">
  <mat-form-field>
    <mat-label>Select City</mat-label>
    <mat-select>
      <mat-optgroup label="Choose your city">
        <mat-option value="1">New York</mat-option>
        <mat-option value="2">Chicago</mat-option>
        <mat-option value="3">San Francisco</mat-option>
      </mat-optgroup>
    </mat-select>
  </mat-form-field>
</form>

<ng-template #labelTpl let-item>
  Select City {{ item.name }}
</ng-template>

<p>Please choose a city</p>
```

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

### Summary Configuration

Source: https://github.com/ng-matero/extensions/blob/main/projects/docs/src/app/pages/components/grid/grid.md

Configure the visibility and template for the grid's summary row.

```APIDOC
## Summary Inputs

### `@Input()` showSummary: boolean

Whether to show the summary. Default is `false`.

### `@Input()` summaryTemplate: TemplateRef<any> | MtxGridCellTemplate

The template for the summary.
```

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

### MtxGridColumnButtonPop Interface

Source: https://github.com/ng-matero/extensions/blob/main/projects/docs/src/app/pages/components/grid/grid.md

Configuration for a confirmation pop-up on button click.

```APIDOC
## MtxGridColumnButtonPop Interface

Defines the properties for a confirmation dialog that appears when a button is clicked.

### Properties
- **title** (string | Observable<string>) - The title of the pop-up dialog.
- **description** (string | Observable<string>) - The description text for the dialog.
- **okColor** (ThemePalette) - The color theme for the OK button.
- **okText** (string | Observable<string>) - The text for the OK button.
- **closeColor** (ThemePalette) - The color theme for the close button.
- **closeText** (string | Observable<string>) - The text for the close button.
```

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

### MtxDrawerConfig Class

Source: https://github.com/ng-matero/extensions/blob/main/projects/docs/src/app/pages/components/drawer/drawer.md

Configuration options for opening a drawer.

```APIDOC
## Class: MtxDrawerConfig

Configuration used when opening a drawer.

### Properties

- `ariaLabel: string | null`: Aria label to assign to the drawer element.
- `autoFocus: AutoFocusTarget | string | boolean`: Where the drawer should focus on open.
- `backdropClass: string`: Custom class for the backdrop.
- `closeOnNavigation: boolean`: Whether the drawer should close when the user goes backwards/forwards in history. Note that this usually doesn't include clicking on links (unless the user is using the HashLocationStrategy).
- `data: D | null`: Data being injected into the child component.
- `direction: Direction`: Text layout direction for the drawer.
- `disableClose: boolean`: Whether the user can use escape or clicking outside to close the drawer.
- `hasBackdrop: boolean`: Whether the drawer has a backdrop.
- `panelClass: string | string[]`: Extra CSS classes to be added to the drawer container.
- `restoreFocus: boolean`: Whether the drawer should restore focus to the previously-focused element, after it's closed.
- `scrollStrategy: ScrollStrategy`: Scroll strategy to be used for the drawer.
- `viewContainerRef: ViewContainerRef`: The view container to place the overlay for the drawer into.
- `id: string`: ID for the drawer. If omitted, a unique one will be generated.
- `position: DrawerPosition`: Position of the drawer.
- `width: string`: Width of the drawer.
- `height: string`: Height of the drawer.
- `minWidth: number | string`: Min-width of the drawer. If a number is provided, assumes pixel units.
- `minHeight: number | string`: Min-height of the drawer. If a number is provided, assumes pixel units.
- `maxWidth: number | string`: Max-width of the drawer. If a number is provided, assumes pixel units.
- `maxHeight: number | string`: Max-height of the drawer. If a number is provided, assumes pixel units.
```

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

### Select Component Outputs

Source: https://github.com/ng-matero/extensions/blob/main/projects/docs/src/app/pages/components/select/select.md

Respond to user interactions and component events using these output properties.

```APIDOC
## Select Component Outputs

### `@Output()` focus

**Type:** `FocusEvent`

**Description:** Fired when the select component gains focus.

### `@Output()` blur

**Type:** `FocusEvent`

**Description:** Fired when the select component loses focus.

### `@Output()` change

**Type:** `any`

**Description:** Fired when the model value changes. Outputs the entire model.

### `@Output()` open

**Type:** `void`

**Description:** Fired when the select dropdown panel opens.

### `@Output()` close

**Type:** `void`

**Description:** Fired when the select dropdown panel closes.

### `@Output()` add

**Type:** `any`

**Description:** Fired when an item is added while the `multiple` property is `true`. Outputs the added item.

### `@Output()` remove

**Type:** `any`

**Description:** Fired when an item is removed while the `multiple` property is `true`.

### `@Output()` search

**Type:** `SearchEvent`

**Description:** Fired while the user is typing a search term. Outputs the search term along with the filtered items.

### `@Output()` clear

**Type:** `void`

**Description:** Fired when the clear icon is clicked.

### `@Output()` scroll

**Type:** `ScrollEvent`

**Description:** Fired when the user scrolls within the select options. Provides the start and end index of the currently visible items. This can be used for implementing infinite scrolling or loading more items in chunks.

### `@Output()` scrollToEnd

**Type:** `void`

**Description:** Fired when the user scrolls to the end of the items list. This can be used for loading more items in chunks.
```

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

### PhotoViewer with Dynamic Images (Loop)

Source: https://github.com/ng-matero/extensions/blob/main/projects/dev-app/src/app/photoviewer/photoviewer-demo.html

Iterate over a collection of image data to display multiple images using PhotoViewer. This is useful for galleries or lists of images.

```html
@for (item of images2; track item; let index = $index) {  }
```

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

### MtxSplit Resizable Split Panes

Source: https://context7.com/ng-matero/extensions/llms.txt

Implements resizable split layouts using MtxSplit and MtxSplitPane. Supports horizontal and vertical directions, percentage or pixel units, and configurable gutter sizes. Import MtxSplitModule.

```typescript
import { Component } from '@angular/core';
import { MtxSplitModule } from '@ng-matero/extensions/split';
import { MtxSplitOutputData } from '@ng-matero/extensions/split';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [MtxSplitModule],
  styles: [`mtx-split { height: 400px; }`],
  template: `
    <!-- Horizontal split (percent mode) -->
    <mtx-split direction="horizontal" unit="percent" [gutterSize]="8"
               (dragEnd)="onDragEnd($event)">
      <mtx-split-pane [size]="30" [minSize]="15">
        <p>Left pane (30%)</p>
      </mtx-split-pane>
      <mtx-split-pane [size]="70">
        <!-- Nested vertical split -->
        <mtx-split direction="vertical" [gutterSize]="4">
          <mtx-split-pane [size]="50">Top right</mtx-split-pane>
          <mtx-split-pane [size]="50">Bottom right</mtx-split-pane>
        </mtx-split>
      </mtx-split-pane>
    </mtx-split>

    <!-- Pixel mode -->
    <mtx-split unit="pixel" [gutterSize]="6" [useTransition]="true">
      <mtx-split-pane [size]="200" [minSize]="100" [maxSize]="400">Sidebar</mtx-split-pane>
      <mtx-split-pane [size]="null">Main content (fills remaining)</mtx-split-pane>
    </mtx-split>
  `,
})
export class AppComponent {
  onDragEnd(event: MtxSplitOutputData) {
    console.log('Gutter', event.gutterNum, '→ sizes:', event.sizes);
  }
}
// MtxSplit Inputs: direction, unit, gutterSize, gutterStep, restrictMove,
//                  useTransition, disabled, dir, gutterDblClickDuration, color
// MtxSplit Outputs: dragStart, dragEnd, gutterClick, gutterDblClick, transitionEnd
// MtxSplitPane Inputs: size, minSize, maxSize, order, visible
// Public methods: getVisibleAreaSizes(), setVisibleAreaSizes(), showArea(), hideArea()

```

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

### Tooltip with Rich Content

Source: https://github.com/ng-matero/extensions/blob/main/projects/docs/src/app/pages/components/tooltip/tooltip-overview.html

Shows how to use the `mtxTooltip` directive for rich content, similar to Material's `matTooltip`. Import `MtxTooltipModule`.

```html
<button [mtxTooltip]="'Rich tooltip content'">Hover over me</button>
```

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

### Toolbar Configuration

Source: https://github.com/ng-matero/extensions/blob/main/projects/docs/src/app/pages/components/grid/grid.md

Configure the visibility and content of the grid's toolbar.

```APIDOC
## Toolbar Inputs

### `@Input()` showToolbar: boolean

Whether to show the toolbar. Default is `false`.

### `@Input()` toolbarTitle: string

The text of the toolbar's title. Default is `''`.

### `@Input()` toolbarTemplate: TemplateRef<any>

The template for the toolbar.
```

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

### MtxGridColumnButtonBadge Interface

Source: https://github.com/ng-matero/extensions/blob/main/projects/docs/src/app/pages/components/grid/grid.md

Configuration for badges on buttons.

```APIDOC
## MtxGridColumnButtonBadge Interface

Defines the properties for a badge displayed on a button.

### Properties
- **content** (number | string | Observable<string>) - The content of the badge.
- **description** (string | Observable<string>) - Description for the badge.
- **color** (ThemePalette) - The color theme of the badge.
- **position** (MatBadgePosition) - The position of the badge on the button.
- **size** (MatBadgeSize) - The size of the badge.
- **overlap** (boolean) - Whether the badge overlaps the button content.
- **disabled** (boolean) - Whether the badge is disabled.
- **hidden** (boolean) - Whether the badge is hidden.
```

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

### Select Component Inputs

Source: https://github.com/ng-matero/extensions/blob/main/projects/docs/src/app/pages/components/select/select.md

Configure the behavior and appearance of the Select component using these input properties.

```APIDOC
## Select Component Inputs

### `@Input()` inputAttrs

**Type:** `{ [key: string]: string }`

**Description:** Pass custom attributes to the underlying input element.

### `@Input()` tabIndex

**Type:** `number`

**Description:** Set the tabindex on the `ng-select` element.

### `@Input()` keyDownFn

**Type:** `(e: KeyboardEvent) => boolean`

**Description:** Provide a custom keyDown function. This function is executed before the default handler. Returning `false` will suppress the execution of default key down handlers. The default value is `true`.

### `@Input()` fixedPlaceholder

**Type:** `boolean`

**Description:** Set the placeholder to be visible even when an item is selected. The default value is `false`.

### `@Input()` deselectOnClick

**Type:** `boolean`

**Description:** Deselects a selected item when it is clicked in the dropdown. The default value is `false`. It defaults to `true` when `multiple` is `true`.

### `@Input()` preventToggleOnRightClick

**Type:** `boolean`

**Description:** Prevent opening of `ng-select` on right mouse click. The default value is `false`.

### `@Input()` ariaLabel

**Type:** `string`

**Description:** Sets the `aria-label` for the `ng-select` input.

### `@Input()` ariaLabelledby

**Type:** `string`

**Description:** Sets the `aria-labelledby` for the `ng-select` input.

### `@Input()` ariaDescribedby

**Type:** `string`

**Description:** Sets the `aria-describedby` for the `ng-select` input.
```

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

### MtxGridColumnPinOption Interface

Source: https://github.com/ng-matero/extensions/blob/main/projects/docs/src/app/pages/components/grid/grid.md

Defines options for column pinning.

```APIDOC
## MtxGridColumnPinOption Interface

Defines the available options for pinning grid columns.

### Properties
- **label** (string | Observable<string>) - The display label for the pin option.
- **value** (MtxGridColumnPinValue) - The value representing the pin position (e.g., 'left', 'right').
```

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

### Select Component Methods

Source: https://github.com/ng-matero/extensions/blob/main/projects/docs/src/app/pages/components/select/select.md

Programmatically control the Select component using these methods.

```APIDOC
## Select Component Methods

### `open()`

**Description:** Opens the select dropdown panel programmatically.

### `close()`

**Description:** Closes the select dropdown panel programmatically.

### `focus()`

**Description:** Focuses the select element programmatically.

### `blur()`

**Description:** Blurs the select element programmatically.
```

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

### Display Image with PhotoViewer

Source: https://github.com/ng-matero/extensions/blob/main/projects/dev-app/src/app/photoviewer/photoviewer-demo.html

Use the PhotoViewer component to display a single image. Ensure the image source URL is correctly provided.

```html
<img src="https://farm5.staticflickr.com/4267/34162425794_1430f38362_z.jpg" alt="PhotoViewer Image">
```

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

### Status Bar Configuration

Source: https://github.com/ng-matero/extensions/blob/main/projects/docs/src/app/pages/components/grid/grid.md

Configure the visibility and template for the grid's status bar.

```APIDOC
## Status Bar Inputs

### `@Input()` showStatusbar: boolean

Whether to show the status bar. Default is `false`.

### `@Input()` statusbarTemplate: TemplateRef<any>

The template for the status bar.
```

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

### Tooltip with Dynamic Content

Source: https://github.com/ng-matero/extensions/blob/main/projects/docs/src/app/pages/components/tooltip/tooltip-overview.html

Shows how to bind a tooltip's content to a component property, allowing for dynamic updates. The tooltip content will update as the component property changes.

```html
<button [matTooltip]="tooltipText">Hover over me</button>
```

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

### Column Pinning Options

Source: https://github.com/ng-matero/extensions/blob/main/projects/extensions/grid/column-menu.html

Renders options for pinning or unpinning a column, iterating through available pin options.

```html
@if (pinnable) { @if (col.pinned) { } @if (!col.pinned) { } @for (item of pinOptions; track item) { @if (col.pinned==item.value) { } {{item.label | toObservable | async}} } }
```

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

### Basic Spinner Loader

Source: https://github.com/ng-matero/extensions/blob/main/projects/dev-app/src/app/loader/loader-demo.html

Use this snippet to display a basic spinner loader. Ensure the 'loading' variable is true to show the loader.

```html
<@if (loading) { }>
```

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

### MtxSelect Basic Single and Multi-Select with Virtual Scroll

Source: https://context7.com/ng-matero/extensions/llms.txt

Demonstrates basic single and multi-select with MtxSelect, including virtual scroll for large lists and an async typeahead search. Ensure ReactiveFormsModule, MatFormField, MatLabel, and MtxSelect are imported.

```typescript
import { Component, signal } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { MatFormField, MatLabel } from '@angular/material/form-field';
import { MtxSelect } from '@ng-matero/extensions/select';
import { Subject } from 'rxjs';
import { debounceTime, switchMap } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ReactiveFormsModule, MatFormField, MatLabel, MtxSelect],
  template: `
    <!-- Basic single select -->
    <mat-form-field>
      <mat-label>Country</mat-label>
      <mtx-select [items]="countries" bindLabel="name" bindValue="code"
                  [formControl]="countryCtrl" placeholder="Select country">
      </mtx-select>
    </mat-form-field>

    <!-- Multi-select with virtual scroll -->
    <mat-form-field>
      <mat-label>Tags</mat-label>
      <mtx-select [items]="tags" bindLabel="label" bindValue="id"
                  [multiple]="true" [virtualScroll]="true"
                  [formControl]="tagsCtrl"
                  [clearable]="true"
                  (change)="onTagsChange($event)"
                  (search)="onSearch($event)">
      </mtx-select>
    </mat-form-field>

    <!-- Async typeahead -->
    <mat-form-field>
      <mat-label>Search Users</mat-label>
      <mtx-select [items]="users()" bindLabel="name"
                  [typeahead]="userSearch$"
                  [loading]="loadingUsers()"
                  placeholder="Type to search...">
      </mtx-select>
    </mat-form-field>
  `,
})
export class AppComponent {
  countries = [{ name: 'United States', code: 'US' }, { name: 'Canada', code: 'CA' }];
  tags = Array.from({ length: 500 }, (_, i) => ({ id: i, label: `Tag ${i}` }));

  countryCtrl = new FormControl('US');
  tagsCtrl = new FormControl([]);

  users = signal<any[]>([]);
  loadingUsers = signal(false);
  userSearch$ = new Subject<string>();

  onTagsChange(value: any[]) { console.log('Tags changed:', value); }
  onSearch(event: { term: string; items: any[] }) { console.log('Search term:', event.term); }
}
// Inputs: items, bindLabel, bindValue, multiple, clearable, searchable, virtualScroll,
//         groupBy, groupValue, addTag, loading, loadingText, notFoundText,
//         typeahead, maxSelectedItems, closeOnSelect, hideSelected
// Outputs: change, open, close, search, clear, add, remove, scroll, scrollToEnd

```

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

### MtxGridDefaultOptions Interface

Source: https://github.com/ng-matero/extensions/blob/main/projects/docs/src/app/pages/components/grid/grid.md

Default configuration options for the MtxGrid component.

```APIDOC
## MtxGridDefaultOptions Interface

Specifies the default configuration settings for the MtxGrid component.

### Properties
- **columnResizable** (boolean) - Whether columns are resizable by default.
- **emptyValuePlaceholder** (string) - Placeholder text for empty cell values.

- **pageOnFront** (boolean) - Whether pagination is handled on the front-end.
- **showPaginator** (boolean) - Whether to display the paginator controls.
- **pageDisabled** (boolean) - Whether the paginator is disabled.
- **showFirstLastButtons** (boolean) - Whether to show first and last page buttons.
- **pageIndex** (number) - The initial page index.
- **pageSize** (number) - The initial number of items per page.
- **pageSizeOptions** (number[]) - Available options for page size.
- **hidePageSize** (boolean) - Whether to hide the page size selector.

- **sortOnFront** (boolean) - Whether sorting is handled on the front-end.
- **sortActive** (string) - The initially active sort column.
- **sortDirection** (SortDirection) - The initial sort direction ('asc' or 'desc').
- **sortDisableClear** (boolean) - Whether to disable clearing the sort.
- **sortDisabled** (boolean) - Whether sorting is disabled for all columns.
- **sortStart** ('asc' | 'desc') - The initial sort direction for columns.

- **rowHover** (boolean) - Whether to enable row hover effects.
- **rowStriped** (boolean) - Whether to enable striped rows.

- **multiSelectable** (boolean) - Whether multiple rows can be selected.
- **multiSelectionWithClick** (boolean) - Whether multi-selection is toggled by clicking rows.
- **rowSelectable** (boolean) - Whether rows are selectable.
- **hideRowSelectionCheckbox** (boolean) - Whether to hide the row selection checkbox.
- **disableRowClickSelection** (boolean) - Whether to disable row selection on click.

- **cellSelectable** (boolean) - Whether cells are selectable.

- **showToolbar** (boolean) - Whether to display the grid toolbar.
- **toolbarTitle** (string) - The title text for the toolbar.

- **columnHideable** (boolean) - Whether columns can be hidden.
- **columnHideableChecked** ('show' | 'hide') - Default behavior for column visibility toggle.
- **columnSortable** (boolean) - Whether columns are sortable by default.
- **columnPinnable** (boolean) - Whether columns can be pinned.
- **columnPinOptions** (MtxGridColumnPinOption[]) - Available options for column pinning.

- **showColumnMenuButton** (boolean) - Whether to show the column menu button.
- **columnMenuButtonText** (string) - Text for the column menu button.
- **columnMenuButtonType** (MtxGridButtonType) - Type of the column menu button.
- **columnMenuButtonColor** (ThemePalette) - Color theme for the column menu button.
- **columnMenuButtonClass** (string) - Custom CSS class for the column menu button.
- **columnMenuButtonIcon** (string) - Icon for the column menu button.

- **showColumnMenuHeader** (boolean) - Whether to show a header in the column menu.
- **columnMenuHeaderText** (string) - Text for the column menu header.
- **showColumnMenuFooter** (boolean) - Whether to show a footer in the column menu.
- **columnMenuFooterText** (string) - Text for the column menu footer.

- **noResultText** (string) - Text to display when no results are found.
```

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

### Render Minutes in Datetimepicker

Source: https://github.com/ng-matero/extensions/blob/main/projects/extensions/datetimepicker/clock.html

Iterates over a list of minutes and displays each minute's value. Use this when rendering the minute selection in the clock.

```html
@for (item of \_minutes; track item.value) {

{{ item.displayValue }}

}
```

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

### MtxPhotoviewer Directive

Source: https://github.com/ng-matero/extensions/blob/main/projects/docs/src/app/pages/components/photoviewer/photoviewer.md

The `mtxPhotoviewer` directive is used to initialize and control the photoviewer. It accepts an array of images and optional configuration options.

```APIDOC
## Directive: MtxPhotoviewer

### Selector
`[mtxPhotoviewer]`

### Exported as
`mtxPhotoviewer`

### Properties

#### `@Input('mtxPhotoviewerItems') images: PhotoViewer.Img[]`
Image list of photoviewer.

#### `@Input('mtxPhotoviewerOptions') options: PhotoViewer.Options`
Options of photoviewer.

#### `@Input('mtxPhotoviewerEmbed') embed: boolean`
Whether embed photoviewer.
```

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

### Type Aliases

Source: https://github.com/ng-matero/extensions/blob/main/projects/docs/src/app/pages/components/drawer/drawer.md

Type definitions for drawer configuration and positioning.

```APIDOC
## Type Aliases

### `AutoFocusTarget`

Options for where to set focus to automatically on dialog open.

```ts
type AutoFocusTarget = 'dialog' | 'first-tabbable' | 'first-heading';
```

### `DrawerPosition`

Possible overrides for a drawer's position.

```ts
type DrawerPosition = 'top' | 'bottom' | 'left' | 'right';
```
```

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

### Constants

Source: https://github.com/ng-matero/extensions/blob/main/projects/docs/src/app/pages/components/drawer/drawer.md

Injection tokens for default options and data.

```APIDOC
## Constants

### `MTX_DRAWER_DEFAULT_OPTIONS`

Injection token that can be used to specify default drawer options.

```ts
const MTX_DRAWER_DEFAULT_OPTIONS: InjectionToken<MtxDrawerConfig>;
```

### `MTX_DRAWER_DATA`

Injection token that can be used to access the data that was passed in to a drawer.

```ts
const MTX_DRAWER_DATA: InjectionToken<any>;
```
```

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

### API Usage

Source: https://github.com/ng-matero/extensions/blob/main/projects/docs/src/app/pages/components/tooltip/tooltip.md

The APIs for MtxTooltip are analogous to the Material Tooltip APIs. To use them, simply replace the 'mat-' prefix with 'mtx-'. For detailed API information, refer to the Material Tooltip documentation.

```APIDOC
## API Reference

The APIs are similar with [Material Tooltip](https://material.angular.io/components/tooltip/api), just replace the prefix `mat` with `mtx`.
```

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

### Import MtxAlertModule

Source: https://github.com/ng-matero/extensions/blob/main/projects/docs/src/app/pages/components/alert/alert.md

Import the MtxAlertModule to use the alert component in your application.

```typescript
import { MtxAlertModule } from '@ng-matero/extensions/alert';
```

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

### MtxDrawer Service

Source: https://github.com/ng-matero/extensions/blob/main/projects/docs/src/app/pages/components/drawer/drawer.md

The MtxDrawer service provides methods to open and manage drawers. It also exposes streams for tracking drawer states.

```APIDOC
## Service: MtxDrawer

Service to open Material Design drawers.

### Properties

- `afterAllDismissed: Observable<void>`: Stream that emits when all open drawers have finished closing. Will emit on subscribe if there are no open drawers to begin with.
- `afterOpened: Subject<afterOpened<any>>`: Stream that emits when a drawer has been opened.
- `openDrawers: MtxDrawerRef<any>[]`: Keeps track of the currently-open drawers.

### Methods

#### `dismissAll()`

Dismissed all of the currently-open dialogs.

#### `getDrawerById(id: string)`

Finds an open drawer by its id.

#### `open(component: ComponentType<T>, config: MtxDrawerConfig<D>)`

Opens a drawer containing the given component.

- **Parameters**:
  - `component` (ComponentType<T>): Type of the component to load into the drawer.
  - `config` (MtxDrawerConfig<D>): Extra configuration options.

#### `open(template: TemplateRef<T>, config: MtxDrawerConfig<D>)`

Opens a drawer containing the given template.

- **Parameters**:
  - `template` (TemplateRef<T>): TemplateRef to instantiate as the drawer content.
  - `config` (MtxDrawerConfig<D>): Extra configuration options.

#### `open(componentOrTemplateRef: ComponentType<T> | TemplateRef<T>, config: MtxDrawerConfig<D>)`

Opens a drawer containing the given component or template.

- **Parameters**:
  - `componentOrTemplateRef` (ComponentType<T> | TemplateRef<T>): TemplateRef to instantiate as the drawer content.
  - `config` (MtxDrawerConfig<D>): Extra configuration options.
```

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

### MtxGridColumnButtonTooltip Interface Definition

Source: https://github.com/ng-matero/extensions/blob/main/projects/docs/src/app/pages/components/grid/grid.md

Defines the configuration for tooltips associated with grid buttons, including message, position, and delay settings.

```typescript
export interface MtxGridColumnButtonTooltip {
  message: string | Observable<string>;
  position?: TooltipPosition;
  positionAtOrigin?: boolean;
  class?: any;
  hideDelay?: number;
  showDelay?: number;
  touchGestures?: TooltipTouchGestures;
  disabled?: boolean;
}
```

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

### MtxDialog Service

Source: https://context7.com/ng-matero/extensions/llms.txt

The MtxDialog service provides convenience methods for displaying alert and confirm dialogs, as well as a flexible open() method for custom dialog configurations.

```APIDOC
## MtxDialog — Programmatic Dialog Service

`MtxDialog` is an injectable service that wraps `MatDialog` with convenience methods `alert()` and `confirm()` for quick dialogs, plus `open()` for fully configured dialogs and `originalOpen()` for passing custom components.

### Methods

- **alert(title: string, description: string, callback?: () => void)**: Displays an alert dialog.
- **confirm(title: string, description: string, confirmCallback?: () => void, cancelCallback?: () => void)**: Displays a confirmation dialog.
- **open(config: MtxDialogConfig): MtxDialogRef**: Opens a custom dialog with a specified configuration.

### MtxDialogConfig

- **title** (string): The dialog title.
- **description** (string): The dialog content.
- **width** (string): The dialog width.
- **showCloseIcon** (boolean): Whether to show a close icon.
- **buttons** (MtxDialogBtns[]): An array of buttons for the dialog.

### MtxDialogBtns

- **text** (string): The button text.
- **onClick** (function): Callback function when the button is clicked.
- **color** (string): Button color (e.g., 'primary').
- **focusInitial** (boolean): Whether the button should be focused initially.

### Example Usage

```typescript
import { Component, inject } from '@angular/core';
import { MtxDialog } from '@ng-matero/extensions/dialog';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="showAlert()">Alert</button>
    <button (click)="showConfirm()">Confirm</button>
    <button (click)="showCustom()">Custom Dialog</button>
  `,
})
export class AppComponent {
  private dialog = inject(MtxDialog);

  showAlert() {
    this.dialog.alert('Success', 'Your data has been saved.', () => {
      console.log('OK clicked');
    });
  }

  showConfirm() {
    this.dialog.confirm(
      'Delete Item',
      'Are you sure you want to delete this item?',
      () => console.log('Confirmed — deleting'),
      () => console.log('Cancelled')
    );
  }

  showCustom() {
    const ref = this.dialog.open({
      title: 'Custom',
      description: 'This is a custom dialog.',
      width: '400px',
      showCloseIcon: true,
      buttons: [
        { text: 'Cancel', onClick: () => {} },
        { color: 'primary', text: 'Submit', focusInitial: true, onClick: () => console.log('Submitted') },
      ],
    });
    ref.afterClosed().subscribe(result => console.log('Dialog result:', result));
  }
}
```
```

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

### MTX_DRAWER_DEFAULT_OPTIONS Token

Source: https://github.com/ng-matero/extensions/blob/main/projects/docs/src/app/pages/components/drawer/drawer.md

An injection token to provide default configuration options for drawers.

```typescript
const MTX_DRAWER_DEFAULT_OPTIONS: InjectionToken<MtxDrawerConfig>;
```

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

### Import MtxDrawerModule

Source: https://github.com/ng-matero/extensions/blob/main/projects/docs/src/app/pages/components/drawer/drawer.md

Import the MtxDrawerModule to use drawer functionalities in your application.

```typescript
import { MtxDrawerModule } from '@ng-matero/extensions/drawer';
```

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

### MtxGrid Configuration and Usage

Source: https://context7.com/ng-matero/extensions/llms.txt

Configure and use the MtxGrid component for displaying data with features like sorting, pagination, and row selection. Ensure necessary imports for MtxGrid, PageEvent, and Sort.

```typescript
import { Component } from '@angular/core';
import { MtxGrid, MtxGridColumn } from '@ng-matero/extensions/grid';
import { PageEvent } from '@angular/material/paginator';
import { Sort } from '@angular/material/sort';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [MtxGrid],
  template: `
    <mtx-grid
      [data]="rows"
      [columns]="columns"
      [length]="totalCount"
      [loading]="isLoading"
      [pageSize]="10"
      [pageSizeOptions]="[10, 25, 50]"
      [sortActive]="'name'"
      [sortDirection]="'asc'"
      [rowSelectable]="true"
      [rowHover]="true"
      [rowStriped]="true"
      [showToolbar]="true"
      toolbarTitle="Users"
      [columnResizable]="true"
      (page)="onPage($event)"
      (sortChange)="onSort($event)"
      (rowSelectedChange)="onRowSelect($event)"
      (rowClick)="onRowClick($event)">
    </mtx-grid>
  `,
})
export class AppComponent {
  isLoading = false;
  totalCount = 100;

  columns: MtxGridColumn[] = [
    { field: 'id', header: 'ID', width: '80px', sortable: true, pinned: 'left' },
    { field: 'name', header: 'Name', sortable: true },
    {
      field: 'status',
      header: 'Status',
      type: 'tag',
      tag: { 1: { text: 'Active', color: 'green' }, 0: { text: 'Inactive', color: 'gray' } },
    },
    { field: 'createdAt', header: 'Created', type: 'date', typeParameter: { format: 'yyyy-MM-dd' } },
    {
      field: 'actions',
      header: 'Actions',
      type: 'button',
      buttons: [
        { type: 'icon', icon: 'edit', tooltip: 'Edit', click: row => this.editRow(row) },
        {
          type: 'icon', icon: 'delete', color: 'warn',
          pop: { title: 'Confirm Delete', description: 'This cannot be undone.', okColor: 'warn' },
          click: row => this.deleteRow(row),
        },
      ],
    },
  ];

  rows = Array.from({ length: 10 }, (_, i) => ({
    id: i + 1, name: `User ${i + 1}`, status: i % 2, createdAt: new Date(),
  }));

  onPage(e: PageEvent) { console.log('Page:', e.pageIndex, 'Size:', e.pageSize); }
  onSort(sort: Sort) { console.log('Sort by', sort.active, sort.direction); }
  onRowSelect(selected: any[]) { console.log('Selected rows:', selected); }
  onRowClick(e: any) { console.log('Row clicked:', e.rowData); }
  editRow(row: any) { console.log('Edit', row); }
  deleteRow(row: any) { console.log('Delete', row); }
}
```

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

### MtxDrawer: Opening a Side Drawer Panel

Source: https://context7.com/ng-matero/extensions/llms.txt

Use MtxDrawer to open a slide-in panel from any screen edge. Inject the MtxDrawer service and provide the component to display and configuration options.

```typescript
// my-panel.component.ts
import { Component, inject } from '@angular/core';
import { MtxDrawerRef, MTX_DRAWER_DATA } from '@ng-matero/extensions/drawer';

@Component({
  selector: 'app-my-panel',
  standalone: true,
  template: `
    <h2>{{ data.title }}</h2>
    <button (click)="close()">Close</button>
  `,
})
export class MyPanelComponent {
  drawerRef = inject(MtxDrawerRef);
  data = inject(MTX_DRAWER_DATA);

  close() { this.drawerRef.dismiss('closed by user'); }
}
```

```typescript
// app.component.ts
import { Component, inject } from '@angular/core';
import { MatButton } from '@angular/material/button';
import { MtxDrawer } from '@ng-matero/extensions/drawer';
import { MyPanelComponent } from './my-panel.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [MatButton],
  template: `<button mat-raised-button (click)="openDrawer()">Open Drawer</button>`,
})
export class AppComponent {
  private drawer = inject(MtxDrawer);

  openDrawer() {
    const ref = this.drawer.open(MyPanelComponent, {
      position: 'right',
      width: '320px',
      data: { title: 'Settings Panel' },
    });

    ref.afterDismissed().subscribe(result => {
      console.log('Drawer dismissed with:', result);
    });
  }
}
```

```typescript
// MtxDrawerConfig: position ('top'|'bottom'|'left'|'right'), width, height,
//   data, hasBackdrop, disableClose, panelClass, ariaLabel, closeOnNavigation
// MtxDrawer methods: open(), dismissAll(), getDrawerById()
```

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

### MtxDialog open

Source: https://github.com/ng-matero/extensions/blob/main/projects/docs/src/app/pages/components/dialog/dialog.md

Opens a custom modal dialog using a provided component or template. It accepts a configuration object and the component or template reference to display.

```APIDOC
## open

### Description
Opens a modal dialog containing the given template.

### Method Signature
`open<T>(config: MtxDialogData, componentOrTemplateRef: ComponentType<T> | TemplateRef<any>)`

### Parameters
#### Parameters
- **config** (MtxDialogData) - The dialog configuration object.
- **componentOrTemplateRef** (ComponentType<T> | TemplateRef<any>) - The component or template to load into the dialog.
```

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

### MtxDialog alert

Source: https://github.com/ng-matero/extensions/blob/main/projects/docs/src/app/pages/components/dialog/dialog.md

Displays a simple alert dialog with a single 'OK' button. It takes a title, description, and an optional callback function to execute when the 'OK' button is clicked.

```APIDOC
## alert

### Description
A simple alert dialog with a single button.

### Method Signature
`alert(title: string | Observable<string>, description: string | Observable<string>, onOk: () => void)`

### Parameters
#### Parameters
- **title** (string | Observable<string>) - The dialog title.
- **description** (string | Observable<string>) - The dialog description.
- **onOk** ( () => void) - The ok callback function.
```