Optimus UI

https://optimus.openng.org/
Admin
Optimus UI is an open-source UI component suite for Angular providing over 80 accessible,...
Tokens:334,438
Snippets:2,126
Trust Score:3
Update:1 month ago
Show doc for...
Tokens:
Raw
### Installing OpenNG Icons

Source: https://optimus.openng.org/icons

Install the icon library package via npm.

```bash
npm install @openng/icons
```

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

### Install Optimus UI dependencies

Source: https://optimus.openng.org/installation

Use these commands to install the core library and themes package using your preferred package manager.

```bash
# Using npm
npm install @openng/optimus-ui @openng/optimus-ui-themes

# Using yarn
yarn add @openng/optimus-ui @openng/optimus-ui-themes

# Using pnpm
pnpm add @openng/optimus-ui @openng/optimus-ui-themes
```

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

### Install Optimus UI

Source: https://optimus.openng.org/

Use the Angular CLI to add the Optimus UI package to your project.

```bash
ng add @openng/optimus-ui
```

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

### Basic PickList Implementation

Source: https://optimus.openng.org/picklist

A standard PickList setup using source and target signals with drag and drop enabled.

```typescript
import { Component, OnInit, inject, signal } from '@angular/core';
import { PickListModule } from '@openng/optimus-ui/picklist';
import { ProductService } from '@/service/productservice';
import { Product } from '@/domain/product';

@Component({
    template: `
        <div class="card">
            <p-picklist [source]="sourceProducts()" [target]="targetProducts()" [dragdrop]="true" [responsive]="true" breakpoint="1400px">
                <ng-template let-item #item>
                    {{ item.name }}
                </ng-template>
            </p-picklist>
        </div>
    `,
    standalone: true,
    imports: [PickListModule],
    providers: [ProductService]
})
export class PicklistBasicDemo implements OnInit {
    private productService = inject(ProductService);
    sourceProducts = signal<Product[]>([]);
    targetProducts = signal<Product[]>([]);

    ngOnInit() {
        this.carService.getProductsSmall().then((products) => {
            this.sourceProducts.set(products);
        });
    }
}
```

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

### Implement a Basic Menubar in Angular

Source: https://optimus.openng.org/menubar

Demonstrates the basic setup of a Menubar component using a model of MenuItem objects.

```typescript
import { Component, OnInit } from '@angular/core';
import { MenubarModule } from '@openng/optimus-ui/menubar';
import { MenuItem } from '@openng/optimus-ui/api';

@Component({
    template: `
        <div class="card">
            <p-menubar [model]="items" />
        </div>
    `,
    standalone: true,
    imports: [MenubarModule]
})
export class MenubarBasicDemo implements OnInit {
    items: MenuItem[] | undefined;

    ngOnInit() {
        this.items = [
            {
                label: 'Home',
                icon: 'pi pi-home'
            },
            {
                label: 'Features',
                icon: 'pi pi-star'
            },
            {
                label: 'Projects',
                icon: 'pi pi-search',
                items: [
                    {
                        label: 'Components',
                        icon: 'pi pi-bolt'
                    },
                    {
                        label: 'Blocks',
                        icon: 'pi pi-server'
                    },
                    {
                        label: 'UI Kit',
                        icon: 'pi pi-pencil'
                    },
                    {
                        label: 'Templates',
                        icon: 'pi pi-palette',
                        items: [
                            {
                                label: 'Apollo',
                                icon: 'pi pi-palette'
                            },
                            {
                                label: 'Ultima',
                                icon: 'pi pi-palette'
                            }
                        ]
                    }
                ]
            },
            {
                label: 'Contact',
                icon: 'pi pi-envelope'
            }
        ];
    }
}
```

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

### Customize Menu with Templates

Source: https://optimus.openng.org/menu

Shows how to use the start template slot to inject custom content into the menu.

