PO UI for Angular

PO Sync is a library that enables local data storage in an application while maintaining synchronization between local and server data. This allows users to use the application both online and offline with a consistent experience.

Core Mechanism: Event Sourcing

All modifications (create, update, delete) occur first in local storage. For every modification, an event is created consisting of the operation type and the modified record. These events are added to an event queue consumed by the synchronization process.

The Synchronization Process

Synchronization happens in the background while the application is online and occurs in two stages:

1. Local to Server: The process retrieves items from the event queue and sends modified data to the server sequentially.
2. Server to Local: The process fetches data modified on the server and updates the local application.

Synchronization Triggers

• Reactive: Triggered by device hardware changes (e.g., switching from 4G to Wi-Fi).
• Periodic: Triggered based on configuration parameters in PoSyncConfig.
• Manual: Triggered by calling PoSyncService.sync().

In PO UI v2, passing functions to component properties without explicit binding is deprecated. You must now use .bind(this) to ensure the function executes within the correct component context. This applies to functions passed within arrays or via property binding.

Affected Components: PageChangePassword, ButtonGroup, Menu, MenuPanel, Navbar, PageList, PageDefault, Popup, Stepper, Table, and Toolbar.

Examples:

1. Functions inside arrays (e.g., PoPageAction):

// Before
actions: Array<PoPageAction> = [
  { label: 'Adicionar', action: this.add }
]

// After
actions: Array<PoPageAction> = [
  { label: 'Adicionar', action: this.add.bind(this) }
]

2. Functions via property binding:

<!-- Before -->
<po-step p-label="Personal" [p-can-active-next-step="canActiveNextStep"></po-step>

<!-- After -->
<po-step p-label="Personal" [p-can-active-next-step="canActiveNextStep.bind(this)"></po-step>

// Correct way to pass functions in v2
actions: Array<PoPageAction> = [
  { label: 'Adicionar', action: this.add.bind(this) }
]

A PoTheme object allows you to define multiple theme types (light/dark) and accessibility levels.

Key configuration sections within a theme:

• color: Defines brand, neutral, and feedback color palettes using a scale (e.g., brand.01.base).
• onRoot: Sets global CSS variables for typography, border radius, and density (padding/gaps).
• perComponent: Allows granular CSS variable overrides for specific components (e.g., po-button).
• type: An array of configurations for different modes (light/dark) and accessibility levels (a11y).

import { PoTheme, PoThemeTypeEnum, PoThemeA11yEnum } from '@po-ui/ng-components';

export const corporateTheme: PoTheme = {
  name: 'corporate',
  type: [
    {
      light: {
        color: {
          brand: {
            '01': { 
              base: '#2A5C8D',
              light: '#4D7BA5',
              dark: '#1D4364'
            }
          }
        },
        onRoot: {
          '--font-family': "'Inter', sans-serif",
          '--border-radius': '6px',
          '--po-density-header-padding': '2rem',
          '--po-density-content-padding': '1rem'
        },
        perComponent: {
          'po-button': {
            '--padding': '0.75rem 1.5rem',
            '--font-weight': '600'
          }
        }
      },
      dark: { /* Dark mode settings */ },
      a11y: PoThemeA11yEnum.AAA
    }
  ],
  active: { type: PoThemeTypeEnum.light, a11y: PoThemeA11yEnum.AAA }
};