### BEM SCSS Implementation Example

Source: https://github.com/brisanet/ion-plus/blob/main/docs/bem- style-guide.md

Shows how to implement the BEM naming convention using SCSS, leveraging parent selectors for cleaner nesting. This example demonstrates the structure for a header component with its elements.

```scss
.header {
  // rules
  &__logo {
    // rules
  }
  &__search {
    // rules
  }
  &__list {
    // rules
  }
  &__item {
    // rules
  }
}
```

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

### BEM CSS Examples

Source: https://github.com/brisanet/ion-plus/blob/main/docs/bem- style-guide.md

Demonstrates BEM naming conventions for CSS classes, including block modifiers and element selectors. These examples illustrate how to apply BEM for different states and variations of components.

```css
.button--red {
  ...
};

.button--blue {
  ...
};

.button--sm {
  ...
}

.button--md {
  ...
}
```

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

### BEM HTML Structure Example

Source: https://github.com/brisanet/ion-plus/blob/main/docs/bem- style-guide.md

Illustrates the BEM naming convention applied to HTML elements for a header component. This example shows how to structure parent blocks, child elements, and nested lists using BEM syntax.

```html
<header class="header">
  <img class="header__logo" />
  <div class="header__search"></div>
  <ul class="header__list">
    <li class="header__item"></li>
    <li class="header__item"></li>
  </ul>
</header>
```

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

### BEM Conditional Element Example

Source: https://github.com/brisanet/ion-plus/blob/main/docs/bem- style-guide.md

Illustrates how to combine block and modifier classes with element classes in HTML to represent conditional states. This example shows a button that is in a 'loading' state with a spinner element.

```html
<button class="btn btn--loading">
  <div class="btn__spinner"></div>
</button>
```

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

### IonIconComponent Examples in Angular

Source: https://context7.com/brisanet/ion-plus/llms.txt

Shows how to use the IonIconComponent from the Ion Plus library in Angular. Demonstrates basic icon usage, custom size and color, and different highlight effects.

```typescript
import { Component } from '@angular/core';
import { IonIconComponent } from '@brisanet/ion-plus';

@Component({
  selector: 'app-icons',
  standalone: true,
  imports: [IonIconComponent],
  template: `
    <!-- Basic icon -->
    <ion-icon type="check-solid"></ion-icon>

    <!-- Custom size and color -->
    <ion-icon
      type="star"
      [size]="32"
      color="#FF5722">
    </ion-icon>

    <!-- Icon with simple highlight -->
    <ion-icon
      type="info-solid"
      [size]="24"
      color="#2196F3"
      highlight="simple">
    </ion-icon>

    <!-- Icon with double highlight -->
    <ion-icon
      type="exclamation-solid"
      [size]="48"
      color="#FFC107"
      highlight="double">
    </ion-icon>
  `
})
export class IconsComponent {}
```

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

### IonButtonComponent Examples in Angular

Source: https://context7.com/brisanet/ion-plus/llms.txt

Demonstrates the usage of the IonButtonComponent from the Ion Plus library in an Angular application. Shows various styles, sizes, states, and icon configurations for buttons.

```typescript
import { Component } from '@angular/core';
import { IonButtonComponent } from '@brisanet/ion-plus';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [IonButtonComponent],
  template: `
    <!-- Primary button with label -->
    <ion-button
      label="Submit"
      type="primary"
      size="md"
      (ionOnClick)="handleClick()">
    </ion-button>

    <!-- Button with icon -->
    <ion-button
      label="Download"
      [icon]="{ type: 'download', rightPosition: true }"
      type="secondary">
    </ion-button>

    <!-- Loading state button -->
    <ion-button
      label="Processing..."
      [loading]="isLoading"
      [disabled]="isLoading">
    </ion-button>

    <!-- Danger button -->
    <ion-button
      label="Delete"
      type="primary"
      [danger]="true"
      shape="rounded">
    </ion-button>

    <!-- Circle icon button -->
    <ion-button
      [icon]="{ type: 'plus' }"
      shape="circle"
      size="lg">
    </ion-button>
  `
})
export class ExampleComponent {
  isLoading = false;

  handleClick(): void {
    this.isLoading = true;
    // Perform action
  }
}
```

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

### Clone and Run Ion Plus Project

Source: https://github.com/brisanet/ion-plus/blob/main/README.md

Clones the Ion Plus repository and installs its dependencies using yarn. This is for running the project locally, often for development or testing purposes.

```bash
git clone https://github.com/Brisanet/ion-plus.git
yarn install
yarn run storybook
```

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

### Install Ion Plus Package

Source: https://github.com/brisanet/ion-plus/blob/main/README.md

Installs the Ion Plus package as a dependency in your project using npm. This is the primary method for integrating Ion Plus into your existing applications.

```bash
npm i @brisanet/ion-plus
```

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

### BEM Nested Element Structure Example

Source: https://github.com/brisanet/ion-plus/blob/main/docs/bem- style-guide.md

Demonstrates two approaches for handling nested elements within a BEM structure. The first uses a single block with nested elements, while the second introduces a new block for the nested component.

```html
<ul class="list">
  <li class="list__item">
    <h2 class="list__title">My publication</h2>
  </li>
</ul>

or

<ul class="list">
  <li class="list__item publication">
    <h2 class="publication__title">My publication</h2>
  </li>
</ul>
```

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

### IonAlertComponent Examples in Angular

Source: https://context7.com/brisanet/ion-plus/llms.txt

Illustrates the implementation of the IonAlertComponent from the Ion Plus library in Angular. Covers different alert types, closable alerts, and custom content using ng-template.