```typescript
import { Component, OnInit } from '@angular/core';
import { AvatarModule } from '@openng/optimus-ui/avatar';
import { BadgeModule } from '@openng/optimus-ui/badge';
import { Menu, MenuModule } from '@openng/optimus-ui/menu';
import { RippleModule } from '@openng/optimus-ui/ripple';
import { MenuItem } from '@openng/optimus-ui/api';

@Component({
    template: `
        <div class="card">
            <p-menu [model]="items" class="flex justify-center" styleClass="w-full md:w-60">
                <ng-template #start>
                    <span class="inline-flex items-center gap-1 px-2 py-2">
                        <svg width="31" height="33" viewBox="0 0 31 33" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
                            <path d="M15.1934 0V0V0L0.0391235 5.38288L2.35052 25.3417L15.1934 32.427V32.427V32.427L28.0364 25.3417L30.3478 5.38288L15.1934 0Z" fill="var(--p-primary-color)" />
                            <mask id="mask0_1_52" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="31" height="33">
                                <path d="M15.1934 0V0V0L0.0391235 5.38288L2.35052 25.3417L15.1934 32.427V32.427V32.427L28.0364 25.3417L30.3478 5.38288L15.1934 0Z" fill="var(--ground-background)" />
                            </mask>
                            <g mask="url(#mask0_1_52)">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M15.1935 0V3.5994V3.58318V20.0075V20.0075V32.427V32.427L28.0364 25.3417L30.3478 5.38288L15.1935 0Z" fill="var(--p-primary-color)" />
                            </g>
                            <path d="M19.6399 15.3776L18.1861 15.0547L19.3169 16.6695V21.6755L23.1938 18.4458V12.9554L21.4169 13.6013L19.6399 15.3776Z" fill="var(--ground-background)" />
                            <path d="M10.5936 15.3776L12.0474 15.0547L10.9166 16.6695V21.6755L7.03966 18.4458V12.9554L8.81661 13.6013L10.5936 15.3776Z" fill="var(--ground-background)" />
                            <path
                                fill-rule="evenodd"
                                clip-rule="evenodd"
                                d="M11.3853 16.9726L12.6739 15.0309L13.4793 15.5163H16.7008L17.5061 15.0309L18.7947 16.9726V24.254L17.8283 25.7103L16.7008 26.843H13.4793L12.3518 25.7103L11.3853 24.254V16.9726Z"
                                fill="var(--ground-background)"
                            />
                            <path d="M19.3168 24.7437L21.4168 22.6444V20.5451L19.3168 22.3214V24.7437Z" fill="var(--ground-background)" />
                            <path d="M10.9166 24.7437L8.81662 22.6444V20.5451L10.9166 22.3214V24.7437Z" fill="var(--ground-background)" />
                            <path
                                fill-rule="evenodd"
                                clip-rule="evenodd"
                                d="M13.0167 5.68861L11.7244 8.7568L13.8244 14.8932H14.7936V5.68861H13.0167ZM15.4397 5.68861V14.8932H16.5706L18.5091 8.7568L17.2167 5.68861H15.4397Z"
                                fill="var(--ground-background)"
                            />
                            <path d="M13.8244 14.8932L6.87813 12.3094L5.90888 8.27235L11.8859 8.7568L13.9859 14.8932H13.8244Z" fill="var(--ground-background)" />
```

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

### Overlay Events Setup

Source: https://optimus.openng.org/overlay

Template structure for handling overlay events.

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

@Component({
    template: `
        <section class="py-6">
        </section>
    `,
    standalone: true,
    imports: []
})
export class OverlayEventsDemo {}
```

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

### Basic MegaMenu Implementation

Source: https://optimus.openng.org/megamenu

Demonstrates the basic setup of a MegaMenu component using a model of menu items defined in the component class.

