PO UI

https://po-ui.io/documentation
Admin
PO UI is a comprehensive UI component library for building web applications, offering a wide range...
Tokens:842,494
Snippets:3,936
Trust Score:6.9
Update:1 week ago
Show doc for...
Tokens:
Raw
### PoUserGuideService.start

Source: https://po-ui.io/documentation/po-user-guide

Starts the guided tour after the service has been configured with setOptions. It initiates the tour execution and emits the tourStart$ event.

```APIDOC
## PoUserGuideService.start

### Description
Starts the guided tour after the service has been configured with setOptions. It initiates the tour execution and emits the tourStart$ event.

### Method
start

### Parameters
None documented.

### Request Example
```typescript
this.poUserGuide.setOptions({ literals: customLiterals }).start();
```

### Response
No return value is documented. The method returns the service instance to allow chaining, as shown in the example.
```

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

### PO Notification Labs Example

Source: https://po-ui.io/documentation/po-notification

Example demonstrating the setup for a notification button in a labs context.

```html
<po-button (p-click)="showNotification()" p-label="Open Notification"> </po-button>

<po-divider />
```

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

### Start a tour with PoUserGuideService

Source: https://po-ui.io/documentation/po-user-guide

Typical usage of PoUserGuideService: inject it in a component, chain setSteps(), setOptions(), and start() to run a guided tour. The service is provided in root, so no provider registration is needed.

```typescript
import { Component } from '@angular/core';
import { PoUserGuideService } from '@po-ui/ng-components';

@Component({ selector: 'app-onboarding', templateUrl: './onboarding.component.html' })
export class OnboardingComponent {
  constructor(private PoUserGuide: PoUserGuideService) {}

  startTour(): void {
    this.PoUserGuide
      .setSteps([
        { element: '#header', title: 'Bem-vindo!', content: 'Esta é a barra superior.' },
        { element: '<po-menu>', title: 'Menu', content: 'Acesse aqui as funcionalidades do sistema.' },
        { element: '#user-profile', title: 'Perfil', content: 'Configure suas preferências.' }
      ])
      .setOptions({ showProgress: true, allowClose: true })
      .start();
  }
}

```

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

### PO User Guide Labs sample: HTML template and TypeScript component

Source: https://po-ui.io/documentation/po-user-guide

Complete sample for the PO User Guide Labs component. The HTML template provides the form controls and the start button; the TypeScript class defines the component logic, including the restore() method that resets all options and the startTour() method that builds the steps and options and calls poUserGuide.setSteps(steps).setOptions(options).start(). The component is provided with PoUserGuideService and is not standalone.

```HTML
<po-button id="sample-po-user-guide-labs-cta" p-label="Iniciar Guia" p-kind="primary" (p-click)="startTour()">
</po-button>

<po-divider />

<div id="sample-po-user-guide-labs-form" class="po-row">
  <form #f="ngForm">
    <po-input class="po-md-6" name="stepTitle" [(ngModel)]="stepTitle" p-clean p-label="Step title"> </po-input>

    <po-input class="po-md-6" name="stepContent" [(ngModel)]="stepContent" p-clean p-label="Step content"> </po-input>

    <po-input class="po-md-3" name="nextLabel" [(ngModel)]="nextLabel" p-clean p-label="Next label"> </po-input>

    <po-input class="po-md-3" name="previousLabel" [(ngModel)]="previousLabel" p-clean p-label="Previous label">
    </po-input>

    <po-input class="po-md-3" name="doneLabel" [(ngModel)]="doneLabel" p-clean p-label="Done label"> </po-input>

    <po-input
      class="po-md-3"
      name="progressTemplate"
      [(ngModel)]="progressTemplate"
      p-clean
      p-label="Progress template"
      [p-help]="progressTemplateHelp"
    >
    </po-input>

    <po-number
      class="po-md-3"
      name="overlayOpacity"
      [(ngModel)]="overlayOpacity"
      p-clean
      p-label="Overlay opacity"
      p-min="0"
      p-max="1"
      p-step="0.1"
    >
    </po-number>

    <po-switch class="po-md-3" name="allowClose" [(ngModel)]="allowClose" p-label="Allow close"> </po-switch>

    <po-switch class="po-md-3" name="showProgress" [(ngModel)]="showProgress" p-label="Show progress"> </po-switch>

    <po-switch class="po-md-3" name="keyboardControl" [(ngModel)]="keyboardControl" p-label="Keyboard control">
    </po-switch>

    <div class="po-row">
      <po-button class="po-md-3" p-label="Sample Restore" (p-click)="restore()"> </po-button>
    </div>
  </form>
</div>
```