```typescript
import { Component } from '@angular/core';
import { IonAlertComponent } from '@brisanet/ion-plus';

@Component({
  selector: 'app-alerts',
  standalone: true,
  imports: [IonAlertComponent],
  template: `
    <!-- Success alert -->
    <ion-alert
      type="success"
      message="Operation completed successfully!"
      description="Your changes have been saved.">
    </ion-alert>

    <!-- Warning alert with close button -->
    <ion-alert
      type="warning"
      message="Please review your input"
      [closable]="true">
    </ion-alert>

    <!-- Info alert without background -->
    <ion-alert
      type="info"
      message="New features available"
      [hideBackground]="true">
    </ion-alert>

    <!-- Negative alert without border radius -->
    <ion-alert
      type="negative"
      message="Error occurred"
      description="Please try again later."
      [noRadius]="true">
    </ion-alert>

    <!-- Custom body alert -->
    <ion-alert type="info" [customBody]="customTemplate">
    </ion-alert>
    <ng-template #customTemplate>
      <div>
        <h4>Custom Alert Content</h4>
        <p>This is a fully customized alert body.</p>
      </div>
    </ng-template>
  `
})
export class AlertsComponent {}
```

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

### Implement Tab Navigation with IonTabGroupComponent (TypeScript)

Source: https://context7.com/brisanet/ion-plus/llms.txt

Illustrates the usage of the IonTabGroupComponent for creating tabbed interfaces. It covers both horizontal and vertical tab layouts, customizable borders, and size options. The example also shows how to handle tab selection events and dynamically render content based on the active tab.

```typescript
import { Component } from '@angular/core';
import { IonTabGroupComponent } from '@brisanet/ion-plus';

@Component({
  selector: 'app-tabs',
  standalone: true,
  imports: [IonTabGroupComponent],
  template: `
    <!-- Horizontal tabs -->
    <ion-tab-group
      [tabs]="tabs"
      direction="horizontal"
      border="bottom"
      size="md"
      (tabSelected)="onTabSelect($event)">
    </ion-tab-group>

    <!-- Vertical tabs -->
    <ion-tab-group
      [tabs]="verticalTabs"
      direction="vertical"
      border="right"
      size="sm">
    </ion-tab-group>

    <!-- Tab content based on selection -->
    @switch (activeTab) {
      @case ('overview') {
        <div>Overview content here</div>
      }
      @case ('details') {
        <div>Details content here</div>
      }
      @case ('settings') {
        <div>Settings content here</div>
      }
    }
  `
})
export class TabsComponent {
  activeTab = 'overview';

  tabs = [
    { label: 'Overview', selected: true },
    { label: 'Details', selected: false },
    { label: 'Settings', selected: false },
    { label: 'Disabled', selected: false, disabled: true }
  ];

  verticalTabs = [
    { label: 'Profile', selected: true, iconType: 'user' },
    { label: 'Security', selected: false, iconType: 'lock' },
    { label: 'Notifications', selected: false, iconType: 'bell' }
  ];

  onTabSelect(tab: any): void {
    this.activeTab = tab.label.toLowerCase();
    console.log('Selected tab:', tab);
  }
}

```

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

### IonSwitchComponent: Toggle Switch in Angular with Reactive Forms

Source: https://context7.com/brisanet/ion-plus/llms.txt

Details the IonSwitchComponent for creating toggle switches in Angular, supporting ControlValueAccessor for seamless integration with reactive forms. Examples include basic usage, different sizes, disabled states, and form control binding.

```typescript
import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { IonSwitchComponent } from '@brisanet/ion-plus';

@Component({
  selector: 'app-switches',
  standalone: true,
  imports: [IonSwitchComponent, ReactiveFormsModule],
  template: `
    <!-- Basic switch -->
    <ion-switch
      key="notifications"
      [(value)]="notificationsEnabled"
      (valueChange)="onToggle($event)">
    </ion-switch>

    <!-- Different sizes -->
    <ion-switch key="small" size="sm" [(value)]="smallSwitch"></ion-switch>
    <ion-switch key="medium" size="md" [(value)]="mediumSwitch"></ion-switch>
    <ion-switch key="large" size="lg" [(value)]="largeSwitch"></ion-switch>

    <!-- Disabled switch -->
    <ion-switch
      key="disabled"
      [(value)]="disabledValue"
      [disabled]="true">
    </ion-switch>

    <!-- With reactive forms -->
    <ion-switch
      key="reactive"
      [formControl]="darkModeControl">
    </ion-switch>
  `
})
export class SwitchesComponent {
  notificationsEnabled = true;
  smallSwitch = false;
  mediumSwitch = true;
  largeSwitch = false;
  disabledValue = true;
  darkModeControl = new FormControl(false);

  onToggle(value: boolean): void {
    console.log('Notifications:', value ? 'enabled' : 'disabled');
  }
}
```

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

### Displaying Configuration Title (Angular-like)

Source: https://github.com/brisanet/ion-plus/blob/main/projects/ion/src/lib/modal/modal.component.html

Displays the title fetched from the application's configuration. This directive assumes a `configuration().title` property exists and holds the string to be displayed.

```html
{{ configuration().title }}
```

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

### Conditional Rendering Logic in ION-Plus

Source: https://github.com/brisanet/ion-plus/blob/main/projects/ion/src/lib/badge/badge.component.html

This snippet demonstrates conditional rendering based on the 'dot()' function. If 'dot()' returns true, it further checks 'showIcon()' and 'showLabel()'. If 'showLabel()' is true, it displays the 'label()'. Otherwise, if 'dot()' is false, it displays 'displayLabel()'.

```C#
@if (dot()) {

@if (showIcon()) { } 

@if (showLabel()) { {{ label() }} } } @else { {{ displayLabel() }} }
```

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