```typescript
import { Component, OnInit } from '@angular/core';
import { MegaMenuModule } from '@openng/optimus-ui/megamenu';
import { MegaMenuItem } from '@openng/optimus-ui/api';
import { Table } from '@openng/optimus-ui/table';

@Component({
    template: `
        <div class="card">
            <p-megamenu [model]="items" />
        </div>
    `,
    standalone: true,
    imports: [MegaMenuModule]
})
export class MegamenuBasicDemo implements OnInit {
    items: MegaMenuItem[] | undefined;

    ngOnInit() {
        this.items = [
            {
                label: 'Furniture',
                icon: 'pi pi-box',
                items: [
                    [
                        {
                            label: 'Living Room',
                            items: [{ label: 'Accessories' }, { label: 'Armchair' }, { label: 'Coffee Table' }, { label: 'Couch' }, { label: 'TV Stand' }]
                        }
                    ],
                    [
                        {
                            label: 'Kitchen',
                            items: [{ label: 'Bar stool' }, { label: 'Chair' }, { label: 'Table' }]
                        },
                        {
                            label: 'Bathroom',
                            items: [{ label: 'Accessories' }]
                        }
                    ],
                    [
                        {
                            label: 'Bedroom',
                            items: [{ label: 'Bed' }, { label: 'Chaise lounge' }, { label: 'Cupboard' }, { label: 'Dresser' }, { label: 'Wardrobe' }]
                        }
                    ],
                    [
                        {
                            label: 'Office',
                            items: [{ label: 'Bookcase' }, { label: 'Cabinet' }, { label: 'Chair' }, { label: 'Desk' }, { label: 'Executive Chair' }]
                        }
                    ]
                ]
            },
            {
                label: 'Electronics',
                icon: 'pi pi-mobile',
                items: [
                    [
                        {
                            label: 'Computer',
                            items: [{ label: 'Monitor' }, { label: 'Mouse' }, { label: 'Notebook' }, { label: 'Keyboard' }, { label: 'Printer' }, { label: 'Storage' }]
                        }
                    ],
                    [
                        {
                            label: 'Home Theater',
                            items: [{ label: 'Projector' }, { label: 'Speakers' }, { label: 'TVs' }]
                        }
                    ],
                    [
                        {
                            label: 'Gaming',
                            items: [{ label: 'Accessories' }, { label: 'Console' }, { label: 'PC' }, { label: 'Video Games' }]
                        }
                    ],
                    [
                        {
                            label: 'Appliances',
                            items: [{ label: 'Coffee Machine' }, { label: 'Fridge' }, { label: 'Oven' }, { label: 'Vaccum Cleaner' }, { label: 'Washing Machine' }]
                        }
                    ]
                ]
            },
            {
                label: 'Sports',
                icon: 'pi pi-clock',
                items: [
                    [
                        {
                            label: 'Football',
                            items: [{ label: 'Kits' }, { label: 'Shoes' }, { label: 'Shorts' }, { label: 'Training' }]
                        }
                    ],
                    [
                        {
                            label: 'Running',
                            items: [{ label: 'Accessories' }, { label: 'Shoes' }, { label: 'T-Shirts' }, { label: 'Shorts' }]
                        }
                    ],
                    [
                        {
                            label: 'Swimming',
                            items: [{ label: 'Kickboard' }, { label: 'Nose Clip' }, { label: 'Swimsuits' }, { label: 'Paddles' }]
                        }
                    ],
                    [
                        {
                            label: 'Tennis',
                            items: [{ label: 'Balls' }, { label: 'Rackets' }, { label: 'Shoes' }, { label: 'Training' }]
                        }
                    ]
                ]
            }
        ];
    }
}
```

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

### Initialize DataView Component Logic

Source: https://optimus.openng.org/dataview

Example of setting up component data and sort options within the ngOnInit lifecycle hook.

```typescript
ngOnInit() {
        this.productService.getProducts().then((data) => this.products.set(data.slice(0, 5)));
        this.sortOptions = [
            { label: 'Price High to Low', value: '!price' },
            { label: 'Price Low to High', value: 'price' }
        ];
    }
```

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

### Basic ConfirmPopup Implementation

Source: https://optimus.openng.org/confirmpopup

Demonstrates the basic setup of a ConfirmPopup using the p-confirmPopup tag and ConfirmationService to handle confirmation actions.

```typescript
import { Component, inject } from '@angular/core';
import { ButtonModule } from '@openng/optimus-ui/button';
import { ConfirmPopupModule } from '@openng/optimus-ui/confirmpopup';
import { ToastModule } from '@openng/optimus-ui/toast';
import { MessageService, ConfirmationService } from '@openng/optimus-ui/api';

@Component({
    template: `
        <div class="card flex justify-center gap-2">
            <p-toast />
            <p-confirmpopup />
            <p-button (onClick)="confirm1($event)" label="Save" [outlined]="true" />
            <p-button (onClick)="confirm2($event)" label="Delete" severity="danger" [outlined]="true" />
        </div>
    `,
    standalone: true,
    imports: [ButtonModule, ConfirmPopupModule, ToastModule],
    providers: [ConfirmationService, MessageService]
})
export class ConfirmpopupBasicDemo {
    private confirmationService = inject(ConfirmationService);
    private messageService = inject(MessageService);

    confirm2(event: Event) {
        this.confirmationService.confirm({
            target: event.currentTarget as EventTarget,
            message: 'Do you want to delete this record?',
            icon: 'pi pi-info-circle',
            rejectButtonProps: {
                label: 'Cancel',
                severity: 'secondary',
                outlined: true
            },
            acceptButtonProps: {
                label: 'Delete',
                severity: 'danger'
            },
            accept: () => {
                this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
            },
            reject: () => {
                this.messageService.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
            }
        });
    }
}
```

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

### Advanced Dock Component Implementation

Source: https://optimus.openng.org/dock

A comprehensive example showing the integration of a Dock with various UI components like Menubar, Dialogs, and Galleria.

