### Install Ionic CLI

Source: https://po-ui.io/guides/sync-get-started

Installs the Ionic CLI globally, necessary for creating and managing Ionic applications. This is a prerequisite for the Ionic project setup.

```bash
npm install -g @ionic/cli@7
```

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

### Install Project Dependencies

Source: https://po-ui.io/guides/sync-get-started

Installs all the project dependencies as defined in the `package.json` file. This command should be run after ensuring the `package.json` is correctly configured with PO UI versions.

```bash
npm install
```

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

### Install Angular CLI

Source: https://po-ui.io/guides/sync-get-started

Installs the Angular CLI globally, a prerequisite for creating and managing Angular projects. Ensure you have Node.js and NPM installed.

```bash
npm install -g @angular/cli@19
```

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

### Create Ionic Project

Source: https://po-ui.io/guides/sync-get-started

Creates a new Ionic project with the blank template and skips dependency installation. This command initializes the project structure for further configuration.

```bash
ionic start po-sync-getting-started blank --no-deps
```

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

### Install PO Theme CLI

Source: https://po-ui.io/guides/create-theme-customization

Installs the PO Theme CLI globally using npm. This command requires Node.js and npm to be installed on the system. It provides the necessary tools to manage PO UI themes.

```bash
npm install -g @po-ui/theme-cli

```

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

### Install PO UI Angular Templates

Source: https://po-ui.io/guides/schematics

Installs the `@po-ui/ng-templates` package, which includes pre-built page templates. It also imports the PO module and configures the PO theme if not already present in the project.

```bash
ng add @po-ui/ng-templates
```

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

### Configure AppModule for PO Sync

Source: https://po-ui.io/guides/sync-get-started

Imports and configures `PoStorageModule` and `PoSyncModule` in the `AppModule`. This step is crucial for enabling PO Sync and PO Storage functionalities within the application.

```typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { PoStorageModule } from '@po-ui/ng-storage';
import { PoSyncModule } from '@po-ui/ng-sync';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    PoStorageModule.forRoot(),
    PoSyncModule,
  ],
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    provideHttpClient(withInterceptorsFromDi()),
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}
```

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

### Install PO UI Angular Components

Source: https://po-ui.io/guides/schematics

Installs the `@po-ui/ng-components` package and configures the Angular project with basic PO UI structure. This includes replacing the `AppComponent`, importing the PO module, and setting up the PO theme.

```bash
ng add @po-ui/ng-components
```

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

### Navigate to Project Directory

Source: https://po-ui.io/guides/sync-get-started

Changes the current directory to the newly created Ionic project folder. This is a necessary step before installing dependencies or making configuration changes.

```bash
cd po-sync-getting-started
```

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

### Migrate PO UI ng-sync to v2

Source: https://po-ui.io/guides/migration-poui-v2

Installs and migrates the '@po-ui/ng-sync' package to version 2. This command assists in updating your project according to the breaking changes introduced in this version of the package.

```bash
npm i --save @po-ui/ng-sync@2
ng update @po-ui/ng-sync --from 1 --migrate-only
```

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

### PO UI Grid System: Responsive Column Adjustments

Source: https://po-ui.io/guides/grid-system

Shows how to create responsive layouts by defining different column widths for various screen sizes. This example adjusts two columns from taking up half the width on large screens to full width on medium and small screens.

```html
<div class="po-row">
  <div class="po-xl-6 po-lg-6 po-md-12 po-sm-12"></div>
  <div class="po-xl-6 po-lg-6 po-md-12 po-sm-12"></div>
</div>
```

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

### View PO Theme CLI Help

Source: https://po-ui.io/guides/create-theme-customization

Displays the available commands and options for the PO Theme CLI. This is useful for understanding the full capabilities of the tool and how to use its various features.

```bash
po-theme -help

```

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

### Add PO UI Sync Package

Source: https://po-ui.io/guides/sync-get-started

Adds the PO UI Sync package to the Angular project using the Angular CLI schematic. This command installs the necessary files and configurations for PO Sync.

```bash
ng add @po-ui/ng-sync
```

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

### Migrate PO UI ng-components to v2

Source: https://po-ui.io/guides/migration-poui-v2

Installs and migrates the '@po-ui/ng-components' package to version 2. This command helps in applying necessary project changes due to breaking changes and deprecations in the package.

```bash
npm i --save @po-ui/ng-components@2
ng update @po-ui/ng-components --from 1 --migrate-only
```

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