### IonTagComponent: Categorization Labels in Angular

Source: https://context7.com/brisanet/ion-plus/llms.txt

Illustrates the IonTagComponent for creating customizable labels or tags in Angular. Supports various status colors, outline/filled styles, and optional icons. Requires @brisanet/ion-plus.

```typescript
import { Component } from '@angular/core';
import { IonTagComponent } from '@brisanet/ion-plus';

@Component({
  selector: 'app-tags',
  standalone: true,
  imports: [IonTagComponent],
  template: `
    <!-- Status tags -->
    <ion-tag label="Active" status="success"></ion-tag>
    <ion-tag label="Pending" status="warning"></ion-tag>
    <ion-tag label="Error" status="negative"></ion-tag>
    <ion-tag label="Info" status="info"></ion-tag>
    <ion-tag label="Default" status="neutral"></ion-tag>

    <!-- Outline vs filled -->
    <ion-tag label="Outline" [outline]="true" status="success"></ion-tag>
    <ion-tag label="Filled" [outline]="false" status="success"></ion-tag>

    <!-- With icons -->
    <ion-tag label="Settings" icon="settings" status="info"></ion-tag>
    <ion-tag label="User" icon="user" status="neutral"></ion-tag>

    <!-- Custom color -->
    <ion-tag label="Custom" color="#9C27B0"></ion-tag>
    <ion-tag label="Brand" color="#FF5722"></ion-tag>
  `
})
export class TagsComponent {}
```

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

### Configure Prettier in VS Code

Source: https://github.com/brisanet/ion-plus/blob/main/README.md

Configures VS Code to use Prettier for code formatting on save, integrating with ESLint for consistent code style. This ensures code quality and maintainability.

```json
{
  "editor.formatOnSave": true,
  "prettier.eslintIntegration": true
}
```

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

### Conditional Description Display in ION Plus

Source: https://github.com/brisanet/ion-plus/blob/main/projects/ion/src/lib/alert/alert.component.html

This code illustrates the conditional display of a description in the ION Plus project. It checks if a description is present and renders it if the condition is met. This is useful for providing additional context or details.

```html
@if (!!description()) { {{ description() }} }
```

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

### Display Toast Notifications with IonNotificationService (TypeScript)

Source: https://context7.com/brisanet/ion-plus/llms.txt

Demonstrates how to use the IonNotificationService to display various types of toast notifications including success, info, warning, and error messages. It also shows how to configure custom animations and auto-dismiss behavior. This service is crucial for providing user feedback within the application.

```typescript
import { Component, inject } from '@angular/core';
import { IonNotificationService, IonButtonComponent } from '@brisanet/ion-plus';

@Component({
  selector: 'app-notifications',
  standalone: true,
  imports: [IonButtonComponent],
  template: `
    <ion-button label="Success" type="primary" (ionOnClick)="showSuccess()">
    </ion-button>
    <ion-button label="Info" type="secondary" (ionOnClick)="showInfo()">
    </ion-button>
    <ion-button label="Warning" type="ghost" (ionOnClick)="showWarning()">
    </ion-button>
    <ion-button label="Error" [danger]="true" (ionOnClick)="showError()">
    </ion-button>
    <ion-button label="Fixed" type="dashed" (ionOnClick)="showFixed()">
    </ion-button>
  `
})
export class NotificationsComponent {
  private notificationService = inject(IonNotificationService);

  showSuccess(): void {
    this.notificationService.success(
      'Success!',
      'Your changes have been saved successfully.',
      { fadeIn: 'fadeInUp', fadeOut: 'fadeOutUp' },
      () => console.log('Success notification closed')
    );
  }

  showInfo(): void {
    this.notificationService.info(
      'Information',
      'New updates are available for your application.',
      { icon: 'info-solid' }
    );
  }

  showWarning(): void {
    this.notificationService.warning(
      'Warning',
      'Please review your input before proceeding.',
      { fadeIn: 'fadeInRight', fadeOut: 'fadeOutRight' }
    );
  }

  showError(): void {
    this.notificationService.error(
      'Error',
      'An unexpected error occurred. Please try again.',
      { icon: 'close-solid' },
      () => console.log('Error notification closed')
    );
  }

  showFixed(): void {
    this.notificationService.info(
      'Fixed Notification',
      'This notification will not auto-dismiss. Click the close button to remove it.',
      { fixed: true }
    );
  }
}

```

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

### Creating Styled Links with IonLinkComponent in Angular

Source: https://context7.com/brisanet/ion-plus/llms.txt

The IonLinkComponent provides styled link elements with icon support and click handling. It can be configured with various properties like 'label', 'link', 'target', 'icon', 'iconSide', 'size', 'bold', and 'disabled'.

```typescript
import { Component } from '@angular/core';
import { IonLinkComponent } from '@brisanet/ion-plus';

@Component({
  selector: 'app-links',
  standalone: true,
  imports: [IonLinkComponent],
  template: `
    <!-- Basic link -->
    <ion-link
      label="Learn more"
      link="https://example.com"
      target="_blank">
    </ion-link>

    <!-- Link with icon -->
    <ion-link
      label="Download"
      icon="download"
      iconSide="right"
      link="/files/document.pdf">
    </ion-link>

    <!-- Icon on left -->
    <ion-link
      label="Go back"
      icon="left2"
      iconSide="left"
      (ionOnClick)="goBack()">
    </ion-link>

    <!-- Different sizes -->
    <ion-link label="Small link" size="sm"></ion-link>
    <ion-link label="Medium link" size="md"></ion-link>

    <!-- Bold link -->
    <ion-link label="Important link" [bold]="true"></ion-link>

    <!-- Disabled link -->
    <ion-link label="Disabled" [disabled]="true"></ion-link>
  `
})
export class LinksComponent {
  goBack(): void {
    history.back();
  }
}
```

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