```typescript
@Component({
    template: `
        <div class="card dock-demo">
            <p-menubar [model]="menubarItems">
                <ng-template #start>
                    <i class="pi pi-apple px-2"></i>
                </ng-template>
                <ng-template #end>
                    <i class="pi pi-video px-2"></i>
                    <i class="pi pi-wifi px-2"></i>
                    <i class="pi pi-volume-up px-2"></i>
                    <span class="px-2">Fri 13:07</span>
                    <i class="pi pi-search px-2"></i>
                    <i class="pi pi-bars px-2"></i>
                </ng-template>
            </p-menubar>
            <div class="dock-window">
                <p-dock [model]="dockItems" position="bottom">
                    <ng-template #item let-item>
                        <a [pTooltip]="item.label" tooltipPosition="top" class="p-dock-item-link">
                            <img [alt]="item.label" [src]="item.icon" style="width: 100%" />
                        </a>
                    </ng-template>
                </p-dock>
                <p-toast position="top-center" key="tc" />
                <p-dialog [(visible)]="displayFinder" [breakpoints]="{ '960px': '50vw' }" [style]="{ width: '30vw', height: '18rem' }" [draggable]="false" [resizable]="false" header="Finder">
                    <p-tree [value]="nodes" />
                </p-dialog>
                <p-dialog [maximizable]="true" [(visible)]="displayTerminal" [breakpoints]="{ '960px': '50vw' }" [style]="{ width: '30vw' }" [draggable]="false" [resizable]="false" header="Terminal">
                    <p-terminal welcomeMessage="Welcome to Optimus UI (cmd: 'date', 'greet {0}', 'random')" prompt="optimus $" />
                </p-dialog>
                <p-galleria
                    [(value)]="images"
                    [showThumbnails]="false"
                    [showThumbnailNavigators]="false"
                    [showItemNavigators]="true"
                    [(visible)]="displayGalleria"
                    [circular]="true"
                    [responsiveOptions]="responsiveOptions"
                    [circular]="true"
                    [fullScreen]="true"
                    [containerStyle]="{ width: '400px' }"
                >
                    <ng-template #item let-item>
                        <img [src]="item.itemImageSrc" style="width: 100%; display: block;" />
                    </ng-template>
                </p-galleria>
            </div>
        </div>
    `,
    standalone: true,
    imports: [DialogModule, DockModule, GalleriaModule, MenubarModule, TerminalModule, ToastModule, TreeModule, TooltipModule],
    providers: [NodeService, PhotoService, MessageService]
})
export class DockAdvancedDemo implements OnInit {
    private nodeService = inject(NodeService);
    private photoService = inject(PhotoService);
    private messageService = inject(MessageService);
    displayTerminal: boolean | undefined;
    displayFinder: boolean | undefined;
    displayGalleria: boolean | undefined;
    dockItems: MenuItem[] | undefined;
    menubarItems: any[] | undefined;
    responsiveOptions: any[] | undefined;
    images: any[] | undefined;
    nodes: any[] | undefined;
    subscription: Subscription | undefined;

    ngOnInit() {
        this.dockItems = [
            {
                label: 'Finder',
                tooltipOptions: {
                    tooltipLabel: 'Finder',
                    tooltipPosition: 'top',
                    positionTop: -15,
                    positionLeft: 15,
                    showDelay: 1000
                },
                icon: 'https://optimus.openng.org/demo/dock/finder.svg',
                command: () => {
                    this.displayFinder = true;
                }
            },
            {
                label: 'Terminal',
                tooltipOptions: {
                    tooltipLabel: 'Terminal',
                    tooltipPosition: 'top',
                    positionTop: -15,
                    positionLeft: 15,
                    showDelay: 1000
                },
                icon: 'https://optimus.openng.org/demo/dock/terminal.svg',
                command: () => {
                    this.displayTerminal = true;
                }
            },
            {
                label: 'App Store',
                tooltipOptions: {
                    tooltipLabel: 'App Store',
                    tooltipPosition: 'top',
                    positionTop: -15,
                    positionLeft: 15,
                    showDelay: 1000
                },
                icon: 'https://optimus.openng.org/demo/dock/appstore.svg',
                url: 'https://www.apple.com/app-store/'
            },
            {
                label: 'Safari',
                tooltipOptions: {
                    tooltipLabel: 'Safari',
                    tooltipPosition: 'top',
                    positionTop: -15,
```

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

### Implement a Basic Bar Chart in Angular

Source: https://optimus.openng.org/chart

Demonstrates the setup of a basic bar chart using the ChartModule, including data initialization and styling based on CSS variables.