```TypeScript
import { Component, OnInit } from '@angular/core';

import { PoUserGuideOptions, PoUserGuidePosition, PoUserGuideService, PoUserGuideStep } from '@po-ui/ng-components';

@Component({
  selector: 'sample-po-user-guide-labs',
  templateUrl: './sample-po-user-guide-labs.component.html',
  providers: [PoUserGuideService],
  standalone: false
})
export class SamplePoUserGuideLabsComponent implements OnInit {
  allowClose: boolean;
  showProgress: boolean;
  keyboardControl: boolean;
  overlayOpacity: number;
  nextLabel: string;
  previousLabel: string;
  doneLabel: string;
  progressTemplate: string;

  stepTitle: string;
  stepContent: string;

  readonly progressTemplateHelp = 'Use { { current } } e { { total } } como placeholders.';

  constructor(private poUserGuide: PoUserGuideService) {}

  ngOnInit(): void {
    this.restore();
  }

  restore(): void {
    this.allowClose = true;
    this.showProgress = true;
    this.keyboardControl = true;
    this.overlayOpacity = 0.7;
    this.nextLabel = 'Próximo';
    this.previousLabel = 'Anterior';
    this.doneLabel = 'Finalizar';
    this.progressTemplate = '{ {current} } de { {total} }';
    this.stepTitle = 'Passo destacado';
    this.stepContent = 'Edite os campos ao lado e inicie o tour para visualizar as alterações.';
  }

  startTour(): void {
    const steps: Array<PoUserGuideStep> = [
      {
        element: '#sample-po-user-guide-labs-form',
        title: this.stepTitle,
        content: this.stepContent,
        position: PoUserGuidePosition.Right
      },
      {
        element: '#sample-po-user-guide-labs-cta',
        title: 'Botão de início',
        content: 'Reinicie o tour quantas vezes precisar para experimentar opções diferentes.',
        position: PoUserGuidePosition.Top
      },
      {
        title: 'Modal final',
        content: 'Passos sem <code>element</code> são exibidos como um modal centralizado.'
      }
    ];

    const options: PoUserGuideOptions = {
      allowClose: this.allowClose,
      showProgress: this.showProgress,
      keyboardControl: this.keyboardControl,
      overlayOpacity: this.overlayOpacity,
      nextLabel: this.nextLabel,
      previousLabel: this.previousLabel,
      doneLabel: this.doneLabel,
      progressTemplate: this.progressTemplate
    };

    this.poUserGuide.setSteps(steps).setOptions(options).start();
  }
}
```

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

### Example with p-icon string

Source: https://po-ui.io/documentation/po-badge

Example of using a string icon from the icon library.

```html
<po-badge p-icon="an an-user"></po-badge>
```

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

### Basic Example - HTML

Source: https://po-ui.io/documentation/po-loading-overlay

HTML template for the basic loading overlay example, using a container with class 'sample-container'.

```HTML
<div class="sample-container">
  <po-loading-overlay></po-loading-overlay>
</div>
```

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

### Basic example HTML

Source: https://po-ui.io/documentation/po-context-menu

HTML template for the basic example, wrapping the po-context-menu in a div with the po-context-menu-wrapper class.

```html
<div class="po-context-menu-wrapper">
  <po-context-menu
    p-context-title="Cadastro"
    p-title="Fornecedor"
    [p-items]="menuItems"
    (p-item-selected)="onItemSelected($event)"
  >
  </po-context-menu>
</div>
```

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

### p-step-icon-done example

Source: https://po-ui.io/documentation/po-stepper

Example of setting the done step icon using a string from the icon library.

```html
<po-stepper p-step-icon-done="an an-check-circle">
   ...
</po-stepper>
```

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

### Basic example HTML

Source: https://po-ui.io/documentation/po-slide

HTML template for the basic po-slide example.

```html
<po-slide [p-slides]="['/assets/graphics/landscape-01.jpeg', '/assets/graphics/landscape-02.jpeg']"> </po-slide>

```

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

### PoUserGuideService.setOptions

Source: https://po-ui.io/documentation/po-user-guide

Configures the user guide service with custom options, such as custom literals. The literals object can be fully or partially customized and is loaded before starting the tour.

```APIDOC
## PoUserGuideService.setOptions

### Description
Configures the user guide service with custom options, such as custom literals. The literals object can be fully or partially customized and is loaded before starting the tour.

### Method
setOptions

### Parameters
#### Options Object
- **literals** (PoUserGuideLiterals) - Optional - Object with the literals used in the `po-user-guide`. Can be passed with all available literals or only the ones to customize.

### Request Example
```typescript
const customLiterals: PoUserGuideLiterals = {
  next: 'Próximo',
  previous: 'Anterior',
  done: 'Finalizar',
  close: 'Fechar'
};

this.poUserGuide.setOptions({ literals: customLiterals }).start();
```

### Response
No return value is documented. The method returns the service instance to allow chaining, as shown in the example.
```

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

### Basic Example - CSS

Source: https://po-ui.io/documentation/po-loading-overlay

CSS for the basic example, setting the container to position relative and a height of 300px.

```CSS
.sample-container {
  position: relative;
  height: 300px;
}
```

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

### Example with TemplateRef icon

Source: https://po-ui.io/documentation/po-badge

Example of customizing the icon using a TemplateRef.

```html
<po-badge [p-icon]="template"></po-badge>

<ng-template #template>
 <ion-icon style="font-size: inherit" name="heart"></ion-icon>
</ng-template>
```

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

### p-step-icon-active example

Source: https://po-ui.io/documentation/po-stepper

Example of setting the active step icon using a string from the icon library.

```html
<po-stepper p-step-icon-active="an an-pencil-simple-line">
   ...
</po-stepper>
```

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

### Container Usage Example

Source: https://po-ui.io/documentation/po-loading-overlay

Example showing how to use po-loading-overlay as a container. The parent element must have position: relative.

```HTML
<div style="position: relative">

 <po-chart [p-series]="[{ value: 10, category: 'Example' }]">
 </po-chart>

 <po-loading-overlay>
 </po-loading-overlay>
</div>
```

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

### Basic usage example