### PO UI Grid System: Medium Screen Layout Example

Source: https://po-ui.io/guides/grid-system

Demonstrates the behavior of columns when only a medium screen size class (`po-md-*`) is defined. Columns smaller than medium screens default to full width (12 units), while larger screens use the specified column size.

```html
<div class="po-row">
  <div class="po-md-6">po-md-6</div>
  <div class="po-md-6">po-md-6</div>
</div>
```

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

### Configure PO-UI Styles

Source: https://po-ui.io/guides/theme-service

This example shows how to configure the angular.json file to include the default PO-UI theme stylesheet. This step is crucial for applying PO-UI's base styles before custom theme application.

```json
"styles": [
  "node_modules/@po-ui/style/css/po-theme-default.min.css", 
  "src/styles.css"
]
```

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

### PO UI Grid System: Large Screen Layout Example

Source: https://po-ui.io/guides/grid-system

Illustrates the behavior of columns when only a large screen size class (`po-lg-*`) is defined. Similar to `po-md-*`, smaller screens default to full width (12 units), and larger screens adopt the specified column size.

```html
<div class="po-row">
  <div class="po-lg-4">po-lg-4</div>
  <div class="po-lg-4">po-lg-4</div>
  <div class="po-lg-4">po-lg-4</div>
</div>
```

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

### PO Sync Service - File Upload Example

Source: https://po-ui.io/guides/sync-fundamentals

Example of how to use insertHttpCommand to upload a file using 'multipart/form-data'.

```APIDOC
## POST /sync/http/command (File Upload)

### Description
Uploads a file to the server using a custom HTTP request with 'multipart/form-data'.

### Method
POST

### Endpoint
/sync/http/command

### Parameters
#### Request Body
- **poHttpRequestData** (PoHttpRequestData) - Required - Object containing HTTP request details for file upload.
  - **url** (string) - Required - The URL for the file upload endpoint.
  - **method** (PoHttpRequestType) - Required - Should be PoHttpRequestType.POST.
  - **body** (File) - Required - The File object to upload.
  - **formField** (string) - Optional - The name of the form field for the file. Defaults to 'file'.
  - **headers** (Array<PoHttpHeaderOption>) - Optional - Array of HTTP headers, e.g., for authorization.

### Request Example
```javascript
const file = new File([new Blob([fileContent])], "myFile.txt"); // Assume fileContent is defined
const requestData = {
  url: 'http://my-server/api/v1/upload',
  method: PoHttpRequestType.POST,
  headers: [
    { name: 'Authorization', value: 'Basic ' + btoa('13' + ':' + '13') }
  ],
  body: file,
  formField: 'files' // Optional, defaults to 'file'
};

this.poSync.insertHttpCommand(requestData).then(commandId => {
  console.log('File upload event added with ID:', commandId);
});
```

### Response
#### Success Response (200)
- **commandId** (string) - The ID of the event inserted into the queue.

#### Response Example
```json
{
  "commandId": "another-unique-event-id"
}
```
```

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

### Example Media Query Rule for Grid System MD

Source: https://po-ui.io/guides/grid-system

Illustrates the standard format for a media query rule within the PO UI grid system, specifically for the 'md' breakpoint. It shows how predefined CSS variables (tokens) are used to define the minimum and maximum viewport widths for this breakpoint.

```css
@media (min-width: var(--gridSystemMdMinWidth)) and (max-width: var(--gridSystemMdMaxWidth)){
 ...
}
```

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

### PO UI Grid System: Full Row with 12 Equal Columns

Source: https://po-ui.io/guides/grid-system

Demonstrates a full row divided into 12 equal columns. Each column takes up 1/12th of its parent's width. This setup is useful for distributing content evenly across the available horizontal space.

```html
<div class="po-xl-1 po-lg-1 po-md-1 po-sm-1"></div>
<div class="po-xl-1 po-lg-1 po-md-1 po-sm-1"></div>
<div class="po-xl-1 po-lg-1 po-md-1 po-sm-1"></div>
<div class="po-xl-1 po-lg-1 po-md-1 po-sm-1"></div>
<div class="po-xl-1 po-lg-1 po-md-1 po-sm-1"></div>
<div class="po-xl-1 po-lg-1 po-md-1 po-sm-1"></div>
<div class="po-xl-1 po-lg-1 po-md-1 po-sm-1"></div>
<div class="po-xl-1 po-lg-1 po-md-1 po-sm-1"></div>
<div class="po-xl-1 po-lg-1 po-md-1 po-sm-1"></div>
<div class="po-xl-1 po-lg-1 po-md-1 po-sm-1"></div>
<div class="po-xl-1 po-lg-1 po-md-1 po-sm-1"></div>
<div class="po-xl-1 po-lg-1 po-md-1 po-sm-1"></div>
```

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