```typescript
import { Component, OnInit, inject } from '@angular/core';
import { ChartModule } from '@openng/optimus-ui/chart';

@Component({
    template: `
        <div class="card">
            <p-chart type="bar" [data]="basicData" [options]="basicOptions" />
        </div>
    `,
    standalone: true,
    imports: [ChartModule]
})
export class ChartBasicDemo implements OnInit {
    basicData: any;
    basicOptions: any;
    platformId = inject(PLATFORM_ID);
    configService = inject(AppConfigService);

    ngOnInit() {
        this.initChart();
    }

    initChart() {
        if (isPlatformBrowser(this.platformId)) {
            const documentStyle = getComputedStyle(document.documentElement);
            const textColor = documentStyle.getPropertyValue('--p-text-color');
            const textColorSecondary = documentStyle.getPropertyValue('--p-text-muted-color');
            const surfaceBorder = documentStyle.getPropertyValue('--p-content-border-color');
        
            this.basicData = {
                labels: ['Q1', 'Q2', 'Q3', 'Q4'],
                datasets: [
                    {
                        label: 'Sales',
                        data: [540, 325, 702, 620],
                        backgroundColor: ['rgba(249, 115, 22, 0.2)', 'rgba(6, 182, 212, 0.2)', 'rgb(107, 114, 128, 0.2)', 'rgba(139, 92, 246, 0.2)'],
                        borderColor: ['rgb(249, 115, 22)', 'rgb(6, 182, 212)', 'rgb(107, 114, 128)', 'rgb(139, 92, 246)'],
                        borderWidth: 1
                    }
                ]
            };
        
            this.basicOptions = {
                maintainAspectRatio: false,
                aspectRatio: 0.8,
                plugins: {
                    legend: {
                        labels: {
                            color: textColor
                        }
                    }
                },
                scales: {
                    x: {
                        ticks: {
                            color: textColorSecondary
                        },
                        grid: {
                            color: surfaceBorder
                        }
                    },
                    y: {
                        beginAtZero: true,
                        ticks: {
                            color: textColorSecondary
                        },
                        grid: {
                            color: surfaceBorder
                        }
                    }
                }
            };
            this.cd.markForCheck();
        }
    }
}
```

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

### Custom Toolbar Layout with Templates

Source: https://optimus.openng.org/toolbar

Demonstrates how to use the start and end templates to position buttons and avatars within a toolbar.

```typescript
import { Component } from '@angular/core';
import { AvatarModule } from '@openng/optimus-ui/avatar';
import { ButtonModule } from '@openng/optimus-ui/button';
import { ToolbarModule } from '@openng/optimus-ui/toolbar';

@Component({
    template: `
        <div class="card">
            <p-toolbar [style]="{ 'border-radius': '3rem', padding: '1rem 1rem 1rem 1.5rem' }">
                <ng-template #start>
                    <div class="flex items-center gap-2">
                        <svg width="31" height="33" viewBox="0 0 31 33" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 2rem; margin-right: 1rem">
                            <path d="M15.1934 0V0V0L0.0391235 5.38288L2.35052 25.3417L15.1934 32.427V32.427V32.427L28.0364 25.3417L30.3478 5.38288L15.1934 0Z" fill="var(--p-primary-color)" />
                            <mask id="mask0_1_52" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="31" height="33">
                                <path d="M15.1934 0V0V0L0.0391235 5.38288L2.35052 25.3417L15.1934 32.427V32.427V32.427L28.0364 25.3417L30.3478 5.38288L15.1934 0Z" fill="var(--ground-background)" />
                            </mask>
                            <g mask="url(#mask0_1_52)">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M15.1935 0V3.5994V3.58318V20.0075V20.0075V32.427V32.427L28.0364 25.3417L30.3478 5.38288L15.1935 0Z" fill="var(--p-primary-color)" />
                            </g>
                            <path d="M19.6399 15.3776L18.1861 15.0547L19.3169 16.6695V21.6755L23.1938 18.4458V12.9554L21.4169 13.6013L19.6399 15.3776Z" fill="var(--ground-background)" />
                            <path d="M10.5936 15.3776L12.0474 15.0547L10.9166 16.6695V21.6755L7.03966 18.4458V12.9554L8.81661 13.6013L10.5936 15.3776Z" fill="var(--ground-background)" />
                            <path
                                fill-rule="evenodd"
                                clip-rule="evenodd"
                                d="M11.3853 16.9726L12.6739 15.0309L13.4793 15.5163H16.7008L17.5061 15.0309L18.7947 16.9726V24.254L17.8283 25.7103L16.7008 26.843H13.4793L12.3518 25.7103L11.3853 24.254V16.9726Z"
                                fill="var(--ground-background)"
                            />
                            <path d="M19.3168 24.7437L21.4168 22.6444V20.5451L19.3168 22.3214V24.7437Z" fill="var(--ground-background)" />
                            <path d="M10.9166 24.7437L8.81662 22.6444V20.5451L10.9166 22.3214V24.7437Z" fill="var(--ground-background)" />
                            <path
                                fill-rule="evenodd"
                                clip-rule="evenodd"
                                d="M13.0167 5.68861L11.7244 8.7568L13.8244 14.8932H14.7936V5.68861H13.0167ZM15.4397 5.68861V14.8932H16.5706L18.5091 8.7568L17.2167 5.68861H15.4397Z"
                                fill="var(--ground-background)"
                            />
                            <path d="M13.8244 14.8932L6.87813 12.3094L5.90888 8.27235L11.8859 8.7568L13.9859 14.8932H13.8244Z" fill="var(--ground-background)" />
                            <path d="M16.5706 14.8932L23.5169 12.3094L24.4861 8.27235L18.3476 8.7568L16.4091 14.8932H16.5706Z" fill="var(--ground-background)" />
                            <path d="M18.8321 8.27235L22.2245 7.94938L19.9629 5.68861H17.7013L18.8321 8.27235Z" fill="var(--ground-background)" />
                            <path d="M11.4013 8.27235L8.00893 7.94938L10.2705 5.68861H12.5321L11.4013 8.27235Z" fill="var(--ground-background)" />
                        </svg>
                        <p-button label="Files" text plain />
                        <p-button label="Edit" text plain />
                        <p-button label="View" text plain />
                    </div>
                </ng-template>
                <ng-template #end>
                    <div class="flex items-center gap-2">
                        <p-button label="Share" severity="contrast" size="small" />
                        <p-avatar image="https://optimus.openng.org/demo/avatar/amyelsner.png" [style]="{ width: '32px', height: '32px' }" />
                    </div>
                </ng-template>
            </p-toolbar>
        </div>
    `,
    standalone: true,
    imports: [AvatarModule, ButtonModule, ToolbarModule]
})
export class ToolbarCustomDemo {}
```

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