### IonModalService: Programmatic Modal Dialogs with Custom Components

Source: https://context7.com/brisanet/ion-plus/llms.txt

The IonModalService allows for the programmatic opening of modal dialogs. It supports custom components as modal content, various configuration options for titles, dimensions, footers, and header buttons, as well as alert-style modals. The service returns an observable to handle modal interactions and data.

```typescript
import { Component, inject } from '@angular/core';
import { IonModalService, IonButtonComponent } from '@brisanet/ion-plus';

// Custom modal content component
@Component({
  selector: 'app-user-form',
  standalone: true,
  template: `
    <form>
      <label>Name: <input [(ngModel)]="name" /></label>
      <label>Email: <input [(ngModel)]="email" /></label>
    </form>
  `
})
export class UserFormComponent {
  name = '';
  email = '';
}

@Component({
  selector: 'app-modal-example',
  standalone: true,
  imports: [IonButtonComponent],
  template: `
    <ion-button
      label="Open Modal"
      (ionOnClick)="openModal()">
    </ion-button>

    <ion-button
      label="Open Confirmation"
      type="secondary"
      (ionOnClick)="openConfirmation()">
    </ion-button>
  `
})
export class ModalExampleComponent {
  private modalService = inject(IonModalService);

  openModal(): void {
    const { id, observable } = this.modalService.open(UserFormComponent, {
      title: 'Create User',
      width: 500,
      params: { name: 'Default Name', email: '' },
      footer: {
        showDivider: true,
        primaryButton: { label: 'Save', icon: { type: 'check-solid' } },
        secondaryButton: { label: 'Cancel' }
      },
      headerButton: {
        label: 'Help',
        icon: { type: 'info-solid' }
      }
    });

    observable.subscribe(response => {
      if (response.action === 'onConfirm') {
        console.log('Form data:', response.instance);
        // Access form data: response.instance?.name, response.instance?.email
      } else if (response.action === 'onClose') {
        console.log('Modal closed');
      } else if (response.action === 'onHeaderAction') {
        console.log('Header button clicked');
      }
    });
  }

  openConfirmation(): void {
    const { observable } = this.modalService.open(UserFormComponent, {
      title: 'Confirm Action',
      width: 400,
      alert: {
        type: 'warning',
        message: 'Are you sure?',
        description: 'This action cannot be undone.'
      },
      footer: {
        primaryButton: { label: 'Confirm' },
        secondaryButton: { label: 'Cancel' }
      },
      preventCloseOnEscKey: true
    });

    observable.subscribe(response => {
      if (response.action === 'onConfirm') {
        // Perform action
        this.modalService.close();
      }
    });
  }
}
```

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

### IonAccordionComponent: Collapsible Panels in Angular

Source: https://context7.com/brisanet/ion-plus/llms.txt

Demonstrates the IonAccordionComponent for creating collapsible accordion panels in Angular. It supports single and multiple open panels, and allows for custom header and body templates. Requires @brisanet/ion-plus.

```typescript
import { Component } from '@angular/core';
import { IonAccordionComponent } from '@brisanet/ion-plus';

@Component({
  selector: 'app-accordion',
  standalone: true,
  imports: [IonAccordionComponent],
  template: `
    <!-- Accordion mode (only one open at a time) -->
    <ion-accordion
      [(accordions)]="faqs"
      [modeAccordion]="true"
      [templateHeader]="headerTemplate"
      [templateBody]="bodyTemplate"
      (activeChange)="onAccordionChange($event)">
    </ion-accordion>

    <!-- Multiple open panels -->
    <ion-accordion
      [(accordions)]="sections"
      [modeAccordion]="false"
      [templateHeader]="headerTemplate"
      [templateBody]="bodyTemplate">
    </ion-accordion>

    <ng-template #headerTemplate let-item>
      <div class="accordion-header">
        <strong>{{ item.title }}</strong>
        @if (item.badge) {
          <span class="badge">{{ item.badge }}</span>
        }
      </div>
    </ng-template>

    <ng-template #bodyTemplate let-item>
      <div class="accordion-body">
        <p>{{ item.content }}</p>
        @if (item.details) {
          <ul>
            @for (detail of item.details; track detail) {
              <li>{{ detail }}</li>
            }
          </ul>
        }
      </div>
    </ng-template>
  `
})
export class AccordionComponent {
  faqs = [
    {
      title: 'What is Ion Plus?',
      content: 'Ion Plus is a modern Angular component library.',
      show: false
    },
    {
      title: 'How do I install it?',
      content: 'Run npm i @brisanet/ion-plus',
      show: false
    },
    {
      title: 'Is it free?',
      content: 'Yes, Ion Plus is open source.',
      show: true
    }
  ];

  sections = [
    {
      title: 'Features',
      badge: 'New',
      content: 'Check out our latest features:',
      details: ['Dark mode', 'Responsive design', 'Accessibility'],
      show: true
    },
    {
      title: 'Documentation',
      content: 'Visit our Storybook for detailed documentation.',
      show: false
    }
  ];

  onAccordionChange(item: any): void {
    console.log('Accordion changed:', item);
  }
}
```

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

### Conditional Rendering based on Type

Source: https://github.com/brisanet/ion-plus/blob/main/projects/ion/src/lib/avatar/avatar.component.html

This snippet demonstrates conditional rendering using a switch statement based on the result of the `type()` function. It handles different cases ('initials', 'icon', 'photo') to display appropriate content. Dependencies include the `type()` and `initials()` functions.