Source: https://po-ui.io/documentation/po-button

A simple example of using the po-button component with a click event.

```APIDOC
## Basic Usage Example

### HTML
```html
<po-button p-label="PO Button" (p-click)="onClick()"> </po-button>
```

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

@Component({
  selector: 'sample-po-button-basic',
  templateUrl: './sample-po-button-basic.component.html',
  standalone: false
})
export class SamplePoButtonBasicComponent {
  onClick() {
    alert('Po Button!');
  }
}
```
```

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

### Basic Usage Example

Source: https://po-ui.io/documentation/po-dropdown

Example of using the PO Dropdown component with a single action that navigates to a URL.

```APIDOC
## Basic Usage Example

### Description
Demonstrates the basic usage of the PO Dropdown component with a single action.

### Component HTML
```html
<po-dropdown p-label="PO Dropdown" [p-actions]="[{ label: 'How to install PO', url: '/guides/how-install' }]">
</po-dropdown>
```

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

@Component({
  selector: 'sample-po-dropdown-basic',
  templateUrl: './sample-po-dropdown-basic.component.html',
  standalone: false
})
export class SamplePoDropdownBasicComponent {}
```
```

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

### Basic PO Login HTML example

Source: https://po-ui.io/documentation/po-login

Basic HTML example of the PO Login component with a name and label.

```HTML
<po-login name="login" p-label="PO Login"> </po-login>
```

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

### Basic Usage Example

Source: https://po-ui.io/documentation/po-combo

Example of basic usage of the po-combo component with a simple options array.

```APIDOC
## Basic Usage Example

### Description
Example of basic usage of the po-combo component with a simple options array.

### HTML
```html
<po-combo name="combo" p-label="PO Combo" [p-options]="[{ value: 'Option 1' }, { value: 'Option 2' }]"> </po-combo>
```

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

@Component({
  selector: 'sample-po-combo-basic',
  templateUrl: './sample-po-combo-basic.component.html',
  standalone: false
})
export class SamplePoComboBasicComponent {}
```
```

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

### Template Example: CSS Styles

Source: https://po-ui.io/documentation/po-multiselect

CSS styles for the template example, defining flex layouts for containers and buttons.

```CSS
.containerFlex {
  display: flex;
  align-items: center;
}

.containerFlexTag {
  display: flex;
  gap: 2px;
  flex-direction: column;
}

.containerButton {
  display: flex;
  align-items: flex-end;
  padding: 8px;
}
```

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

### Basic po-image example (HTML)

Source: https://po-ui.io/documentation/po-image

HTML template for the basic po-image example, binding p-src, p-alt, and p-height.

```html
<po-image [p-src]="srcImage" p-alt="teste de imagem" p-height="300"> </po-image>
```

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

### Basic Example - TypeScript

Source: https://po-ui.io/documentation/po-loading-overlay

Angular component class for the basic loading overlay example.

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

@Component({
  selector: 'sample-po-loading-overlay-basic',
  templateUrl: './sample-po-loading-overlay-basic.component.html',
  styleUrls: ['./sample-po-loading-overlay-basic.component.css'],
  standalone: false
})
export class SamplePoLoadingOverlayBasicComponent {}
```

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

### p-load return example

Source: https://po-ui.io/documentation/po-dynamic-view

Example of the expected return object for the p-load property, showing how to update values and fields.

```json
{
  value: {
    cnpj: '**************', // altera valor do campo
    updated: (new Date()).toString() // atribui valor ao campo novo
  },
  fields: [
    { property: 'updated', tag: true } // inclui campo novo
  ]
}
```

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

### Response Examples for Favorite Service

Source: https://po-ui.io/documentation/po-breadcrumb

Example responses from the favorite service, including with and without params.

```json
{ isFavorite: true, url: "/example" }
```

```json
{ isFavorite: false, url: "/example" }
```

```json
{ isFavorite: false, url: "/example", params: "{ id: 14, user: 'dev.po' }" }
```

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

### Service request examples with parameters

Source: https://po-ui.io/documentation/po-i18n

Examples of service requests with language and literals parameters, as described for the translation service.

```text
http://server:port/api/translations/crm?language=pt-br
http://server:port/api/translations/crm?language=pt-br&literals=add,remove,text
```

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

### Basic Tooltip Example - HTML

Source: https://po-ui.io/documentation/po-tooltip?view=doc

HTML template for the basic tooltip example, using a po-button with a p-tooltip attribute.

```html
<po-button p-label="Open Tooltip" p-tooltip="po-tooltip"> </po-button>
```

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

### GET Request with Concatenated URL

Source: https://po-ui.io/documentation/po-breadcrumb

Example of GET request made by the breadcrumb when favoriting, concatenating the link with the service URL.

```http
GET http://<domain>/api/favorite?url=/example
```

```http
GET http://po.com.br/sample/api/favorite?url=/example
```

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

### PO User Guide onboarding sample (HTML + TypeScript)

Source: https://po-ui.io/documentation/po-user-guide

Onboarding form template and component that configure a PO User Guide tour. The HTML defines the form fields and buttons; the TypeScript sets the tour steps with PoUserGuideService, enables progress and close options, and provides a restartTour() method.