### Implement Basic Toolbar in Angular

Source: https://optimus.openng.org/toolbar

Demonstrates a standard toolbar layout using start, center, and end templates to organize buttons, search inputs, and split buttons.

```typescript
import { Component, OnInit } from '@angular/core';
import { ButtonModule } from '@openng/optimus-ui/button';
import { IconFieldModule } from '@openng/optimus-ui/iconfield';
import { InputIconModule } from '@openng/optimus-ui/inputicon';
import { SplitButtonModule } from '@openng/optimus-ui/splitbutton';
import { ToolbarModule } from '@openng/optimus-ui/toolbar';
import { InputTextModule } from '@openng/optimus-ui/inputtext';
import { MenuItem } from '@openng/optimus-ui/api';

@Component({
    template: `
        <div class="card">
            <p-toolbar>
                <ng-template #start>
                    <p-button icon="pi pi-plus" class="mr-2" text severity="secondary" />
                    <p-button icon="pi pi-print" class="mr-2" text severity="secondary" />
                    <p-button icon="pi pi-upload" text severity="secondary" />
                </ng-template>
                <ng-template #center>
                    <p-iconfield iconPosition="left">
                        <p-inputicon class="pi pi-search" />
                        <input type="text" pInputText placeholder="Search" />
                    </p-iconfield>
                </ng-template>
                <ng-template #end>
                    <p-splitbutton label="Save" [model]="items" />
                </ng-template>
            </p-toolbar>
        </div>
    `,
    standalone: true,
    imports: [ButtonModule, IconFieldModule, InputIconModule, SplitButtonModule, ToolbarModule, InputTextModule]
})
export class ToolbarBasicDemo implements OnInit {
    items: MenuItem[] | undefined;

    ngOnInit() {
        this.items = [
            {
                label: 'Update',
                icon: 'pi pi-refresh'
            },
            {
                label: 'Delete',
                icon: 'pi pi-times'
            }
        ];
    }
}
```

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

### Initialize Optimus UI Provider

Source: https://optimus.openng.org/configuration

Configure the application providers during startup using provideOptimus.

```typescript
import { ApplicationConfig } from '@angular/core';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { provideOptimus } from '@openng/optimus-ui/config';

export const appConfig: ApplicationConfig = {
    providers: [
        provideAnimationsAsync(),
        provideOptimus({ /* options */ })
    ]
};
```

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

### Basic Breadcrumb Implementation

