ngx-cho-components 2.0.0 → 4.0.0

package/README.md

@@ -1,111 +1,49 @@
-# NgxChoComponents
-
-This library provides reusable Angular components for CHO applications.
-
-Generated with [Angular CLI](https://github.com/angular/angular-cli) version 19.2.26.
-
-## Overview
-
-NgxChoComponents includes:
-- `ChoAddressInfoComponent` - Address display and editing
-- `ChoDetailsCardComponent` - Information card layout
-- `ChoEmailInfoComponent` - Email display and validation
-- `ChoPhoneInfoComponent` - Phone number display and formatting
-- `ChoRadioGroupComponent` - Radio button group with validation
-- `ChoReviewStatusAlertComponent` - Status alert messages
-
-## Dependencies
+# NgxChoComponents
 
-This library depends on:
-- **ngx-cho-common** (must be built first)
-
-This library does not require Bootstrap, ng-bootstrap, Popper, or PrimeNG.
+`ngx-cho-components` is the canonical home for reusable rendered UI across CHO Angular applications. Version 4 targets Angular 19 and PrimeNG 19 and has no Bootstrap, ng-bootstrap, PrimeFlex, Tailwind-presentation, toast, or spinner dependency.
 
 ## Installation
 
 ```bash
-npm install ngx-cho-components ngx-cho-common
+npm install --save-exact ngx-cho-common@4.0.0 ngx-cho-components@4.0.0
 ```
 
-## Breaking Changes
+Applications must provide compatible Angular Common, Core, and Forms packages plus PrimeNG 19.
 
-`ChoModalComponent` and the `<cho-modal>` selector have been removed. Applications should replace modal usage with an app-local dialog implementation, such as a native dialog or a PrimeNG dialog/drawer. This package no longer declares `bootstrap` or `@ng-bootstrap/ng-bootstrap` as peer dependencies.
-
-## Build
-
-**Important**: Build `ngx-cho-common` first before building this library.
-
-```bash
-# Build dependencies first
-ng build ngx-cho-common
-
-# Then build this library
-ng build ngx-cho-components
-```
-
-Build artifacts will be stored in the `dist/ngx-cho-components` directory.
-
-## Development
-
-### Code Scaffolding
-
-```bash
-ng generate component component-name --project ngx-cho-components
-ng generate service service-name --project ngx-cho-components
-```
-
-> Note: Always include `--project ngx-cho-components` or the component will be added to the default project.
-
-### Running Tests
-
-```bash
-ng test ngx-cho-components
-```
-
-## Publishing
+Import component styles once in the application root stylesheet, after the Common foundation:
 
-1. **Update version** in `projects/ngx-cho-components/package.json`. Use a major version for the modal-component and peer-dependency removal.
-2. **Build dependencies and library**:
-   ```bash
-   ng build ngx-cho-common
-   ng build ngx-cho-components --configuration production
-   ```
-3. **Publish to npm**:
-   ```bash
-   cd dist/ngx-cho-components
-   npm publish
-   ```
-
-## Usage
-
-Import the components module in your application:
-
-```typescript
-import { NgxChoComponentsModule } from 'ngx-cho-components';
-
-@NgModule({
-  imports: [NgxChoComponentsModule],
-  // ...
-})
-export class AppModule {}
-```
-
-Use components in your templates:
+```scss
+@use 'ngx-cho-common/styles';
+@use 'ngx-cho-components/styles';
+```
 
-```html
-<cho-address-info [address]="userAddress"></cho-address-info>
+## Public UI
+
+-   `ChoSearchCardComponent` composes a consistent card, named toolbar/filter/tab/content templates, optional paging, semantic padding, embedding, and configurable heading levels.
+-   `ChoDetailPageComponent` composes a header/tabs card with a separate projected feature body, a configurable heading, semantic body padding, and an optional back action.
+-   `ChoPagerComponent` maps PrimeNG paginator events to immutable `PaginationInstance` values. Query synchronization is explicit and its dropdown overlay appends to `body` by default.
+-   `ChoCardComponent`, `ChoDetailsCardComponent`, contact display components, `ChoRadioGroupComponent`, and `ChoReviewStatusAlertComponent` provide the remaining reusable visual contracts.
+
+Named slots are declared on `ng-template` elements:
 
-<cho-radio-group 
-  [options]="radioOptions" 
-  [(value)]="selectedValue">
-</cho-radio-group>
+```html
+<cho-search-card cardTitle="Jobs" [pager]="pager" [syncPagerQueryParams]="false">
+    <ng-template choSearchCardFilters>...</ng-template>
+    <ng-template choSearchCardToolbar>...</ng-template>
+    <ng-template choSearchCardContent>...</ng-template>
+</cho-search-card>
 ```
 
-## Styling
+Use `contentPadding="none"`, `compact`, or `comfortable`; wrap feature-specific layout in projected content instead of passing arbitrary classes into shared UI.
+Embedded SearchCards omit their own header and tabs. They retain filters, named content, and paging so callers can place them inside an application-owned surface without nested card chrome.
+
+## Build and Validation
 
-Components are framework-neutral and do not require Bootstrap. Applications should provide their own layout, dialog, and theme styling.
-
-## Further Help
+```bash
+npm run build:components
+npx ng test ngx-cho-components --watch=false --browsers=ChromeHeadless
+npm run test:style-contract
+npm run publish:components:dry
+```
 
-- [Angular CLI Overview and Command Reference](https://angular.io/cli)
-- [Angular Library Development Guide](https://angular.io/guide/creating-libraries)
+The guarded build verifies the Sass interface, peer contract, export targets, and packed tarball. Publishing is intentionally limited to the `next` tag by the package-specific command.