```html
<form #f="ngForm">
  <div class="po-row">
    <po-input
      id="sample-po-user-guide-onboarding-name"
      class="po-md-6"
      name="name"
      [(ngModel)]="name"
      p-clean
      p-label="Nome completo"
      p-required
    >
    </po-input>

    <po-input
      id="sample-po-user-guide-onboarding-email"
      class="po-md-6"
      name="email"
      [(ngModel)]="email"
      p-clean
      p-label="E-mail"
      p-required
    >
    </po-input>
  </div>

  <div class="po-row">
    <po-datepicker
      id="sample-po-user-guide-onboarding-birthdate"
      class="po-md-6"
      name="birthDate"
      [(ngModel)]="birthDate"
      p-clean
      p-label="Data de nascimento"
    >
    </po-datepicker>

    <po-input
      id="sample-po-user-guide-onboarding-jobtitle"
      class="po-md-6"
      name="jobTitle"
      [(ngModel)]="jobTitle"
      p-clean
      p-label="Cargo"
    >
    </po-input>
  </div>

  <div class="po-row">
    <po-textarea class="po-md-12" name="bio" [(ngModel)]="bio" p-clean p-label="Sobre você" p-rows="3"> </po-textarea>
  </div>

  <div class="po-row">
    <po-button
      id="sample-po-user-guide-onboarding-submit"
      class="po-md-3"
      p-label="Salvar"
      p-kind="primary"
      [p-disabled]="f.form.invalid"
    >
    </po-button>

    <po-button class="po-md-3" p-label="Reiniciar tour" (p-click)="restartTour()"> </po-button>
  </div>
</form>
```

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

import { PoUserGuidePosition, PoUserGuideService, PoUserGuideStep } from '@po-ui/ng-components';

@Component({
  selector: 'sample-po-user-guide-onboarding',
  templateUrl: './sample-po-user-guide-onboarding.component.html',
  providers: [PoUserGuideService],
  standalone: false
})
export class SamplePoUserGuideOnboardingComponent implements AfterViewInit {
  name: string;
  email: string;
  birthDate: string;
  jobTitle: string;
  bio: string;

  private readonly steps: Array<PoUserGuideStep> = [
    {
      element: '#sample-po-user-guide-onboarding-name',
      title: 'Identifique-se',
      content: 'Informe seu nome completo. Este é o dado utilizado nas comunicações da plataforma.',
      position: PoUserGuidePosition.Right
    },
    {
      element: '#sample-po-user-guide-onboarding-email',
      title: 'E-mail corporativo',
      content: 'Utilize um e-mail válido — ele será o seu identificador único de acesso.',
      position: PoUserGuidePosition.Right
    },
    {
      element: '#sample-po-user-guide-onboarding-birthdate',
      title: 'Data de nascimento',
      content: 'A data de nascimento é utilizada apenas para validação de elegibilidade do cadastro.',
      position: PoUserGuidePosition.Right
    },
    {
      element: '#sample-po-user-guide-onboarding-jobtitle',
      title: 'Cargo',
      content: 'Indique seu cargo atual para personalizarmos o conteúdo de boas-vindas.',
      position: PoUserGuidePosition.Right
    },
    {
      element: '#sample-po-user-guide-onboarding-submit',
      title: 'Conclua o cadastro',
      content: 'Após preencher os campos acima, clique em <strong>Salvar</strong> para concluir.',
      position: PoUserGuidePosition.Top
    }
  ];

  constructor(private poUserGuide: PoUserGuideService) {}

  ngAfterViewInit(): void {
    this.poUserGuide.setSteps(this.steps).setOptions({ showProgress: true, allowClose: true });
  }

  restartTour(): void {
    this.poUserGuide.start();
  }
}
```

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

### getCurrentSlideIndex method usage

Source: https://po-ui.io/documentation/po-slide

Example of using the getCurrentSlideIndex method to get the current slide index.

```typescript
@ViewChild('slideComponent', { static: true }) slideComponent: PoSlideComponent;
 myFunction() {
   let currentIndex = this.slideComponent.getCurrentSlideIndex();
}

```

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

### Example with p-label and p-helper

Source: https://po-ui.io/documentation/po-decimal

Shows how to use p-label and p-helper with a component reference and keydown event to trigger showAdditionalHelp.

```html
<po-nome-component
 #component
 ...
 p-label="Label do componente"
 [p-helper]="helperOptions"
 (p-keydown)="onKeyDown($event, component)"
></po-nome-component>
```

```typescript
...
onKeyDown(event: KeyboardEvent, inp: PoNomeDoComponente): void {
 if (event.code === 'F9') {
   inp.showAdditionalHelp();
 }
}

```

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

### Unit test setup for AppComponent with PoI18nService

Source: https://po-ui.io/documentation/po-i18n

Example of initial unit test setup for an AppComponent that uses PoI18nService. Do not declare PoI18nService in the TestBed providers, as the library injects it dynamically; declaring it will cause test errors.

```typescript
import { async, TestBed } from '@angular/core/testing';
import { HttpClientTestingModule } from '@angular/common/http/testing';

import { PoI18nModule } from '@po-ui/ng-components';

import { AppComponent } from './app.component';