Source: https://optimus.openng.org/breadcrumb

Demonstrates a standard breadcrumb setup using the BreadcrumbModule and MenuItem interface.

```typescript
import { Component, OnInit } from '@angular/core';
import { BreadcrumbModule } from '@openng/optimus-ui/breadcrumb';
import { MenuItem } from '@openng/optimus-ui/api';

@Component({
    template: `
        <div class="card flex justify-center">
            <p-breadcrumb [model]="items" [home]="home" />
        </div>
    `,
    standalone: true,
    imports: [BreadcrumbModule]
})
export class BreadcrumbBasicDemo implements OnInit {
    items: MenuItem[] | undefined;
    home: MenuItem | undefined;

    ngOnInit() {
        this.items = [{ label: 'Electronics' }, { label: 'Computer' }, { label: 'Accessories' }, { label: 'Keyboard' }, { label: 'Wireless' }];
        this.home = { icon: 'pi pi-home' };
    }
}
```

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

### Select Data with Popover

Source: https://optimus.openng.org/popover

Example of retrieving and selecting data from within a popover component using Angular.

```typescript
import { Component } from '@angular/core';
import { ButtonModule } from '@openng/optimus-ui/button';
import { Popover, PopoverModule } from '@openng/optimus-ui/popover';

@Component({
    template: `
        <div class="card flex justify-center">
            <p-button type="button" [label]="selectedMember ? selectedMember.name : 'Select Member'" (onClick)="toggle($event)" styleClass="min-w-48" />
            <p-popover #op>
                <div class="flex flex-col gap-4">
                    <div>
                        <span class="font-medium block mb-2">Team Members</span>
                        <ul class="list-none p-0 m-0 flex flex-col">
                            <li *ngFor="let member of members" class="flex items-center gap-2 px-2 py-3 hover:bg-emphasis cursor-pointer rounded-border" (click)="selectMember(member)">
                                <img [src]="'https://optimus.openng.org/demo/avatar/' + member.image" style="width: 32px" />
                                <div>
                                    <span class="font-medium">{{ member.name }}</span>
                                    <div class="text-sm text-surface-500 dark:text-surface-400">{{ member.email }}</div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </p-popover>
        </div>
    `,
    standalone: true,
    imports: [ButtonModule, PopoverModule]
})
export class PopoverSelectdataDemo {
    selectedMember: any = null;
    members: any[];

    toggle(event) {
        this.op.toggle(event);
    }

    selectMember(member) {
        this.selectedMember = member;
        this.op.hide();
    }
}
```

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

### Basic Overlay Implementation

Source: https://optimus.openng.org/overlay

Demonstrates a basic overlay component with responsive settings and visibility toggling.

```typescript
import { Component } from '@angular/core';
import { ButtonModule } from '@openng/optimus-ui/button';

@Component({
    template: `
        <div class="card flex justify-center">
            <p-button (click)="toggle()" label="Show Overlay"></p-button>
            <p-overlay [(visible)]="overlayVisible" [responsive]="{ breakpoint: '640px', direction: 'bottom', contentStyleClass: 'h-20rem' }" contentStyleClass="p-6 bg-surface-0 dark:bg-surface-900 shadow rounded-border"> Content </p-overlay>
        </div>
    `,
    standalone: true,
    imports: [ButtonModule]
})
export class OverlayBasicDemo {
    overlayVisible: boolean = false;

    toggle() {
        this.overlayVisible = !this.overlayVisible;
    }
}
```

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

### Implementing ContextMenu with Router Navigation

Source: https://optimus.openng.org/contextmenu

Demonstrates configuring a ContextMenu with different navigation types: routerLink, programmatic routing via command, and external URL navigation.