### User Filtering and Pagination

Source: https://po-ui.io/guides/api

This section explains how to filter users by properties and paginate the results.

```APIDOC
## GET /api/users

### Description
Allows retrieval of users with optional filtering and pagination.

### Method
GET

### Endpoint
/api/users

### Parameters
#### Query Parameters
- **name** (string) - Optional - Filters users by name.
- **surname** (string) - Optional - Filters users by surname.
- **page** (integer) - Optional - Specifies the page number for pagination. Must be greater than zero.
- **pageSize** (integer) - Optional - Specifies the number of records per page. Must be greater than zero.

### Request Example
```json
GET https://example.com.br/api/users?name=john&surname=doe&page=4&pageSize=10
```

### Response
#### Success Response (200)
- **users** (array) - List of user objects.
- **hasNext** (boolean) - Indicates if there is a next page of results.
```

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

### Import PO Sync and PO Storage in Angular Standalone App

Source: https://po-ui.io/guides/sync-get-started

This snippet shows how to import the necessary modules for PO Sync and PO Storage in the main application file (`src/main.ts`) for a standalone Angular application. It configures the application with routing, HTTP client, and the PO Sync and PO Storage modules.

```typescript
import {
  bootstrapApplication
} from '@angular/platform-browser';
import {
  RouteReuseStrategy,
  provideRouter,
  withPreloading,
  PreloadAllModules
} from '@angular/router';
import {
  IonicRouteStrategy,
  provideIonicAngular
} from '@ionic/angular/standalone';
import { importProvidersFrom } from '@angular/core';
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';

import { PoSyncModule } from '@po-ui/ng-sync';
import { PoStorageModule } from '@po-ui/ng-storage';

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

bootstrapApplication(AppComponent, {
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    provideIonicAngular(),
    provideRouter(routes, withPreloading(PreloadAllModules)),
    provideHttpClient(withInterceptorsFromDi()),
    importProvidersFrom(PoSyncModule),
    importProvidersFrom(PoStorageModule.forRoot()),
  ],
});

```

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

### PO Storage Module Configuration with Lokijs

Source: https://po-ui.io/guides/sync-fundamentals

Shows how to configure the `PoStorageModule` in `app.module.ts` to prioritize `lokijs` for storage. This is recommended for handling larger file uploads and provides an example of the `forRoot` configuration with driver order.

```typescript
...
@NgModule({
  ...
  imports: [
    ...
    PoStorageModule.forRoot({
      name: 'mystorage',
      storeName: '_mystore',
      driverOrder: ['lokijs', 'indexeddb', 'localstorage', 'websql']
    }),
    PoSyncModule, // import do módulo Po Sync
  ],
  ...
})
export class AppModule {}
```

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

### Initialize New Custom PO UI Theme Project

Source: https://po-ui.io/guides/create-theme-customization

Creates a new directory for a custom PO UI theme project. It generates the initial file structure, including a CSS file for customizations. The user then navigates into this directory to modify the theme.

```bash
po-theme new my-custom-po-theme

```

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

### Install Angular Schematics for PO UI Migration

Source: https://po-ui.io/guides/migration-poui

Installs the Angular Schematics package, which is necessary for the PO UI update script to function correctly. This is a prerequisite before updating Angular itself.

```bash
npm install @angular-devkit/schematics --save-dev

```

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

### Instalar @angular/cli com npm

Source: https://po-ui.io/guides/getting-started

Instala globalmente o Angular CLI usando npm. O Angular CLI é essencial para criar e gerenciar projetos Angular.

```bash
npm i -g @angular/cli@19

```

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

### Prepare PO Sync Application with Initial Configuration

Source: https://po-ui.io/guides/sync-fundamentals

Prepares the application for PO Sync by providing schemas and initial configurations. The `prepare` method takes schemas and a configuration object, then calls `sync` upon completion. Dependencies include `PoSyncConfig` and `PoNetworkType`.