describe('AppComponent', () => {
  const anotherPT = {
    text: 'texto',
    add: 'adicionar',
    remove: 'remover'
  };

  const generalPT = {
    text: 'texto',
    add: 'adicionar',
    remove: 'remover'
  };

  const config = {
    default: {
      language: 'pt-BR',
      context: 'general',
      cache: false
    },
    contexts: {
      general: {
        'pt-br': generalPT
      },
      another: {
        'pt-br': anotherPT
      }
    }
  };

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
      imports: [
        HttpClientTestingModule,
        PoI18nModule.config(config)
      ]
    }).compileComponents();
  }));

  it('should create the app', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;

    expect(app).toBeTruthy();
  }));

});
```

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

### PO Page Slide Configuration Example

Source: https://po-ui.io/documentation/po-page-slide

A configuration example using PO Page Slide with switches for Bluetooth, Locked, Microphone, and Notification settings.

```html
<po-page-slide p-title="Configuration" p-size="sm" #pageSlide>
  <div class="po-row po-mb-2">
    <po-switch
      class="po-sm-6"
      p-label-off="Bluetooth"
      p-label-on="Bluetooth"
      name="bluetooth"
      [(ngModel)]="bluetooth"
    ></po-switch>
    <po-switch
      class="po-sm-6"
      p-label-off="Unlocked"
      p-label-on="Locked"
      name="locked"
      [(ngModel)]="locked"
    ></po-switch>
  </div>

  <div class="po-row po-mb-2">
    <po-switch
      class="po-sm-6"
      p-label-off="Microphone"
      p-label-on="Microphone"
      name="microphone"
      [(ngModel)]="microphone"
    ></po-switch>
    <po-switch
      class="po-sm-6"
      p-label-off="Notification"
      p-label-on="Notification"
      name="notification"
      [(ngModel)]="notification"
    ></po-switch>
  </div>
```

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

### PoUserGuideStartEvent

Source: https://po-ui.io/documentation/po-user-guide

Interface describing the event emitted by PoUserGuideService at the start of a guided tour. Published once per execution on the tourStart$ observable.

```APIDOC
## PoUserGuideStartEvent

### Description
Interface describing the event emitted by `PoUserGuideService` at the start of a guided tour. Published on `PoUserGuideService.tourStart$` exactly once per execution, immediately after tour instance configuration and before the first `PoUserGuideStepChangeEvent` on `stepChange$`.

### Properties

#### startIndex
- **Type**: `number`
- **Description**: Zero-based index of the initial tour step. Corresponds to the `startIndex` argument passed to `PoUserGuideService.start`. When invoked without arguments, value is `0`.

#### timestamp
- **Type**: `number`
- **Description**: Timestamp in milliseconds of event emission, obtained from `Date.now()`. Useful for correlating tour start with other telemetry events.

#### totalSteps
- **Type**: `number`
- **Description**: Total number of steps configured in the tour, equivalent to the size of the array passed to `PoUserGuideService.setSteps`.
```

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

### Retrieve form via output (p-form)

Source: https://po-ui.io/documentation/po-dynamic-form

Example of using the (p-form) output to get the form object and disable a button based on its validity.

```html
...
<po-dynamic-form (p-form)="getForm($event)">
</po-dynamic-form>

<po-button p-label="Adicionar" [p-disabled]="dynamicForm?.invalid">
</po-button>
...
```

```typescript
...

export class AppComponent {

  dynamicForm: NgForm;

  getForm(form: NgForm) {
    this.dynamicForm = form;
  }

}
```

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

### Basic po-page-dynamic-search with filter

Source: https://po-ui.io/documentation/po-page-dynamic-search

A minimal example of the dynamic search page with a single filter for 'name' and the corresponding Angular component. Use this as a starting point for basic usage.

```html
<po-page-dynamic-search p-title="Po Page Dynamic search" [p-filters]="[{ property: 'name' }]"> </po-page-dynamic-search>
```

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

@Component({
  selector: 'sample-po-page-dynamic-search-basic',
  templateUrl: './sample-po-page-dynamic-search-basic.component.html',
  standalone: false
})
export class SamplePoPageDynamicSearchBasicComponent {}
```

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

### Basic po-context-tabs example (HTML)

Source: https://po-ui.io/documentation/po-context-tabs

HTML template for the basic example, showing two po-tab components inside po-context-tabs.

```html
<po-context-tabs>
  <po-tab p-label="PO Tabs 1"></po-tab>
  <po-tab p-label="PO Tabs 2"></po-tab>
</po-context-tabs>
```

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

### Exclude request from pending count with X-PO-No-Count-Pending-Requests header

Source: https://po-ui.io/documentation/po-http-request-interceptor

Set the header 'X-PO-No-Count-Pending-Requests' to 'true' to prevent the interceptor from counting this request as pending. The example shows a GET request to '/customers/1' with the header.

```typescript
...
 const headers = { 'X-PO-No-Count-Pending-Requests': 'true' };

 this.http.get(`/customers/1`, { headers: headers });
...
```

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

### PoDatepickerRange model object example

Source: https://po-ui.io/documentation/po-datepicker-range

The ngModel value for po-datepicker-range must be an object implementing the PoDatepickerRange interface with start and end properties. The dates can be in various formats, but the component will output the date format yyyy-mm-dd after user interaction.

```json
{ "start": '2017-11-28', "end": '2017-11-30' }
```

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

### Basic Usage Example

Source: https://po-ui.io/documentation/po-tag

Example of basic usage of the po-tag component.