```typescript
import { Component, OnInit } from '@angular/core';
import { ContextMenuModule } from '@openng/optimus-ui/contextmenu';
import { MenuItem } from '@openng/optimus-ui/api';

@Component({
    template: `
        <div class="card flex justify-center">
            <span #span class="inline-flex items-center justify-center border-2 border-primary rounded w-16 h-16" aria-haspopup="true">
                <svg width="31" height="33" viewBox="0 0 31 33" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
                    <path d="M15.1934 0V0V0L0.0391235 5.38288L2.35052 25.3417L15.1934 32.427V32.427V32.427L28.0364 25.3417L30.3478 5.38288L15.1934 0Z" fill="var(--p-primary-color)" />
                    <mask id="mask0_1_52" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="31" height="33">
                        <path d="M15.1934 0V0V0L0.0391235 5.38288L2.35052 25.3417L15.1934 32.427V32.427V32.427L28.0364 25.3417L30.3478 5.38288L15.1934 0Z" fill="var(--ground-background)" />
                    </mask>
                    <g mask="url(#mask0_1_52)">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M15.1935 0V3.5994V3.58318V20.0075V20.0075V32.427V32.427L28.0364 25.3417L30.3478 5.38288L15.1935 0Z" fill="var(--p-primary-color)" />
                    </g>
                    <path d="M19.6399 15.3776L18.1861 15.0547L19.3169 16.6695V21.6755L23.1938 18.4458V12.9554L21.4169 13.6013L19.6399 15.3776Z" fill="var(--ground-background)" />
                    <path d="M10.5936 15.3776L12.0474 15.0547L10.9166 16.6695V21.6755L7.03966 18.4458V12.9554L8.81661 13.6013L10.5936 15.3776Z" fill="var(--ground-background)" />
                    <path
                        fill-rule="evenodd"
                        clip-rule="evenodd"
                        d="M11.3853 16.9726L12.6739 15.0309L13.4793 15.5163H16.7008L17.5061 15.0309L18.7947 16.9726V24.254L17.8283 25.7103L16.7008 26.843H13.4793L12.3518 25.7103L11.3853 24.254V16.9726Z"
                        fill="var(--ground-background)"
                    />
                    <path d="M19.3168 24.7437L21.4168 22.6444V20.5451L19.3168 22.3214V24.7437Z" fill="var(--ground-background)" />
                    <path d="M10.9166 24.7437L8.81662 22.6444V20.5451L10.9166 22.3214V24.7437Z" fill="var(--ground-background)" />
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M13.0167 5.68861L11.7244 8.7568L13.8244 14.8932H14.7936V5.68861H13.0167ZM15.4397 5.68861V14.8932H16.5706L18.5091 8.7568L17.2167 5.68861H15.4397Z" fill="var(--ground-background)" />
                    <path d="M13.8244 14.8932L6.87813 12.3094L5.90888 8.27235L11.8859 8.7568L13.9859 14.8932H13.8244Z" fill="var(--ground-background)" />
                    <path d="M16.5706 14.8932L23.5169 12.3094L24.4861 8.27235L18.3476 8.7568L16.4091 14.8932H16.5706Z" fill="var(--ground-background)" />
                    <path d="M18.8321 8.27235L22.2245 7.94938L19.9629 5.68861H17.7013L18.8321 8.27235Z" fill="var(--ground-background)" />
                    <path d="M11.4013 8.27235L8.00893 7.94938L10.2705 5.68861H12.5321L11.4013 8.27235Z" fill="var(--ground-background)" />
                </svg>
            </span>
            <p-contextmenu [target]="span" [model]="items" />
        </div>
    `,
    standalone: true,
    imports: [ContextMenuModule]
})
export class ContextmenuRouterDemo implements OnInit {
    items: MenuItem[] | undefined;

    ngOnInit() {
        this.items = [
            {
                label: 'Router Link',
                icon: 'pi pi-palette',
                routerLink: '/theming'
            },
            {
                label: 'Programmatic',
                icon: 'pi pi-link',
                command: () => {
                    this.router.navigate(['/installation']);
                }
            },
            {
                label: 'External',
                icon: 'pi pi-home',
                url: 'https://angular.io//'
            }
        ];
    }
}
```

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

### provideOptimus(config)

Source: https://optimus.openng.org/theming

Configures the Optimus UI library with a theme preset and CSS generation options.

```APIDOC
## provideOptimus(config)

### Description
Initializes the Optimus UI library within an Angular application configuration. It accepts a configuration object to define the theme preset and CSS generation behavior.

### Parameters
- **config** (Object) - Required
  - **theme** (Object) - Optional: Configuration for the theme.
    - **preset** (Object) - Required: The theme preset to use (e.g., Aura).
  - **options** (Object) - Optional: Configuration for CSS generation.
    - **prefix** (string) - Optional: The prefix for CSS variables (default: 'p').
    - **darkModeSelector** (string) - Optional: CSS rule for dark mode encapsulation (default: 'system').
    - **cssLayer** (Object) - Optional: Configuration for CSS layers.
      - **name** (string) - Required: Name of the CSS layer.
      - **order** (string) - Required: Order of the CSS layers.

### Example
```typescript
provideOptimus({
    theme: { preset: Aura },
    options: {
        prefix: 'my',
        darkModeSelector: '.my-app-dark',
        cssLayer: {
            name: 'optimus',
            order: 'app-styles, optimus, another-css-library'
        }
    }
})
```
```
Tokens:
Raw