```typescript
const config: PoSyncConfig = {
  type: PoNetworkType.ethernet
};
const schemas = [conferenceSchema];

this.poSync.prepare(schemas, config).then(() => {
  this.poSync.sync();
  // ...
});
```

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

### Synchronize Capacitor

Source: https://po-ui.io/guides/sync-get-started

Synchronizes the project with Capacitor, which is used for native mobile functionality in Ionic apps. This command ensures native build files are up-to-date.

```bash
ionic cap sync
```

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

### Exemplo de Customização Global de Variáveis CSS

Source: https://po-ui.io/guides/theme-customization

Exemplo de como sobrescrever variáveis CSS globais para personalizar cores em toda a aplicação. Útil para definir paletas de cores consistentes.

```css
:root {
  --color-track: #ffecb3;
  --color-thumb: orange;
}
```

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

### Instalar @angular/cli com yarn

Source: https://po-ui.io/guides/getting-started

Instala globalmente o Angular CLI usando yarn. Uma alternativa ao npm para gerenciamento de pacotes.

```bash
yarn global add @angular/cli@19

```

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

### Configure PO Sync Service in AppComponent (Standalone)

Source: https://po-ui.io/guides/sync-get-started

This snippet demonstrates configuring the PO Sync service within the `AppComponent` for a standalone Angular application. It initializes the service with defined schemas and network configuration, then triggers the data synchronization.

```typescript
import { Component } from '@angular/core';
import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone';
import { Capacitor } from '@capacitor/core';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@capacitor/splash-screen';
import { StatusBar } from '@capacitor/status-bar';
import { PoNetworkType, PoSyncConfig, PoSyncService } from '@po-ui/ng-sync';

import { conferenceSchema } from './home/conference-schema.constants';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  imports: [IonApp, IonRouterOutlet],
})
export class AppComponent {
  constructor(
    private platform: Platform, private poSync: PoSyncService
  ) {
    this.initializeApp();
  }

  async initializeApp() {
    await this.platform.ready();
    if (Capacitor.isNativePlatform()) {
      StatusBar.setOverlaysWebView({ overlay: true });
    }
    await SplashScreen.hide();

    this.initSync();
  }

  initSync() {
    const config: PoSyncConfig = {
      type: PoNetworkType.wifi,
    };

    const schemas = [conferenceSchema];
    
    this.poSync.prepare(schemas, config).then(() => {
      this.poSync.sync();
    });
  }
}


```

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

### Instalar Pacote de Migração PO UI

Source: https://po-ui.io/guides/migration-thf-to-po-ui

Instala globalmente o pacote `po-migration` usando npm. Este pacote é essencial para automatizar a migração de projetos do THF para o PO UI. Não requer dependências externas além do npm.

```bash
npm install -g po-migration

```

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

### Criar novo projeto Angular com PO UI

Source: https://po-ui.io/guides/getting-started

Cria um novo projeto Angular chamado 'my-po-project' sem instalar as dependências imediatamente. Isso permite verificar e ajustar dependências antes da instalação.

```bash
ng new my-po-project --skip-install

```

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

### Configure PO Sync Service in AppComponent (NgModule)

Source: https://po-ui.io/guides/sync-get-started

This snippet shows how to initialize and configure the PO Sync service within the `AppComponent` for a traditional NgModule-based Angular application. It prepares the application with the defined schemas and configuration, then initiates the synchronization process.

```typescript
import { Component } from '@angular/core';
import { Capacitor } from '@capacitor/core';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@capacitor/splash-screen';
import { StatusBar } from '@capacitor/status-bar';
import { PoNetworkType, PoSyncConfig, PoSyncService } from '@po-ui/ng-sync';
import { conferenceSchema } from './home/conference-schema.constants';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
  standalone: false
})
export class AppComponent {
  constructor(private platform: Platform, private poSync: PoSyncService) {
    this.initializeApp();
  }

  async initializeApp() {
    await this.platform.ready();
    if (Capacitor.isNativePlatform()) {
      StatusBar.setOverlaysWebView({ overlay: true });
    }
    await SplashScreen.hide();

    this.initSync();
  }

  initSync() {
    const config: PoSyncConfig = {
      type: PoNetworkType.wifi,
    };
    const schemas = [conferenceSchema];
    this.poSync.prepare(schemas, config).then(() => {
      this.poSync.sync();
    });
  }
}


```

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

### Offset Columns with po-offset

Source: https://po-ui.io/guides/grid-system