```html
@switch (type()) { @case ('initials') { {{ initials() }} } @case ('icon') { } @case ('photo') {  } }
```

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

### IonSpinnerComponent: Display Loading Indicators in Angular

Source: https://context7.com/brisanet/ion-plus/llms.txt

The IonSpinnerComponent is used to display loading indicators. It offers customization options for size, color (including custom hex codes), and the ability to display accompanying text with adjustable text sizes. This component is part of the Ion-Plus library and requires Angular.

```typescript
import { Component } from '@angular/core';
import { IonSpinnerComponent } from '@brisanet/ion-plus';

@Component({
  selector: 'app-spinners',
  standalone: true,
  imports: [IonSpinnerComponent],
  template: `
    <!-- Basic spinner -->
    <ion-spinner></ion-spinner>

    <!-- Different sizes -->
    <ion-spinner [size]="16"></ion-spinner>
    <ion-spinner [size]="24"></ion-spinner>
    <ion-spinner [size]="48"></ion-spinner>

    <!-- Color variants -->
    <ion-spinner color="primary"></ion-spinner>
    <ion-spinner color="secondary"></ion-spinner>
    <ion-spinner color="danger"></ion-spinner>

    <!-- Custom color -->
    <ion-spinner customColor="#9C27B0"></ion-spinner>

    <!-- With text -->
    <ion-spinner text="Loading..." textSize="sm"></ion-spinner>
    <ion-spinner text="Please wait..." textSize="md"></ion-spinner>
    <ion-spinner text="Processing your request..." textSize="lg"></ion-spinner>
  `
})
export class SpinnersComponent {}

```

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

### IonCheckboxComponent: Basic and Advanced Usage in Angular

Source: https://context7.com/brisanet/ion-plus/llms.txt

Demonstrates the IonCheckboxComponent for basic checkboxes, disabled states, indeterminate states, and lists of checkboxes in an Angular application. It utilizes two-way binding and event handling for managing checkbox states.

```typescript
import { Component } from '@angular/core';
import { IonCheckboxComponent } from '@brisanet/ion-plus';

@Component({
  selector: 'app-checkboxes',
  standalone: true,
  imports: [IonCheckboxComponent],
  template: `
    <!-- Basic checkbox with label -->
    <ion-checkbox
      label="Accept terms and conditions"
      value="terms"
      [(checked)]="termsAccepted">
    </ion-checkbox>

    <!-- Disabled checkbox -->
    <ion-checkbox
      label="Disabled option"
      [disabled]="true"
      [checked]="true">
    </ion-checkbox>

    <!-- Indeterminate checkbox -->
    <ion-checkbox
      label="Select all"
      [(checked)]="selectAll"
      [(indeterminate)]="isIndeterminate"
      (checkedChange)="onSelectAllChange($event)">
    </ion-checkbox>

    <!-- Checkbox list -->
    @for (item of items; track item.value) {
      <ion-checkbox
        [label]="item.label"
        [value]="item.value"
        [(checked)]="item.checked">
      </ion-checkbox>
    }
  `
})
export class CheckboxesComponent {
  termsAccepted = false;
  selectAll = false;
  isIndeterminate = false;
  items = [
    { label: 'Option 1', value: '1', checked: false },
    { label: 'Option 2', value: '2', checked: true },
    { label: 'Option 3', value: '3', checked: false }
  ];

  onSelectAllChange(checked: boolean): void {
    this.items.forEach(item => item.checked = checked);
    this.isIndeterminate = false;
  }
}
```

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

### IonPopoverDirective: Create and Configure Popovers in Angular

Source: https://context7.com/brisanet/ion-plus/llms.txt

The IonPopoverDirective allows for the creation of dynamic popovers in Angular applications. It supports custom content, action buttons, different trigger mechanisms (click, hover), and control over popover behavior like persistence and close icons. Dependencies include Angular's Component and specific Ion-Plus components.

```typescript
import { Component } from '@angular/core';
import { IonPopoverDirective, IonButtonComponent, IonPositions } from '@brisanet/ion-plus';

@Component({
  selector: 'app-popovers',
  standalone: true,
  imports: [IonPopoverDirective, IonButtonComponent],
  template: `
    <!-- Basic popover -->
    <ion-button
      label="Show Popover"
      ionPopover
      ionPopoverTitle="Popover Title"
      [ionPopoverBody]="popoverBody"
      [ionPopoverPosition]="positions.BOTTOM_LEFT">
    </ion-button>

    <!-- Popover with actions -->
    <ion-button
      label="With Actions"
      ionPopover
      ionPopoverTitle="Confirm Action"
      [ionPopoverBody]="confirmBody"
      [ionPopoverActions]="popoverActions"
      [ionPopoverIconClose]="true"
      (ionOnFirstAction)="onConfirm()"
      (ionOnSecondAction)="onCancel()">
    </ion-button>

    <!-- Hover trigger -->
    <ion-button
      label="Hover Me"
      ionPopover
      ionPopoverTitle="Quick Info"
      [ionPopoverBody]="infoBody"
      ionPopoverTrigger="hover">
    </ion-button>

    <!-- Keep open popover -->
    <ion-button
      label="Stay Open"
      ionPopover
      ionPopoverTitle="Persistent"
      [ionPopoverBody]="popoverBody"
      [ionPopoverKeep]="true"
      [ionPopoverIconClose]="true">
    </ion-button>

    <ng-template #popoverBody>
      <p>This is the popover content.</p>
    </ng-template>

    <ng-template #confirmBody>
      <p>Are you sure you want to proceed?</p>
    </ng-template>

    <ng-template #infoBody>
      <p>Quick information tooltip-like popover.</p>
    </ng-template>
  `
})
export class PopoversComponent {
  positions = IonPositions;

  popoverActions = [
    { label: 'Confirm', type: 'primary' as const },
    { label: 'Cancel', type: 'secondary' as const }
  ];

  onConfirm(): void {
    console.log('Confirmed');
  }

  onCancel(): void {
    console.log('Cancelled');
  }
}

```

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