```APIDOC
## Basic Usage Example

### Description
Example of basic usage of the po-tag component.

### HTML
```html
<po-tag p-value="PO Tag"> </po-tag>
```

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

@Component({
  selector: 'sample-po-tag-basic',
  templateUrl: './sample-po-tag-basic.component.html',
  standalone: false
})
export class SamplePoTagBasicComponent {}
```
```

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

### Labs Example - HTML

Source: https://po-ui.io/documentation/po-loading-overlay

HTML template for the labs example, demonstrating interactive properties like p-screen-lock, p-text, and p-size.

```HTML
<div class="sample-container">
  <po-loading-overlay [p-screen-lock]="properties?.includes('screenLock')" [p-text]="text" [p-size]="size">
  </po-loading-overlay>
</div>

<po-divider />

<form #formProperties="ngForm">
  <div class="po-row">
    <po-input class="po-md-6" name="text" [(ngModel)]="text" p-label="Text"> </po-input>

    <po-checkbox-group
      class="po-md-6"
      name="properties"
      [(ngModel)]="properties"
      p-label="Properties"
      [p-options]="propertiesOptions"
      (p-change)="onChangeCheckbox($event)"
    >
    </po-checkbox-group>
  </div>
  <div class="po-row">
    <po-radio-group class="po-md-6" name="size" [(ngModel)]="size" p-label="Size" [p-options]="sizesOptions">
    </po-radio-group>
  </div>

  <div class="po-row">
    <div class="po-md-3">
      <po-button p-label="Sample Restore" (p-click)="restore()"> </po-button>
    </div>
  </div>
</form>
```

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

### Basic example TypeScript

Source: https://po-ui.io/documentation/po-slide

TypeScript component for the basic po-slide example.

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

@Component({
  selector: 'sample-po-slide-basic',
  templateUrl: './sample-po-slide-basic.component.html',
  standalone: false
})
export class SamplePoSlideBasicComponent {}

```

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

### HTML example with p-helper and p-keydown for showAdditionalHelp

Source: https://po-ui.io/documentation/po-checkbox

HTML template for a po-checkbox with p-helper and p-keydown to trigger showAdditionalHelp.

```HTML
<po-checkbox
 #checkbox
 ...
 p-label="Label do checkbox"
 [p-helper]="helperOptions"
 (p-keydown)="onKeyDown($event, checkbox)"
></po-checkbox>
```

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

### Trigger showAdditionalHelp with p-keydown

Source: https://po-ui.io/documentation/po-textarea

This example shows how to set up a po-textarea with p-label and p-helper, and how to trigger the showAdditionalHelp() method via a keydown event (F9).

```html
//Exemplo com p-label e p-helper
<po-textarea
 #textarea
 ...
 p-label="Label do textarea"
 [p-helper]="helperOptions"
 (p-keydown)="onKeyDown($event, textarea)"
></po-textarea>

```

```typescript
...
onKeyDown(event: KeyboardEvent, inp: PoTextareaComponent): void {
 if (event.code === 'F9') {
   inp.showAdditionalHelp();
 }
}

```

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

### Basic example TypeScript

Source: https://po-ui.io/documentation/po-disclaimer-group

Component class for the basic example of po-disclaimer-group.

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

@Component({
  selector: 'sample-po-disclaimer-group-basic',
  templateUrl: './sample-po-disclaimer-group-basic.component.html',
  standalone: false
})
export class SamplePoDisclaimerGroupBasicComponent {}
```

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

### prepare

Source: https://po-ui.io/documentation/po-sync

Prepares the application by creating schemas and applying configurations.

```APIDOC
## prepare

### Description
Prepares the application by creating schemas and applying configurations.

### Method
N/A (SDK method)

### Endpoint
N/A

### Parameters
#### Parameters
- **schemas** (Array<PoSyncSchema>) - Required - List of schemas to be prepared.
- **config** (PoSyncConfig) - Required - Additional configurations.

### Request Example
N/A

### Response
#### Success Response
- **Promise<any>** - A promise that resolves when the application is ready for po-sync.

#### Response Example
N/A
```

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

### Basic example HTML

Source: https://po-ui.io/documentation/po-disclaimer-group

HTML template for the basic example of po-disclaimer-group.

```html
<po-disclaimer-group [p-disclaimers]="[{ value: 'disclaimer' }]"></po-disclaimer-group>
```

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

### Example PoBreadcrumbItem

Source: https://po-ui.io/documentation/po-breadcrumb

Example of a single breadcrumb item with label and link.

```typescript
{ label: 'Po Portal', link: 'portal' }
```

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

### Exemplo básico do PoUserGuideService (HTML e TypeScript)

Source: https://po-ui.io/documentation/po-user-guide

Exemplo básico do PoUserGuideService: o HTML define os elementos destacados e o botão que inicia o tour; o TypeScript configura os passos com posições e inicia o guia com progresso visível.

```html
<div class="po-row">
  <h2 id="sample-po-user-guide-basic-title" class="po-md-12">PO User Guide Basic</h2>

  <p id="sample-po-user-guide-basic-info" class="po-md-12">
    Acompanhe um guia rápido de três passos sobre os principais elementos desta página.
  </p>
  <p class="po-md-12">
    Quando o guia estiver ativo, é possível controlar a navegação pelo teclado: pressione <strong>Esc</strong> para
    encerrar o este tour, <strong>→</strong> (seta para a direita) ou <strong>Enter</strong> para avançar para o próximo
    passo e <strong>←</strong> (seta para a esquerda) para retornar ao passo anterior.
  </p>
</div>

<div class="po-row">
  <po-button
    id="sample-po-user-guide-basic-cta"
    class="po-md-3"
    p-label="Iniciar guia"
    p-kind="primary"
    (p-click)="startTour()"
  >
  </po-button>