The `po-offset-[size]-[columns]` class shifts columns to the right by a specified number of columns at a given screen size. This allows for flexible layout arrangements where elements don't necessarily start at the first column position.

```html
<div class="po-row">
  <div class="po-xl-4 po-lg-4  po-md-6 po-sm-12">Tamanho 4 e sem offset</div>
  <div class="po-offset-lg-4 po-offset-xl-4 po-xl-4 po-lg-4 po-md-6 po-sm-12">Tamanho 4 e offset 4</div>
</div>

<div class="po-row">
  <div class="po-offset-lg-3 po-offset-xl-3 po-xl-4 po-lg-4 po-md-6 po-sm-12">Tamanho 4 e offset 3</div>
  <div class="po-xl-3 po-lg-3 po-md-6 po-sm-12">Tamanho 3 e sem offset</div>
</div>
```

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

### Build Modifications for Testing - npm

Source: https://po-ui.io/guides/development-flow

Builds the project modifications and prepares them for testing within the PO UI Portal. Includes commands for building the project and serving the portal locally.

```bash
npm run build
npm run build:portal
ng serve portal
```

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

### Accessing Data with NgModule and PoSyncService

Source: https://po-ui.io/guides/sync-get-started

This snippet shows how to initialize PoSyncService in an Angular NgModule-based component. It subscribes to the onSync event to load conference data. The loadHomePage method fetches a 'conference' record using PoSyncService. The clear method resets the conference data.

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

import { PoSyncService } from '@po-ui/ng-sync';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
  standalone: false
})
export class HomePage {

  conference: any;

  constructor(private poSync: PoSyncService) {
    this.poSync.onSync().subscribe(() => this.loadHomePage());
  }

  async loadHomePage() {
    this.conference = await this.poSync.getModel('conference').findOne().exec();
  }

  clear() {
    this.conference = null;
  }

}
```

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

### Define Conference Schema for PO Sync

Source: https://po-ui.io/guides/sync-get-started

This code defines a `PoSyncSchema` for the 'conference' data model. It specifies API endpoints for fetching data and differences, the field indicating deletion, the fields to be included, the unique identifier field, and the page size for API requests.

```typescript
import { PoSyncSchema } from '@po-ui/ng-sync';

export const conferenceSchema: PoSyncSchema = {
  getUrlApi: 'https://po-sample-conference.onrender.com/conferences',
  diffUrlApi: 'https://po-sample-conference.onrender.com/conferences/diff',
  deletedField: 'deleted',
  fields: [ 'id', 'title', 'location', 'description' ],
  idField: 'id',
  name: 'conference',
  pageSize: 1
};

```

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

### Iniciar Migração Completa do Projeto PO UI

Source: https://po-ui.io/guides/migration-thf-to-po-ui

Inicia a migração completa do projeto THF para PO UI, incluindo palavras-chave padrão e personalizadas (como 'thf', 't-', 'totvs'). Execute dentro da pasta raiz do projeto. Tenha cuidado para não alterar nomes de arquivos ou caminhos que contenham essas palavras.

```bash
po-migration start --all

```

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

### Iniciar Migração Padrão do Projeto PO UI

Source: https://po-ui.io/guides/migration-thf-to-po-ui

Inicia o processo de migração do projeto THF para PO UI, alterando palavras-chave predefinidas no dicionário do pacote. É necessário executar este comando dentro da pasta raiz do projeto a ser migrado. Funciona apenas com palavras-chave padrão do THF.

```bash
po-migration start

```

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

### Update PO UI ng-components Package

Source: https://po-ui.io/guides/migration-poui

Updates the `@po-ui/ng-components` package to a specified version. The `--allow-dirty` flag can be used to commit modified files from the Angular migration, and `--force` is used to ignore dependency version mismatches. A clean installation might be needed if errors occur.

```bash
ng update @po-ui/ng-components@<version> --allow-dirty --force

```

```bash
ng update @po-ui/ng-components --allow-dirty --force

```

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

### Instalar dependências com npm

Source: https://po-ui.io/guides/getting-started

Instala as dependências do projeto Angular especificadas no arquivo package.json usando npm.

```bash
npm install

```

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

### Build Custom PO UI Theme

Source: https://po-ui.io/guides/create-theme-customization

Generates a production-ready build of the custom PO UI theme. This command should be run from within the theme project directory. Optional parameters can be used to name the output file or include font customizations.

```bash
po-theme build

```

```bash
po-theme build --name my-theme-name