### Conditional Rendering with Disabled and Loading States (C#)

Source: https://github.com/brisanet/ion-plus/blob/main/projects/ion/src/lib/button/button.component.html

This snippet demonstrates conditional rendering logic using Razor syntax. It checks if a component is disabled or loading before rendering specific content. No external dependencies are explicitly mentioned.

```csharp
@if (!disabled() && loading()) { }
```

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

### Conditional Rendering with Icon Type Check (C#)

Source: https://github.com/brisanet/ion-plus/blob/main/projects/ion/src/lib/button/button.component.html

This snippet shows an alternative conditional rendering path based on the presence and type of an icon. It's useful for dynamically displaying UI elements related to icons. No external dependencies are explicitly mentioned.

```csharp
@else if (icon() && icon()?.type) { }
```

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

### IonTooltipDirective: Add Tooltips to Elements (TypeScript)

Source: https://context7.com/brisanet/ion-plus/llms.txt

The IonTooltipDirective allows adding customizable tooltips to any HTML element. It supports various trigger methods (hover, click), positions, and delays, and can even render custom template content. This directive is part of the @brisanet/ion-plus library.

```typescript
import { Component } from '@angular/core';
import { IonTooltipDirective, IonButtonComponent } from '@brisanet/ion-plus';

@Component({
  selector: 'app-tooltips',
  standalone: true,
  imports: [IonTooltipDirective, IonButtonComponent],
  template: `
    <!-- Basic tooltip on hover -->
    <ion-button
      label="Hover me"
      ionTooltip
      ionTooltipTitle="This is a tooltip">
    </ion-button>

    <!-- Click trigger tooltip -->
    <ion-button
      label="Click me"
      ionTooltip
      ionTooltipTitle="Clicked tooltip"
      ionTooltipTrigger="click">
    </ion-button>

    <!-- Custom position -->
    <ion-button
      label="Top Left"
      ionTooltip
      ionTooltipTitle="Top left position"
      ionTooltipPosition="topLeft">
    </ion-button>

    <!-- With delay -->
    <ion-button
      label="Delayed"
      ionTooltip
      ionTooltipTitle="Appears after 500ms"
      [ionTooltipShowDelay]="500">
    </ion-button>

    <!-- Custom template -->
    <ion-button
      label="Custom Content"
      ionTooltip
      [ionTooltipTemplateRef]="customTooltip">
    </ion-button>

    <ng-template #customTooltip>
      <div>
        <strong>Custom Tooltip</strong>
        <p>With rich HTML content</p>
      </div>
    </ng-template>
  `
})
export class TooltipsComponent {}
```

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

### IonStepsComponent: Multi-step Workflow Indicator (Angular)

Source: https://context7.com/brisanet/ion-plus/llms.txt

The IonStepsComponent is an Angular component used to display a progress indicator for multi-step workflows. It supports basic step display, clickable navigation, disabled states, and status indicators. It requires Angular and the '@brisanet/ion-plus' library. Input properties include 'steps', 'current', 'clickable', and 'disabled'. Output events include 'currentChange'.

```typescript
import { Component } from '@angular/core';
import { IonStepsComponent, IonButtonComponent } from '@brisanet/ion-plus';

@Component({
  selector: 'app-steps',
  standalone: true,
  imports: [IonStepsComponent, IonButtonComponent],
  template: `
    <!-- Basic steps -->
    <ion-steps
      [steps]="steps"
      [(current)]="currentStep"
      (currentChange)="onStepChange($event)">
    </ion-steps>

    <!-- Clickable steps -->
    <ion-steps
      [steps]="steps"
      [(current)]="currentStep"
      [clickable]="true">
    </ion-steps>

    <!-- Disabled steps -->
    <ion-steps
      [steps]="steps"
      [(current)]="currentStep"
      [disabled]="isProcessing">
    </ion-steps>

    <!-- Steps with status -->
    <ion-steps [steps]="statusSteps" [current]="1"></ion-steps>

    <!-- Navigation buttons -->
    <div>
      <ion-button
        label="Previous"
        type="secondary"
        [disabled]="currentStep === 1"
        (ionOnClick)="previousStep()">
      </ion-button>
      <ion-button
        label="Next"
        [disabled]="currentStep === steps.length"
        (ionOnClick)="nextStep()">
      </ion-button>
    </div>
  `
})
export class StepsComponent {
  currentStep = 1;
  isProcessing = false;

  steps = [
    { label: 'Account Setup', description: 'Create your account' },
    { label: 'Profile', description: 'Complete your profile' },
    { label: 'Verification', description: 'Verify your email' },
    { label: 'Complete', description: 'All done!' }
  ];

  statusSteps = [
    { label: 'Completed', status: 'checked' as const },
    { label: 'In Progress', status: 'selected' as const },
    { label: 'Error', status: 'error' as const },
    { label: 'Pending', status: 'default' as const }
  ];

  previousStep(): void {
    if (this.currentStep > 1) this.currentStep--;
  }

  nextStep(): void {
    if (this.currentStep < this.steps.length) this.currentStep++;
  }

  onStepChange(step: number): void {
    console.log('Step changed to:', step);
  }
}
```

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

### ION-Plus Dropdown Template Logic