</div>
```

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

import { PoUserGuidePosition, PoUserGuideService, PoUserGuideStep } from '@po-ui/ng-components';

@Component({
  selector: 'sample-po-user-guide-basic',
  templateUrl: './sample-po-user-guide-basic.component.html',
  standalone: false
})
export class SamplePoUserGuideBasicComponent {
  private readonly steps: Array<PoUserGuideStep> = [
    {
      element: '#sample-po-user-guide-basic-title',
      title: 'Bem-vindo ao tour',
      content: 'Este é um exemplo básico de uso do <strong>PoUserGuideService</strong>.',
      position: PoUserGuidePosition.Bottom
    },
    {
      element: '#sample-po-user-guide-basic-info',
      title: 'Conteúdo destacado',
      content: 'Aqui você pode descrever em detalhes a área destacada para o usuário.',
      position: PoUserGuidePosition.Right
    },
    {
      element: '#sample-po-user-guide-basic-cta',
      title: 'Próximos passos',
      content: 'Clique em <strong>Finalizar</strong> para encerrar o tour.',
      position: PoUserGuidePosition.Top
    }
  ];

  constructor(private poUserGuide: PoUserGuideService) {}

  startTour(): void {
    this.poUserGuide.setSteps(this.steps).setOptions({ showProgress: true }).start();
  }
}
```

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

### Example with caption-tag color

Source: https://po-ui.io/documentation/po-badge

Example of using a caption-tag color for the badge.

```html
<po-badge p-color="caption-tag-13" p-value="5"></po-badge>
```

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

### PoPageDynamicTableMetadata Interface Example

Source: https://po-ui.io/documentation/po-page-dynamic-table

An example of the expected JSON structure for the metadata response.

```json
 {
  version: 1,
  title: 'Person Table',
  fields: [
    { property: 'id', key: true, disabled: true },
    { property: 'status' },
    { property: 'name' },
    { property: 'nickname' },
    { property: 'birthdate', label: 'Birth date' },
    { property: 'genre' },
    { property: 'city' },
    { property: 'country' }
  ],
  keepFilters: true
}
```

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

### Basic example HTML

Source: https://po-ui.io/documentation/po-container

Minimal usage of the po-container component with no attributes.

```html
<po-container></po-container>
```

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

### Basic usage example

Source: https://po-ui.io/documentation/po-page-dynamic-search

Example of basic usage of po-page-dynamic-search with a single filter.

```APIDOC
## Basic Usage

### HTML
```html
<po-page-dynamic-search p-title="Po Page Dynamic search" [p-filters]="[{ property: 'name' }]"> </po-page-dynamic-search>
```

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

@Component({
  selector: 'sample-po-page-dynamic-search-basic',
  templateUrl: './sample-po-page-dynamic-search-basic.component.html',
  standalone: false
})
export class SamplePoPageDynamicSearchBasicComponent {}
```
```

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

### open()

Source: https://po-ui.io/documentation/po-page-slide

Ativa a visualização da página. Para utilizá-la é necessário ter a instância do componente no DOM, podendo ser utilizado o ViewChild.

```APIDOC
## open

### Description
Ativa a visualização da página.

### Method
open

### Usage
Para utilizá-la é necessário ter a instância do componente no DOM, podendo ser utilizado o `ViewChild` da seguinte forma:

```typescript
import { PoPageSlideComponent } from '@po/ng-components';

@ViewChild(PoPageSlideComponent, { static: true }) pageSlide: PoPageSlideComponent;

public openPage() {
  this.pageSlide.open();
}
```
```

```APIDOC
## close

### Description
Encerra a visualização da página.

### Method
close

### Usage
Para utilizá-la é necessário ter a instância do componente no DOM, podendo ser utilizado o `ViewChild` da seguinte forma:

```typescript
import { PoPageSlideComponent } from '@po-ui/ng-components';

...

@ViewChild(PoPageSlideComponent, { static: true }) pageSlide: PoPageSlideComponent;

public closePage() {
  this.pageSlide.close();
}
```
```

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

### Basic po-tabs TypeScript Example

Source: https://po-ui.io/documentation/po-tabs

TypeScript component class for the basic po-tabs example.

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

@Component({
  selector: 'sample-po-tabs-basic',
  templateUrl: './sample-po-tabs-basic.component.html',
  standalone: false
})
export class SamplePoTabsBasicComponent {}
```

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

### PoDynamicFormLoad focus example

Source: https://po-ui.io/documentation/po-dynamic-form

Example of setting the focus property in a PoDynamicFormLoad object to 'name'.

```typescript
focus: 'name'
```

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

### GitHub Copilot: Reference specific component documentation

Source: https://po-ui.io/documentation/ia-tools-llms

Use this prompt to ask GitHub Copilot to create a table with sorting and pagination based on the po-table documentation.

```text
Usando a documentação em https://po-ui.io/llms-generated/po-table.md,
crie uma tabela com ordenação e paginação.
```

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

### p-text-wrap example

Source: https://po-ui.io/documentation/po-dynamic-view

Example of using p-text-wrap to enable line breaks in the p-value text.

```html
<po-dynamic-view
  [p-value]="{ description: 'Primeira linha\nSegunda linha' }"
  [p-text-wrap]="true"
></po-dynamic-view>
```

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

### PoDropdownAction example with icon