```

```bash
po-theme build --fonts

```

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

### Exibir Ajuda do Pacote de Migração PO UI

Source: https://po-ui.io/guides/migration-thf-to-po-ui

Exibe a documentação completa e opções de ajuda para o pacote `po-migration`. Útil para entender todas as funcionalidades e comandos disponíveis para o processo de migração.

```bash
po-migration --help

```

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

### Control Element Visibility with po-visible-[size]

Source: https://po-ui.io/guides/grid-system

The `po-visible-[size]` class makes an element visible only when the screen size reaches or exceeds the specified breakpoint (e.g., `sm`, `md`, `lg`, `xl`). Elements not meeting the size criteria will be hidden (`display: none`). When visible, the element gets `display: block`.

```html
<div class="po-visible-sm po-sm-12">Visível no tamanho 'sm'</div>
<div class="po-visible-md po-md-12">Visível no tamanho 'md'</div>
<div class="po-visible-lg-12">Visível no tamanho 'lg'</div>
<div class="po-visible-xl-12">Visível no tamanho 'xl'</div>
```

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

### Displaying Conference Data in Ionic Template

Source: https://po-ui.io/guides/sync-get-started

This HTML template uses Ionic components to display conference data fetched by the PoSyncService. It includes buttons to trigger data fetching ('Buscar informações') and clearing the data ('Apagar informações'). The conference details (title, description, location) are conditionally rendered using NgIf.

```html
<ion-content class="ion-padding">
  <ion-button expand="full" (click)="loadHomePage()">Buscar informações</ion-button>
  <ion-button expand="full" color="danger" (click)="clear()">Apagar informações</ion-button>

  <ion-card *ngIf="conference">
    <ion-card-content>
      <ion-card-title>
        {{ conference.title }}
      </ion-card-title>
      <p>{{ conference.description }}</p>
      <p>{{ conference.location }}</p>
    </ion-card-content>
  </ion-card>
</ion-content>
```

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

### Customizing Grid System Breakpoint Tokens with PoMediaQueryService

Source: https://po-ui.io/guides/grid-system

Demonstrates how to define and apply custom breakpoint tokens for the PO UI grid system using the `PoMediaQueryService`. This allows developers to override default breakpoint values for different screen sizes (sm, md, lg). The service `updateTokens` method is used to apply these customizations.

```typescript
const tokens: PoMediaQueryTokens =  {
 *     sm: {
 *      gridSystemSmMaxWidth: '1023px'
 *      },
 *     md: {
 *      gridSystemMdMinWidth: '1024px',
 *      gridSystemMdMaxWidth: '1366px'
 *     },
 *     lg: {
 *      gridSystemLgMinWidth: '1367px',
 *      gridSystemLgMaxWidth: '9999px'
 *     }
 *    };

this.styleService.updateTokens(tokensMediaQueries);
```

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

### Configuring TypeScript for PO UI Sync

Source: https://po-ui.io/guides/sync-get-started

This configuration snippet addresses a potential TypeScript error (TS2320) related to version conflicts with Ionic and PO UI Sync, specifically when using TypeScript 5.2.x. Adding "skipLibCheck": true to the tsconfig.json file resolves this issue by skipping type checking of declaration files.

```json
{
  // ... other tsconfig options
  "skipLibCheck": true
}
```

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

### Accessing Data with Standalone Components and PoSyncService

Source: https://po-ui.io/guides/sync-get-started

This snippet illustrates accessing data using PoSyncService within an Angular Standalone component. Similar to the NgModule approach, it subscribes to onSync to load conference data. The loadHomePage method retrieves a 'conference' record, and clear resets the data. This version includes necessary imports for standalone components.

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

import { IonicModule } from '@ionic/angular';
import { PoSyncService } from '@po-ui/ng-sync';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
  imports: [IonicModule, NgIf],
})
export class HomePage {
  conference: any;

  constructor(private poSync: PoSyncService) {
    this.poSync.onSync().subscribe(() => this.loadHomePage());
  }

  async loadHomePage() {
    this.conference = await this.poSync.getModel('conference').findOne().exec();
  }

  clear() {
    this.conference = null;
  }
}
```

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

### Publish Custom PO UI Theme

Source: https://po-ui.io/guides/create-theme-customization

Publishes the built custom PO UI theme to a package registry, typically npm. This command is executed from the `dist` directory created by the build process. Ensure the `package.json` file is correctly configured.

```bash
npm publish

```