Source: https://github.com/brisanet/ion-plus/blob/main/projects/ion/src/lib/directives/dropdown/dropdown.component.html

This snippet illustrates the Angular template logic for the ION-Plus dropdown component. It handles loading states, iterates through options, displays labels based on configuration, and conditionally shows selection indicators and a clear button for multi-select mode. Dependencies include Angular's template syntax and component-specific functions like dropdownLoading(), dropdownOptions(), dropdownConfig(), and selectedOptions().

```html
@if (dropdownLoading()) { } @else {

@for (option of dropdownOptions(); let i = $index; track i) {*   @if (option.icon) { } {{ dropdownConfig().propLabel ? option[dropdownConfig().propLabel!] : option.label }} @if (option.selected) { }
}
@empty { }

@if ( dropdownConfig().multiple && dropdownConfig().clearButton && selectedOptions().length ) { }
}

```

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

### IonPopConfirmComponent: Implement Confirmation Dialogs in Angular

Source: https://context7.com/brisanet/ion-plus/llms.txt

The IonPopConfirmComponent provides a reusable confirmation dialog for critical actions. It allows customization of titles, descriptions, confirmation/cancel texts, and types (warning, info, success). Event handlers are available for confirm and close actions. It depends on Angular's Component and Ion-Plus directives.

```typescript
import { Component } from '@angular/core';
import { IonPopconfirmDirective, IonButtonComponent } from '@brisanet/ion-plus';

@Component({
  selector: 'app-popconfirm',
  standalone: true,
  imports: [IonPopconfirmDirective, IonButtonComponent],
  template: `
    <!-- Warning confirmation -->
    <ion-button
      label="Delete Item"
      [danger]="true"
      ionPopconfirm
      ionPopConfirmTitle="Delete this item?"
      ionPopConfirmDesc="This action cannot be undone."
      ionPopConfirmType="warning"
      ionConfirmText="Delete"
      ionCancelText="Cancel"
      (ionOnConfirm)="onDelete()"
      (ionOnClose)="onCancel()">
    </ion-button>

    <!-- Info confirmation -->
    <ion-button
      label="Publish"
      ionPopconfirm
      ionPopConfirmTitle="Publish article?"
      ionPopConfirmDesc="The article will be visible to all users."
      ionPopConfirmType="info"
      ionConfirmText="Publish"
      (ionOnConfirm)="onPublish()">
    </ion-button>

    <!-- Success confirmation -->
    <ion-button
      label="Complete"
      ionPopconfirm
      ionPopConfirmTitle="Mark as complete?"
      ionPopConfirmType="success"
      ionConfirmText="Yes"
      ionCancelText="No"
      (ionOnConfirm)="onComplete()">
    </ion-button>
  `
})
export class PopConfirmComponent {
  onDelete(): void {
    console.log('Item deleted');
  }

  onPublish(): void {
    console.log('Article published');
  }

  onComplete(): void {
    console.log('Marked as complete');
  }

  onCancel(): void {
    console.log('Action cancelled');
  }
}

```

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

### IonSelectComponent: Dropdown with Single/Multiple Selection, Search, and Loading

Source: https://context7.com/brisanet/ion-plus/llms.txt

The IonSelectComponent is a versatile dropdown component supporting single and multiple selections, an integrated search feature, and a loading state indicator. It accepts an array of options and emits events for user selections and search queries. Dependencies include the IonSelectComponent itself.

```typescript
import { Component } from '@angular/core';
import { IonSelectComponent } from '@brisanet/ion-plus';

@Component({
  selector: 'app-select',
  standalone: true,
  imports: [IonSelectComponent],
  template: `
    <!-- Single select -->
    <ion-select
      [options]="countries"
      placeholder="Select a country"
      mode="default"
      (selected)="onCountrySelect($event)">
    </ion-select>

    <!-- Multiple select with max selection -->
    <ion-select
      [options]="skills"
      placeholder="Select skills (max 3)"
      mode="multiple"
      [maxSelect]="3"
      (selected)="onSkillsSelect($event)">
    </ion-select>

    <!-- Required select -->
    <ion-select
      [options]="categories"
      placeholder="Select category *"
      [required]="true"
      (selected)="onCategorySelect($event)">
    </ion-select>

    <!-- Loading state -->
    <ion-select
      [options]="dynamicOptions"
      placeholder="Loading data..."
      [loading]="isLoading"
      [disabled]="isLoading">
    </ion-select>

    <!-- With search -->
    <ion-select
      [options]="users"
      placeholder="Search users..."
      (searchChange)="onSearch($event)"
      (selected)="onUserSelect($event)">
    </ion-select>
  `
})
export class SelectComponent {
  isLoading = false;
  dynamicOptions: any[] = [];

  countries = [
    { label: 'United States', value: 'us' },
    { label: 'Canada', value: 'ca' },
    { label: 'Brazil', value: 'br' }
  ];

  skills = [
    { label: 'JavaScript', value: 'js' },
    { label: 'TypeScript', value: 'ts' },
    { label: 'Angular', value: 'angular' },
    { label: 'React', value: 'react' }
  ];

  categories = [
    { label: 'Technology', value: 'tech' },
    { label: 'Business', value: 'business' },
    { label: 'Design', value: 'design' }
  ];

  users = [
    { label: 'John Doe', value: '1' },
    { label: 'Jane Smith', value: '2' }
  ];

  onCountrySelect(selected: any[]): void {
    console.log('Country:', selected);
  }

  onSkillsSelect(selected: any[]): void {
    console.log('Skills:', selected);
  }

  onCategorySelect(selected: any[]): void {
    console.log('Category:', selected);
  }

  onUserSelect(selected: any[]): void {
    console.log('User:', selected);
  }

  onSearch(query: string): void {
    console.log('Search query:', query);
  }
}
```

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