Source: https://po-ui.io/documentation/po-dropdown

Example of a PoDropdownAction object with a label and an icon from the icon library.

```typescript
{ label: 'Ação', icon: 'an an-newspaper' }
```

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

### toggle

Source: https://po-ui.io/documentation/po-menu

Método que colapsa e expande o menu alternadamente.

```APIDOC
## Método: toggle

### Descrição
Método que colapsa e expande o menu alternadamente.

### Pré-requisito
Os métodos apenas vão colapsar/expandir o menu se todos os itens de menu tiverem valor nas propriedades `icon` e `shortLabel`.
```

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

### showAdditionalHelp Method - HTML Template Example

Source: https://po-ui.io/documentation/po-url

Example of using the showAdditionalHelp method with p-label and p-helper. It binds a keydown event to trigger the method.

```html
// Exemplo com p-label e p-helper
<po-nome-component
 #component
 ...
 p-label="Label do componente"
 [p-helper]="helperOptions"
 (p-keydown)="onKeyDown($event, component)"
></po-nome-component>
```

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

### Example Favorite Service URL

Source: https://po-ui.io/documentation/po-breadcrumb

Example URL for the favorite service used in p-favorite-service.

```text
https://po-ui.io/sample/api/favorite
```

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

### Example with Font Awesome icon

Source: https://po-ui.io/documentation/po-badge

Example of using a Font Awesome icon for the badge.

```html
<po-badge p-icon="fa fa-podcast"></po-badge>
```

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

### Configure PoStorageModule with custom options

Source: https://po-ui.io/documentation/po-storage

Example of configuring PoStorageModule.forRoot() with a custom storage name, store name, and driver order, prioritizing lokijs.

```typescript
import { PoStorageModule } from '@po-ui/ng-storage';

@NgModule({
 declarations: [...],
 imports: [
   // Importação do módulo PoStorageModule com a configuração personalizada
   PoStorageModule.forRoot({
     name: 'mystorage',
     storeName: '_mystore',
     driverOrder: ['lokijs', 'websql', 'indexeddb', 'localstorage']
   }),
 ],
 bootstrap: [IonicApp],
 providers: [...]
})
export class AppModule {}
```

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

### Labs Usage Example

Source: https://po-ui.io/documentation/po-tag

Example of lab usage of the po-tag component with various properties and events.

```APIDOC
## Labs Usage Example

### Description
Example of lab usage of the po-tag component with various properties and events.

### HTML
```html
<po-tag
  [p-color]="color"
  [p-disabled]="properties.includes('disabled')"
  [p-removable]="properties.includes('removable')"
  [p-icon]="icon"
  [p-text-color]="textColor"
  [p-label]="label"
  [p-orientation]="orientation"
  [p-type]="type"
  [p-value]="value"
  (p-click)="changeEvent('p-click')"
>
</po-tag>

<po-divider />

<div class="po-row">
  <po-info class="po-md-6" p-label="Events" [p-value]="event"> </po-info>
</div>

<po-divider />

<form #f="ngForm">
  <div class="po-row">
    <po-input class="po-md-6" name="label" [(ngModel)]="label" p-clean p-label="Label"> </po-input>

    <po-input class="po-md-6" name="value" [(ngModel)]="value" p-clean p-label="Value" p-required> </po-input>
  </div>

  <div class="po-row">
    <po-input
      class="po-md-6"
      name="color"
      [(ngModel)]="color"
      p-clean
      p-label="Color"
      p-help="color-01, caption-tag-01, red, rgb(201, 53, 125), #753399"
    >
    </po-input>

    <po-input
      class="po-md-6"
      name="textColor"
      [(ngModel)]="textColor"
      p-clean
      p-label="Text color"
      p-help="color-01, red, rgb(201, 53, 125), #753399"
    >
    </po-input>

    @if (!type) {
      <po-select class="po-md-6 po-mt-2" name="icon" [(ngModel)]="icon" p-label="Icon" [p-options]="iconList">
      </po-select>
    }

    <po-checkbox-group
      class="po-md-6 po-mt-2"
      name="properties"
      [(ngModel)]="properties"
      p-label="Properties"
      [p-options]="propertiesOptions"
      (p-change)="propertiesChange($event)"
    >
    </po-checkbox-group>

    @if (type) {
      <po-switch class="po-md-6" name="icon" [(ngModel)]="icon" p-label="Icon"> </po-switch>
    }
  </div>

  <div class="po-row">
    <po-radio-group
      class="po-md-4"
      name="orientation"
      [(ngModel)]="orientation"
      p-columns="1"
      p-label="Orientation"
      [p-options]="orientationOptions"
    >
    </po-radio-group>

    <po-radio-group
      class="po-md-6"
      name="type"
      [(ngModel)]="type"
      p-columns="3"
      p-label="Type"
      [p-options]="typeOptions"
    >
    </po-radio-group>
  </div>

  <div class="po-row">
    <po-button class="po-md-3" p-label="Sample Restore" (p-click)="restore()"> </po-button>
  </div>
</form>
```
```

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

### Basic po-tabs HTML Example

Source: https://po-ui.io/documentation/po-tabs

HTML template for a basic po-tabs example with two tabs.

```html
<po-tabs>
  <po-tab p-label="PO Tabs 1"></po-tab>
  <po-tab p-label="PO Tabs 2"></po-tab>
</po-tabs>
```
Tokens:
Raw