### Conditional Alert Display (Angular-like)

Source: https://github.com/brisanet/ion-plus/blob/main/projects/ion/src/lib/modal/modal.component.html

Renders an alert component if an alert object is present in the configuration. It uses the `as` keyword to assign the alert object to a local variable `alert` for use within the block.

```html
@if (configuration().alert; as alert) { }
```

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

### Conditional Footer Rendering (Angular-like)

Source: https://github.com/brisanet/ion-plus/blob/main/projects/ion/src/lib/modal/modal.component.html

Conditionally renders the footer section based on the `hide` property within the `footer` object of the configuration. If `configuration().footer?.hide` is not true, the footer will be displayed.

```html
@if (!configuration().footer?.hide) {

}
```

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

### IonSidebarComponent: Collapsible Navigation Menu (Angular)

Source: https://context7.com/brisanet/ion-plus/llms.txt

The IonSidebarComponent is an Angular component that provides a collapsible sidebar for navigation. It supports menu items, item groups, and logo configuration. It requires Angular and the '@brisanet/ion-plus' library. Key properties include 'items', 'logoConfig', and 'closeOnSelect'.

```typescript
import { Component } from '@angular/core';
import { IonSidebarComponent } from '@brisanet/ion-plus';

@Component({
  selector: 'app-sidebar',
  standalone: true,
  imports: [IonSidebarComponent],
  template: `
    <ion-sidebar
      [items]="sidebarItems"
      [logoConfig]="logoConfig"
      [closeOnSelect]="true">
    </ion-sidebar>
  `
})
export class SidebarComponent {
  logoConfig = {
    src: 'assets/logo.svg',
    action: () => this.navigateHome()
  };

  sidebarItems = [
    {
      title: 'Dashboard',
      icon: 'home' as const,
      selected: true,
      action: () => console.log('Dashboard clicked')
    },
    {
      title: 'Users',
      icon: 'user' as const,
      selected: false,
      action: () => console.log('Users clicked')
    },
    {
      title: 'Settings',
      icon: 'settings' as const,
      selected: false,
      options: [
        {
          title: 'General',
          icon: 'settings' as const,
          action: () => console.log('General settings')
        },
        {
          title: 'Security',
          icon: 'lock' as const,
          action: () => console.log('Security settings')
        },
        {
          title: 'Notifications',
          icon: 'bell' as const,
          action: () => console.log('Notification settings')
        }
      ]
    },
    {
      title: 'Disabled Item',
      icon: 'block' as const,
      disabled: true
    }
  ];

  navigateHome(): void {
    console.log('Navigate to home');
  }
}
```

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

### IonRadioComponent: Radio Button Group in Angular

Source: https://context7.com/brisanet/ion-plus/llms.txt

Illustrates the IonRadioComponent for creating radio button groups in Angular, enabling single-selection options with two-way binding. It shows how to configure options, handle value changes, and manage disabled states.

```typescript
import { Component } from '@angular/core';
import { IonRadioComponent } from '@brisanet/ion-plus';

@Component({
  selector: 'app-radio',
  standalone: true,
  imports: [IonRadioComponent],
  template: `
    <!-- Radio group -->
    <ion-radio
      name="payment"
      [options]="paymentOptions"
      [(value)]="selectedPayment"
      (valueChange)="onPaymentChange($event)">
    </ion-radio>

    <!-- Radio with disabled option -->
    <ion-radio
      name="shipping"
      [options]="shippingOptions"
      [(value)]="selectedShipping">
    </ion-radio>

    <p>Selected: {{ selectedPayment }}</p>
  `
})
export class RadioComponent {
  selectedPayment = 'credit';
  selectedShipping = 'standard';

  paymentOptions = [
    { label: 'Credit Card', value: 'credit' },
    { label: 'PayPal', value: 'paypal' },
    { label: 'Bank Transfer', value: 'bank' }
  ];

  shippingOptions = [
    { label: 'Standard Shipping', value: 'standard' },
    { label: 'Express Shipping', value: 'express' },
    { label: 'Same Day (Unavailable)', value: 'same-day', disabled: true }
  ];

  onPaymentChange(value: string): void {
    console.log('Payment method changed:', value);
  }
}
```

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

### Show Tooltip Conditionally - ION Plus

Source: https://github.com/brisanet/ion-plus/blob/main/projects/ion/src/lib/directives/tooltip/tooltip.component.html

This snippet demonstrates how to conditionally render a tooltip in ION Plus. The tooltip's visibility is controlled by the `ionTooltipVisible()` function. If the function returns true, the tooltip content is rendered.

```html
@if (ionTooltipVisible()) {

@if (title()) {

{{ title() }}

} @if (contentTemplate() !== null) { }

}
```

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

### Conditional Label Rendering based on Shape (C#)

Source: https://github.com/brisanet/ion-plus/blob/main/projects/ion/src/lib/button/button.component.html

This snippet illustrates rendering a label only when the shape is 'normal' and a label exists. It's a common pattern for conditionally displaying text content in UI components. No external dependencies are explicitly mentioned.

```csharp
@if (shape() === 'normal' && label()) { {{ label() }} }
```

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

### Conditional Header Button Rendering (Angular-like)

Source: https://github.com/brisanet/ion-plus/blob/main/projects/ion/src/lib/modal/modal.component.html

Renders a header button only if the configuration allows it and it's not explicitly hidden. It checks for the existence and visibility status of `configuration().headerButton`.

```html
@if ( configuration().headerButton && !( configuration().headerButton?.hidden && configuration().headerButton?.hidden() ) ) { }
```