ngx-cho-components 2.0.0 → 4.0.0

package/fesm2022/ngx-cho-components.mjs

@@ -1,120 +1,210 @@
+import { TitleCasePipe, NgTemplateOutlet, DatePipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Input, Component, ChangeDetectionStrategy, input, inject, output, viewChild, computed, signal, effect, ContentChild, EventEmitter, Output } from '@angular/core';
-import { TitleCasePipe, NgIf, NgTemplateOutlet, NgFor, DatePipe } from '@angular/common';
-import { ChoNavigationService, ChoRouteParamService } from 'ngx-cho-common';
-import * as i1 from '@angular/platform-browser';
-import * as i1$1 from '@angular/forms';
+import { input, ChangeDetectionStrategy, Component, inject, output, TemplateRef, Directive, contentChild, linkedSignal, computed, signal, effect } from '@angular/core';
+import { ChoNavigationService, ChoRouteParamService, CHO_PAGE_SIZE_OPTIONS, CHO_DEFAULT_PAGE_SIZE } from 'ngx-cho-common';
+import * as i1 from 'primeng/button';
+import { ButtonModule } from 'primeng/button';
+import * as i1$1 from 'primeng/paginator';
+import { PaginatorModule } from 'primeng/paginator';
+import * as i1$2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 
 class ChoAddressInfoComponent {
+    constructor() {
+        this.address = input.required();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.24", ngImport: i0, type: ChoAddressInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.24", type: ChoAddressInfoComponent, isStandalone: true, selector: "cho-address-info", inputs: { address: "address" }, ngImport: i0, template: `<p *ngIf="address.addressLine1" class="m-0">
-            {{ address.addressLine1 | titlecase }}
-        </p>
-        <p *ngIf="address.addressLine2" class="m-0">
-            {{ address.addressLine2 | titlecase }}
-        </p>
-        <p *ngIf="address.city" class="m-0">
-            {{ address.city | titlecase }}, {{ address.stateProvinceCode }}
-            {{ address.postalCode }}
-        </p> `, isInline: true, dependencies: [{ kind: "pipe", type: TitleCasePipe, name: "titlecase" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.24", type: ChoAddressInfoComponent, isStandalone: true, selector: "cho-address-info", inputs: { address: { classPropertyName: "address", publicName: "address", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+        <div class="cho-contact-info">
+            @if (address().addressLine1) {
+                <p class="cho-contact-info__line">{{ address().addressLine1 | titlecase }}</p>
+            }
+            @if (address().addressLine2) {
+                <p class="cho-contact-info__line">{{ address().addressLine2 | titlecase }}</p>
+            }
+            @if (address().city) {
+                <p class="cho-contact-info__line">
+                    {{ address().city | titlecase }}, {{ address().stateProvinceCode }}
+                    {{ address().postalCode }}
+                </p>
+            }
+        </div>
+    `, isInline: true, dependencies: [{ kind: "pipe", type: TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.24", ngImport: i0, type: ChoAddressInfoComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'cho-address-info',
-                    template: `<p *ngIf="address.addressLine1" class="m-0">
-            {{ address.addressLine1 | titlecase }}
-        </p>
-        <p *ngIf="address.addressLine2" class="m-0">
-            {{ address.addressLine2 | titlecase }}
-        </p>
-        <p *ngIf="address.city" class="m-0">
-            {{ address.city | titlecase }}, {{ address.stateProvinceCode }}
-            {{ address.postalCode }}
-        </p> `,
-                    imports: [TitleCasePipe, NgIf],
+                    standalone: true,
+                    imports: [TitleCasePipe],
+                    template: `
+        <div class="cho-contact-info">
+            @if (address().addressLine1) {
+                <p class="cho-contact-info__line">{{ address().addressLine1 | titlecase }}</p>
+            }
+            @if (address().addressLine2) {
+                <p class="cho-contact-info__line">{{ address().addressLine2 | titlecase }}</p>
+            }
+            @if (address().city) {
+                <p class="cho-contact-info__line">
+                    {{ address().city | titlecase }}, {{ address().stateProvinceCode }}
+                    {{ address().postalCode }}
+                </p>
+            }
+        </div>
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { address: [{
-                type: Input
-            }] } });
+        }] });
 
 class ChoCardFiltersComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.24", ngImport: i0, type: ChoCardFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.24", type: ChoCardFiltersComponent, isStandalone: true, selector: "cho-card-filters", host: { classAttribute: "card-filters" }, ngImport: i0, template: ` <ng-content /> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.24", type: ChoCardFiltersComponent, isStandalone: true, selector: "cho-card-filters", host: { classAttribute: "cho-card-filters" }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.24", ngImport: i0, type: ChoCardFiltersComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'cho-card-filters',
+                    standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [],
-                    host: { class: 'card-filters' },
-                    template: ` <ng-content /> `,
+                    host: { class: 'cho-card-filters' },
+                    template: `<ng-content />`,
                 }]
         }] });
 
 class ChoCardToolbarComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.24", ngImport: i0, type: ChoCardToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.24", type: ChoCardToolbarComponent, isStandalone: true, selector: "cho-card-toolbar", host: { classAttribute: "card-toolbar" }, ngImport: i0, template: ` <ng-content /> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.24", type: ChoCardToolbarComponent, isStandalone: true, selector: "cho-card-toolbar", host: { classAttribute: "cho-card-toolbar cho-action-row cho-action-row--responsive cho-action-row--primary-right" }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.24", ngImport: i0, type: ChoCardToolbarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'cho-card-toolbar',
+                    standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [],
-                    host: { class: 'card-toolbar' },
-                    template: ` <ng-content /> `,
+                    host: {
+                        class: 'cho-card-toolbar cho-action-row cho-action-row--responsive cho-action-row--primary-right',
+                    },
+                    template: `<ng-content />`,
                 }]
         }] });
 
 class ChoCardHeaderComponent {
     constructor() {
+        this.headingLevel = input(3);
         this.headerText = input();
         this.toolbar = input();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.24", ngImport: i0, type: ChoCardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.24", type: ChoCardHeaderComponent, isStandalone: true, selector: "cho-card-header", inputs: { headerText: { classPropertyName: "headerText", publicName: "headerText", isSignal: true, isRequired: false, transformFunction: null }, toolbar: { classPropertyName: "toolbar", publicName: "toolbar", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-        <div class="card-header">
-            <h3 class="card-title">
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.24", type: ChoCardHeaderComponent, isStandalone: true, selector: "cho-card-header", inputs: { headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null }, headerText: { classPropertyName: "headerText", publicName: "headerText", isSignal: true, isRequired: false, transformFunction: null }, toolbar: { classPropertyName: "toolbar", publicName: "toolbar", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+        <header class="cho-card-header">
+            @switch (headingLevel()) {
+                @case (1) {
+                    <h1 class="cho-card-header__title">
+                        <ng-container *ngTemplateOutlet="title" />
+                    </h1>
+                }
+                @case (2) {
+                    <h2 class="cho-card-header__title">
+                        <ng-container *ngTemplateOutlet="title" />
+                    </h2>
+                }
+                @case (4) {
+                    <h4 class="cho-card-header__title">
+                        <ng-container *ngTemplateOutlet="title" />
+                    </h4>
+                }
+                @case (5) {
+                    <h5 class="cho-card-header__title">
+                        <ng-container *ngTemplateOutlet="title" />
+                    </h5>
+                }
+                @case (6) {
+                    <h6 class="cho-card-header__title">
+                        <ng-container *ngTemplateOutlet="title" />
+                    </h6>
+                }
+                @default {
+                    <h3 class="cho-card-header__title">
+                        <ng-container *ngTemplateOutlet="title" />
+                    </h3>
+                }
+            }
+
+            <ng-template #title>
                 @if (headerText()) {
                     {{ headerText() }}
                 } @else {
                     <ng-content />
                 }
-            </h3>
+            </ng-template>
 
             @if (toolbar()) {
                 <cho-card-toolbar>
                     <ng-container *ngTemplateOutlet="toolbar()!" />
                 </cho-card-toolbar>
             }
-        </div>
+        </header>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ChoCardToolbarComponent, selector: "cho-card-toolbar" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.24", ngImport: i0, type: ChoCardHeaderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'cho-card-header',
+                    standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [NgTemplateOutlet, ChoCardToolbarComponent],
                     template: `
-        <div class="card-header">
-            <h3 class="card-title">
+        <header class="cho-card-header">
+            @switch (headingLevel()) {
+                @case (1) {
+                    <h1 class="cho-card-header__title">
+                        <ng-container *ngTemplateOutlet="title" />
+                    </h1>
+                }
+                @case (2) {
+                    <h2 class="cho-card-header__title">
+                        <ng-container *ngTemplateOutlet="title" />
+                    </h2>
+                }
+                @case (4) {
+                    <h4 class="cho-card-header__title">
+                        <ng-container *ngTemplateOutlet="title" />
+                    </h4>
+                }
+                @case (5) {
+                    <h5 class="cho-card-header__title">
+                        <ng-container *ngTemplateOutlet="title" />
+                    </h5>
+                }
+                @case (6) {
+                    <h6 class="cho-card-header__title">
+                        <ng-container *ngTemplateOutlet="title" />
+                    </h6>
+                }
+                @default {
+                    <h3 class="cho-card-header__title">
+                        <ng-container *ngTemplateOutlet="title" />
+                    </h3>
+                }
+            }
+
+            <ng-template #title>
                 @if (headerText()) {
                     {{ headerText() }}
                 } @else {
                     <ng-content />
                 }
-            </h3>
+            </ng-template>
 
             @if (toolbar()) {
                 <cho-card-toolbar>
                     <ng-container *ngTemplateOutlet="toolbar()!" />
                 </cho-card-toolbar>
             }
-        </div>
+        </header>
     `,
                 }]
         }] });
@@ -139,117 +229,110 @@ class ChoCardTabsComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.24", ngImport: i0, type: ChoCardTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.24", type: ChoCardTabsComponent, isStandalone: true, selector: "cho-card-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabSelect: "tabSelect" }, ngImport: i0, template: `
-        <div class="card-tabs">
+        <nav class="cho-card-tabs" aria-label="Card views">
             <ul>
                 @for (tab of tabs(); track tab.value) {
                     <li (click)="onSelect(tab.value)">
-                        <a
-                            class="nav-link text-active-primary"
-                            [class.active]="activeTab === tab.value">
+                        <a class="cho-card-tabs__link" [class.active]="activeTab === tab.value">
                             {{ tab.label }}
                         </a>
                     </li>
                 }
             </ul>
-        </div>
+        </nav>
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.24", ngImport: i0, type: ChoCardTabsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'cho-card-tabs',
+                    standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [],
                     template: `
-        <div class="card-tabs">
+        <nav class="cho-card-tabs" aria-label="Card views">
             <ul>
                 @for (tab of tabs(); track tab.value) {
                     <li (click)="onSelect(tab.value)">
-                        <a
-                            class="nav-link text-active-primary"
-                            [class.active]="activeTab === tab.value">
+                        <a class="cho-card-tabs__link" [class.active]="activeTab === tab.value">
                             {{ tab.label }}
                         </a>
                     </li>
                 }
             </ul>
-        </div>
+        </nav>
     `,
                 }]
         }] });
 
 class ChoCardComponent {
     constructor() {
+        this.content = input();
+        this.contentPadding = input('comfortable');
+        this.embedded = input(false);
+        this.filters = input();
         this.header = input();
         this.headerText = input();
-        this.toolbar = input();
-        this.filters = input();
-        this.content = input();
+        this.headingLevel = input(3);
+        this.hideHeader = input(false);
+        this.showBody = input(true);
         this.tabs = input();
+        this.tabsContent = input();
+        this.toolbar = input();
         this.tabSelect = output();
-        // used for projected content detection
-        this.contentWrapper = viewChild('contentWrapper');
-        this.hasContent = computed(() => this.content() || this._hasProjectedContent());
-        this.hasFilters = computed(() => !!this.filters());
-        this.hasHeader = computed(() => !!this.header() || !!this.headerText());
-        this.hasTabs = computed(() => !!this.tabs() && this.tabs().length > 0);
-        this.hasToolbar = computed(() => !!this.toolbar());
-        this._hasProjectedContent = signal(false);
-        effect(() => this.detectProjectedContent(), { allowSignalWrites: true });
-    }
-    detectProjectedContent() {
-        const wrapper = this.contentWrapper();
-        if (wrapper) {
-            const element = wrapper.nativeElement;
-            const hasRealContent = Array.from(element.childNodes).some((node) => {
-                if (node.nodeType === Node.ELEMENT_NODE)
-                    return true;
-                if (node.nodeType === Node.TEXT_NODE) {
-                    return node.textContent?.trim().length > 0;
-                }
-                return false;
-            });
-            this._hasProjectedContent.set(hasRealContent);
-        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.24", ngImport: i0, type: ChoCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.24", type: ChoCardComponent, isStandalone: true, selector: "cho-card", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, headerText: { classPropertyName: "headerText", publicName: "headerText", isSignal: true, isRequired: false, transformFunction: null }, toolbar: { classPropertyName: "toolbar", publicName: "toolbar", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabSelect: "tabSelect" }, viewQueries: [{ propertyName: "contentWrapper", first: true, predicate: ["contentWrapper"], descendants: true, isSignal: true }], ngImport: i0, template: `
-        <div class="card mb-3">
-            @if (hasHeader()) {
-                <cho-card-header [toolbar]="toolbar()" [headerText]="headerText()">
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.24", type: ChoCardComponent, isStandalone: true, selector: "cho-card", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, contentPadding: { classPropertyName: "contentPadding", publicName: "contentPadding", isSignal: true, isRequired: false, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, headerText: { classPropertyName: "headerText", publicName: "headerText", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null }, hideHeader: { classPropertyName: "hideHeader", publicName: "hideHeader", isSignal: true, isRequired: false, transformFunction: null }, showBody: { classPropertyName: "showBody", publicName: "showBody", isSignal: true, isRequired: false, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, tabsContent: { classPropertyName: "tabsContent", publicName: "tabsContent", isSignal: true, isRequired: false, transformFunction: null }, toolbar: { classPropertyName: "toolbar", publicName: "toolbar", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabSelect: "tabSelect" }, ngImport: i0, template: `
+        <section class="cho-card" [class.cho-card--embedded]="embedded()">
+            @if (!hideHeader() && (header() || headerText())) {
+                <cho-card-header
+                    [headingLevel]="headingLevel()"
+                    [toolbar]="toolbar()"
+                    [headerText]="headerText()">
                     <ng-container *ngTemplateOutlet="header()!" />
                 </cho-card-header>
-            } @else if (hasToolbar()) {
+            } @else if (!hideHeader() && toolbar()) {
                 <cho-card-toolbar>
                     <ng-container *ngTemplateOutlet="toolbar()!" />
                 </cho-card-toolbar>
             }
 
-            @if (hasFilters()) {
+            @if (filters()) {
                 <cho-card-filters>
                     <ng-container *ngTemplateOutlet="filters()!" />
                 </cho-card-filters>
             }
 
-            @if (hasTabs()) {
+            @if (tabsContent()) {
+                <div class="cho-card__tabs">
+                    <ng-container *ngTemplateOutlet="tabsContent()!" />
+                </div>
+            } @else if (tabs()?.length) {
                 <cho-card-tabs [tabs]="tabs()!" (tabSelect)="tabSelect.emit($event)">
                 </cho-card-tabs>
             }
 
-            <div class="card-body" #contentWrapper [hidden]="!hasContent()">
-                @if (content()) {
-                    <ng-container *ngTemplateOutlet="content()!" />
-                } @else {
-                    <ng-content />
-                }
-            </div>
-        </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ChoCardHeaderComponent, selector: "cho-card-header", inputs: ["headerText", "toolbar"] }, { kind: "component", type: ChoCardToolbarComponent, selector: "cho-card-toolbar" }, { kind: "component", type: ChoCardFiltersComponent, selector: "cho-card-filters" }, { kind: "component", type: ChoCardTabsComponent, selector: "cho-card-tabs", inputs: ["tabs"], outputs: ["tabSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+            @if (showBody()) {
+                <div
+                    class="cho-card__body"
+                    [class.cho-card__body--compact]="contentPadding() === 'compact'"
+                    [class.cho-card__body--comfortable]="contentPadding() === 'comfortable'"
+                    [class.cho-card__body--none]="contentPadding() === 'none'">
+                    @if (content()) {
+                        <ng-container *ngTemplateOutlet="content()!" />
+                    } @else {
+                        <ng-content />
+                    }
+                </div>
+            }
+        </section>
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ChoCardHeaderComponent, selector: "cho-card-header", inputs: ["headingLevel", "headerText", "toolbar"] }, { kind: "component", type: ChoCardToolbarComponent, selector: "cho-card-toolbar" }, { kind: "component", type: ChoCardFiltersComponent, selector: "cho-card-filters" }, { kind: "component", type: ChoCardTabsComponent, selector: "cho-card-tabs", inputs: ["tabs"], outputs: ["tabSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.24", ngImport: i0, type: ChoCardComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'cho-card',
+                    standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [
                         NgTemplateOutlet,
@@ -259,236 +342,620 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.24", ngImpo
                         ChoCardTabsComponent,
                     ],
                     template: `
-        <div class="card mb-3">
-            @if (hasHeader()) {
-                <cho-card-header [toolbar]="toolbar()" [headerText]="headerText()">
+        <section class="cho-card" [class.cho-card--embedded]="embedded()">
+            @if (!hideHeader() && (header() || headerText())) {
+                <cho-card-header
+                    [headingLevel]="headingLevel()"
+                    [toolbar]="toolbar()"
+                    [headerText]="headerText()">
                     <ng-container *ngTemplateOutlet="header()!" />
                 </cho-card-header>
-            } @else if (hasToolbar()) {
+            } @else if (!hideHeader() && toolbar()) {
                 <cho-card-toolbar>
                     <ng-container *ngTemplateOutlet="toolbar()!" />
                 </cho-card-toolbar>
             }
 
-            @if (hasFilters()) {
+            @if (filters()) {
                 <cho-card-filters>
                     <ng-container *ngTemplateOutlet="filters()!" />
                 </cho-card-filters>
             }
 
-            @if (hasTabs()) {
+            @if (tabsContent()) {
+                <div class="cho-card__tabs">
+                    <ng-container *ngTemplateOutlet="tabsContent()!" />
+                </div>
+            } @else if (tabs()?.length) {
                 <cho-card-tabs [tabs]="tabs()!" (tabSelect)="tabSelect.emit($event)">
                 </cho-card-tabs>
             }
 
-            <div class="card-body" #contentWrapper [hidden]="!hasContent()">
-                @if (content()) {
-                    <ng-container *ngTemplateOutlet="content()!" />
-                } @else {
-                    <ng-content />
-                }
-            </div>
-        </div>
+            @if (showBody()) {
+                <div
+                    class="cho-card__body"
+                    [class.cho-card__body--compact]="contentPadding() === 'compact'"
+                    [class.cho-card__body--comfortable]="contentPadding() === 'comfortable'"
+                    [class.cho-card__body--none]="contentPadding() === 'none'">
+                    @if (content()) {
+                        <ng-container *ngTemplateOutlet="content()!" />
+                    } @else {
+                        <ng-content />
+                    }
+                </div>
+            }
+        </section>
     `,
                 }]
-        }], ctorParameters: () => [] });
+        }] });
+
+class ChoDetailPageToolbarDirective {
+    constructor() {
+        this.templateRef = inject((TemplateRef));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.24", ngImport: i0, type: ChoDetailPageToolbarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.24", type: ChoDetailPageToolbarDirective, isStandalone: true, selector: "ng-template[choDetailPageToolbar]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.24", ngImport: i0, type: ChoDetailPageToolbarDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[choDetailPageToolbar]', standalone: true }]
+        }] });
+class ChoDetailPageTabsDirective {
+    constructor() {
+        this.templateRef = inject((TemplateRef));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.24", ngImport: i0, type: ChoDetailPageTabsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.24", type: ChoDetailPageTabsDirective, isStandalone: true, selector: "ng-template[choDetailPageTabs]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.24", ngImport: i0, type: ChoDetailPageTabsDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[choDetailPageTabs]', standalone: true }]
+        }] });
+class ChoDetailPageComponent {
+    constructor() {
+        this.backIcon = input('pi pi-arrow-left');
+        this.backLabel = input('Back');
+        this.contentPadding = input('comfortable');
+        this.headingLevel = input(1);
+        this.pageTitle = input.required();
+        this.showBackButton = input(true);
+        this.back = output();
+        this.tabs = contentChild(ChoDetailPageTabsDirective);
+        this.toolbar = contentChild(ChoDetailPageToolbarDirective);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.24", ngImport: i0, type: ChoDetailPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.24", type: ChoDetailPageComponent, isStandalone: true, selector: "cho-detail-page", inputs: { backIcon: { classPropertyName: "backIcon", publicName: "backIcon", isSignal: true, isRequired: false, transformFunction: null }, backLabel: { classPropertyName: "backLabel", publicName: "backLabel", isSignal: true, isRequired: false, transformFunction: null }, contentPadding: { classPropertyName: "contentPadding", publicName: "contentPadding", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null }, pageTitle: { classPropertyName: "pageTitle", publicName: "pageTitle", isSignal: true, isRequired: true, transformFunction: null }, showBackButton: { classPropertyName: "showBackButton", publicName: "showBackButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { back: "back" }, queries: [{ propertyName: "tabs", first: true, predicate: ChoDetailPageTabsDirective, descendants: true, isSignal: true }, { propertyName: "toolbar", first: true, predicate: ChoDetailPageToolbarDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
+        <cho-card
+            [contentPadding]="'none'"
+            [headingLevel]="headingLevel()"
+            [headerText]="pageTitle()"
+            [showBody]="false"
+            [tabsContent]="tabs()?.templateRef"
+            [toolbar]="pageToolbar">
+        </cho-card>
+
+        <ng-template #pageToolbar>
+            @if (toolbar(); as projectedToolbar) {
+                <ng-container [ngTemplateOutlet]="projectedToolbar.templateRef" />
+            }
+
+            @if (showBackButton()) {
+                <p-button
+                    type="button"
+                    severity="secondary"
+                    [outlined]="true"
+                    [icon]="backIcon()"
+                    [label]="backLabel()"
+                    (onClick)="back.emit()" />
+            }
+        </ng-template>
+
+        <div
+            class="cho-detail-page__body"
+            [class.cho-detail-page__body--compact]="contentPadding() === 'compact'"
+            [class.cho-detail-page__body--comfortable]="contentPadding() === 'comfortable'"
+            [class.cho-detail-page__body--none]="contentPadding() === 'none'">
+            <ng-content />
+        </div>
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ChoCardComponent, selector: "cho-card", inputs: ["content", "contentPadding", "embedded", "filters", "header", "headerText", "headingLevel", "hideHeader", "showBody", "tabs", "tabsContent", "toolbar"], outputs: ["tabSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.24", ngImport: i0, type: ChoDetailPageComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'cho-detail-page',
+                    standalone: true,
+                    imports: [NgTemplateOutlet, ButtonModule, ChoCardComponent],
+                    template: `
+        <cho-card
+            [contentPadding]="'none'"
+            [headingLevel]="headingLevel()"
+            [headerText]="pageTitle()"
+            [showBody]="false"
+            [tabsContent]="tabs()?.templateRef"
+            [toolbar]="pageToolbar">
+        </cho-card>
+
+        <ng-template #pageToolbar>
+            @if (toolbar(); as projectedToolbar) {
+                <ng-container [ngTemplateOutlet]="projectedToolbar.templateRef" />
+            }
+
+            @if (showBackButton()) {
+                <p-button
+                    type="button"
+                    severity="secondary"
+                    [outlined]="true"
+                    [icon]="backIcon()"
+                    [label]="backLabel()"
+                    (onClick)="back.emit()" />
+            }
+        </ng-template>
+
+        <div
+            class="cho-detail-page__body"
+            [class.cho-detail-page__body--compact]="contentPadding() === 'compact'"
+            [class.cho-detail-page__body--comfortable]="contentPadding() === 'comfortable'"
+            [class.cho-detail-page__body--none]="contentPadding() === 'none'">
+            <ng-content />
+        </div>
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
 
 class ChoDetailsCardComponent {
     constructor() {
-        this.cardTitle = '';
-        this.toolbar = null;
+        this.cardTitle = input('');
+        this.contentPadding = input('comfortable');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.24", ngImport: i0, type: ChoDetailsCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.24", type: ChoDetailsCardComponent, isStandalone: true, selector: "cho-details-card", inputs: { cardTitle: "cardTitle" }, queries: [{ propertyName: "toolbar", first: true, predicate: ["toolbar"], descendants: true }], ngImport: i0, template: `
-        <div class="card mb-3">
-            <div class="card-header">
-                <h3 class="card-title">{{ cardTitle }}</h3>
-
-                <div class="card-toolbar">
-                    <ng-content #toolbar select="[toolbar]"></ng-content>
-                </div>
-            </div>
-
-            <div class="card-body">
-                <ng-content></ng-content>
-            </div>
-        </div>
-    `, isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.24", type: ChoDetailsCardComponent, isStandalone: true, selector: "cho-details-card", inputs: { cardTitle: { classPropertyName: "cardTitle", publicName: "cardTitle", isSignal: true, isRequired: false, transformFunction: null }, contentPadding: { classPropertyName: "contentPadding", publicName: "contentPadding", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+        <cho-card
+            [content]="content"
+            [contentPadding]="contentPadding()"
+            [headerText]="cardTitle()"
+            [toolbar]="toolbar">
+        </cho-card>
+
+        <ng-template #toolbar><ng-content select="[toolbar]" /></ng-template>
+        <ng-template #content><ng-content /></ng-template>
+    `, isInline: true, dependencies: [{ kind: "component", type: ChoCardComponent, selector: "cho-card", inputs: ["content", "contentPadding", "embedded", "filters", "header", "headerText", "headingLevel", "hideHeader", "showBody", "tabs", "tabsContent", "toolbar"], outputs: ["tabSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.24", ngImport: i0, type: ChoDetailsCardComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'cho-details-card',
                     standalone: true,
-                    template: `
-        <div class="card mb-3">
-            <div class="card-header">
-                <h3 class="card-title">{{ cardTitle }}</h3>
-
-                <div class="card-toolbar">
-                    <ng-content #toolbar select="[toolbar]"></ng-content>
-                </div>
-            </div>
-
-            <div class="card-body">
-                <ng-content></ng-content>
-            </div>
-        </div>
+                    imports: [ChoCardComponent],
+                    template: `
+        <cho-card
+            [content]="content"
+            [contentPadding]="contentPadding()"
+            [headerText]="cardTitle()"
+            [toolbar]="toolbar">
+        </cho-card>
+
+        <ng-template #toolbar><ng-content select="[toolbar]" /></ng-template>
+        <ng-template #content><ng-content /></ng-template>
     `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { cardTitle: [{
-                type: Input
-            }], toolbar: [{
-                type: ContentChild,
-                args: ['toolbar']
-            }] } });
+        }] });
 
 class ChoEmailInfoComponent {
-    constructor(sanitizer) {
-        this.sanitizer = sanitizer;
-        this.sanitizedEmailLink = this.email?.emailAddress
-            ? this.sanitizer.bypassSecurityTrustUrl(`mailto:${this.email.emailAddress}`)
-            : '';
+    constructor() {
+        this.email = input();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.24", ngImport: i0, type: ChoEmailInfoComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.24", type: ChoEmailInfoComponent, isStandalone: true, selector: "cho-email-info", inputs: { email: "email" }, ngImport: i0, template: `<ng-container *ngIf="email; else empty"
-            ><span *ngIf="email.emailTypeCode">{{ email.emailTypeCode[0] }}: </span>
-            <a [href]="sanitizedEmailLink">{{ email.emailAddress }}</a>
-            <small *ngIf="email.description"> ({{ email.description }})</small></ng-container
-        >
-        <ng-template #empty><span>--</span></ng-template>`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.24", ngImport: i0, type: ChoEmailInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.24", type: ChoEmailInfoComponent, isStandalone: true, selector: "cho-email-info", inputs: { email: { classPropertyName: "email", publicName: "email", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+        @if (email(); as currentEmail) {
+            <span class="cho-contact-info">
+                @if (currentEmail.emailTypeCode) {
+                    <span>{{ currentEmail.emailTypeCode[0] }}: </span>
+                }
+                <a [href]="'mailto:' + currentEmail.emailAddress">{{
+                    currentEmail.emailAddress
+                }}</a>
+                @if (currentEmail.description) {
+                    <small> ({{ currentEmail.description }})</small>
+                }
+            </span>
+        } @else {
+            <span>--</span>
+        }
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.24", ngImport: i0, type: ChoEmailInfoComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'cho-email-info',
-                    template: `<ng-container *ngIf="email; else empty"
-            ><span *ngIf="email.emailTypeCode">{{ email.emailTypeCode[0] }}: </span>
-            <a [href]="sanitizedEmailLink">{{ email.emailAddress }}</a>
-            <small *ngIf="email.description"> ({{ email.description }})</small></ng-container
-        >
-        <ng-template #empty><span>--</span></ng-template>`,
-                    imports: [NgIf],
+                    standalone: true,
+                    template: `
+        @if (email(); as currentEmail) {
+            <span class="cho-contact-info">
+                @if (currentEmail.emailTypeCode) {
+                    <span>{{ currentEmail.emailTypeCode[0] }}: </span>
+                }
+                <a [href]="'mailto:' + currentEmail.emailAddress">{{
+                    currentEmail.emailAddress
+                }}</a>
+                @if (currentEmail.description) {
+                    <small> ({{ currentEmail.description }})</small>
+                }
+            </span>
+        } @else {
+            <span>--</span>
+        }
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: () => [{ type: i1.DomSanitizer }], propDecorators: { email: [{
-                type: Input
-            }] } });
+        }] });
 
 class ChoPhoneInfoComponent {
+    constructor() {
+        this.phone = input();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.24", ngImport: i0, type: ChoPhoneInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.24", type: ChoPhoneInfoComponent, isStandalone: true, selector: "cho-phone-info", inputs: { phone: "phone" }, ngImport: i0, template: ` <ng-container *ngIf="phone; else empty"
-            ><span *ngIf="phone.phoneTypeCode">{{ phone.phoneTypeCode[0] }}: </span>
-            {{ phone.phoneNumber }}
-            <small *ngIf="phone.description"> ({{ phone.description }})</small></ng-container
-        >
-        <ng-template #empty><span>--</span></ng-template>`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.24", type: ChoPhoneInfoComponent, isStandalone: true, selector: "cho-phone-info", inputs: { phone: { classPropertyName: "phone", publicName: "phone", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+        @if (phone(); as currentPhone) {
+            <span class="cho-contact-info">
+                @if (currentPhone.phoneTypeCode) {
+                    <span>{{ currentPhone.phoneTypeCode[0] }}: </span>
+                }
+                {{ currentPhone.phoneNumber }}
+                @if (currentPhone.description) {
+                    <small> ({{ currentPhone.description }})</small>
+                }
+            </span>
+        } @else {
+            <span>--</span>
+        }
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.24", ngImport: i0, type: ChoPhoneInfoComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'cho-phone-info',
-                    template: ` <ng-container *ngIf="phone; else empty"
-            ><span *ngIf="phone.phoneTypeCode">{{ phone.phoneTypeCode[0] }}: </span>
-            {{ phone.phoneNumber }}
-            <small *ngIf="phone.description"> ({{ phone.description }})</small></ng-container
-        >
-        <ng-template #empty><span>--</span></ng-template>`,
-                    imports: [NgIf],
+                    standalone: true,
+                    template: `
+        @if (phone(); as currentPhone) {
+            <span class="cho-contact-info">
+                @if (currentPhone.phoneTypeCode) {
+                    <span>{{ currentPhone.phoneTypeCode[0] }}: </span>
+                }
+                {{ currentPhone.phoneNumber }}
+                @if (currentPhone.description) {
+                    <small> ({{ currentPhone.description }})</small>
+                }
+            </span>
+        } @else {
+            <span>--</span>
+        }
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { phone: [{
-                type: Input
-            }] } });
+        }] });
 
-class ChoRadioGroupComponent {
+class ChoPagerComponent {
     constructor() {
-        this.label = '';
-        this.options = [];
-        this.groupName = '';
-        this.defaultValue = null;
-        this.selectionChange = new EventEmitter();
-        this.selectedOption = this.defaultValue;
+        this.defaultPageSizeOptions = inject(CHO_PAGE_SIZE_OPTIONS);
+        this.navigationService = inject(ChoNavigationService);
+        this.instance = input.required();
+        this.alwaysShow = input(false);
+        this.currentPageReportTemplate = input('{totalRecords} result(s)');
+        this.pageSizeOptions = input();
+        this.syncQueryParams = input(true);
+        this.totalItems = input();
+        this.pagingChanged = output();
+        this.activePager = linkedSignal(() => this.instance());
+        this.first = computed(() => Math.max(this.activePager().currentPage - 1, 0) * this.rows());
+        this.pageSizeValues = computed(() => {
+            const configuredOptions = this.pageSizeOptions();
+            return [...(configuredOptions?.length ? configuredOptions : this.defaultPageSizeOptions)];
+        });
+        this.rows = computed(() => this.getPositiveInteger(this.activePager().itemsPerPage, CHO_DEFAULT_PAGE_SIZE));
+        this.totalRecords = computed(() => this.totalItems() ?? this.activePager().totalItems ?? 0);
     }
-    emitSelection() {
-        if (this.selectedOption !== undefined) {
-            this.selectionChange.emit(this.selectedOption);
+    onPageChanged(event) {
+        const rows = this.getPositiveInteger(event.rows, this.rows());
+        const requestedPage = typeof event.page === 'number'
+            ? event.page + 1
+            : Math.floor(Math.max(event.first ?? 0, 0) / rows) + 1;
+        const maximumPage = Math.max(Math.ceil(this.totalRecords() / rows), 1);
+        const nextPager = {
+            ...this.activePager(),
+            currentPage: Math.min(Math.max(requestedPage, 1), maximumPage),
+            itemsPerPage: rows,
+        };
+        this.activePager.set(nextPager);
+        if (this.syncQueryParams()) {
+            this.navigationService.setQueryParams({
+                p: nextPager.currentPage,
+                pp: nextPager.itemsPerPage,
+            });
         }
+        this.pagingChanged.emit(nextPager);
+    }
+    getPositiveInteger(value, fallback) {
+        const numberValue = Number(value);
+        return Number.isSafeInteger(numberValue) && numberValue > 0 ? numberValue : fallback;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.24", ngImport: i0, type: ChoPagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.24", type: ChoPagerComponent, isStandalone: true, selector: "cho-pager", inputs: { instance: { classPropertyName: "instance", publicName: "instance", isSignal: true, isRequired: true, transformFunction: null }, alwaysShow: { classPropertyName: "alwaysShow", publicName: "alwaysShow", isSignal: true, isRequired: false, transformFunction: null }, currentPageReportTemplate: { classPropertyName: "currentPageReportTemplate", publicName: "currentPageReportTemplate", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, syncQueryParams: { classPropertyName: "syncQueryParams", publicName: "syncQueryParams", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pagingChanged: "pagingChanged" }, ngImport: i0, template: `
+        <div class="cho-pager">
+            <p-paginator
+                [first]="first()"
+                [rows]="rows()"
+                [totalRecords]="totalRecords()"
+                [rowsPerPageOptions]="pageSizeValues()"
+                dropdownAppendTo="body"
+                [showCurrentPageReport]="true"
+                [currentPageReportTemplate]="currentPageReportTemplate()"
+                [showFirstLastIcon]="true"
+                [alwaysShow]="alwaysShow()"
+                (onPageChange)="onPageChanged($event)" />
+        </div>
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i1$1.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.24", ngImport: i0, type: ChoPagerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'cho-pager',
+                    standalone: true,
+                    imports: [PaginatorModule],
+                    template: `
+        <div class="cho-pager">
+            <p-paginator
+                [first]="first()"
+                [rows]="rows()"
+                [totalRecords]="totalRecords()"
+                [rowsPerPageOptions]="pageSizeValues()"
+                dropdownAppendTo="body"
+                [showCurrentPageReport]="true"
+                [currentPageReportTemplate]="currentPageReportTemplate()"
+                [showFirstLastIcon]="true"
+                [alwaysShow]="alwaysShow()"
+                (onPageChange)="onPageChanged($event)" />
+        </div>
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class ChoRadioGroupComponent {
+    constructor() {
+        this.defaultValue = input(null);
+        this.groupName = input('');
+        this.label = input('');
+        this.options = input([]);
+        this.selectionChange = output();
+        this.selectedOption = signal(null);
+        effect(() => this.selectedOption.set(this.defaultValue()), { allowSignalWrites: true });
+    }
+    select(value) {
+        this.selectedOption.set(value);
+        this.selectionChange.emit(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.24", ngImport: i0, type: ChoRadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.24", type: ChoRadioGroupComponent, isStandalone: true, selector: "cho-radio-group", inputs: { label: "label", options: "options", groupName: "groupName", defaultValue: "defaultValue" }, outputs: { selectionChange: "selectionChange" }, ngImport: i0, template: `
-        <div>
-            <label class="form-label">{{ label }}</label>
-            <div *ngFor="let option of options" class="form-check form-check-inline">
-                <input
-                    class="form-check-input"
-                    type="radio"
-                    [name]="groupName"
-                    [value]="option.value"
-                    [(ngModel)]="selectedOption"
-                    (change)="emitSelection()" />
-                {{ option.label }}
-            </div>
-        </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.24", type: ChoRadioGroupComponent, isStandalone: true, selector: "cho-radio-group", inputs: { defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, groupName: { classPropertyName: "groupName", publicName: "groupName", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, ngImport: i0, template: `
+        <fieldset class="cho-radio-group">
+            <legend class="cho-radio-group__label">{{ label() }}</legend>
+            @for (option of options(); track option.value) {
+                <label class="cho-radio-group__option">
+                    <input
+                        class="cho-radio-group__input"
+                        type="radio"
+                        [name]="groupName()"
+                        [value]="option.value"
+                        [ngModel]="selectedOption()"
+                        (ngModelChange)="select($event)" />
+                    <span>{{ option.label }}</span>
+                </label>
+            }
+        </fieldset>
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.24", ngImport: i0, type: ChoRadioGroupComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'cho-radio-group',
-                    template: `
-        <div>
-            <label class="form-label">{{ label }}</label>
-            <div *ngFor="let option of options" class="form-check form-check-inline">
-                <input
-                    class="form-check-input"
-                    type="radio"
-                    [name]="groupName"
-                    [value]="option.value"
-                    [(ngModel)]="selectedOption"
-                    (change)="emitSelection()" />
-                {{ option.label }}
-            </div>
-        </div>
+                    standalone: true,
+                    imports: [FormsModule],
+                    template: `
+        <fieldset class="cho-radio-group">
+            <legend class="cho-radio-group__label">{{ label() }}</legend>
+            @for (option of options(); track option.value) {
+                <label class="cho-radio-group__option">
+                    <input
+                        class="cho-radio-group__input"
+                        type="radio"
+                        [name]="groupName()"
+                        [value]="option.value"
+                        [ngModel]="selectedOption()"
+                        (ngModelChange)="select($event)" />
+                    <span>{{ option.label }}</span>
+                </label>
+            }
+        </fieldset>
     `,
-                    imports: [NgFor, FormsModule],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { label: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], groupName: [{
-                type: Input
-            }], defaultValue: [{
-                type: Input
-            }], selectionChange: [{
-                type: Output
-            }] } });
+        }], ctorParameters: () => [] });
 
 class ChoReviewStatusAlertComponent {
+    constructor() {
+        this.reviewedBy = input();
+        this.reviewedDateTime = input();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.24", ngImport: i0, type: ChoReviewStatusAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.24", type: ChoReviewStatusAlertComponent, isStandalone: true, selector: "cho-review-status-alert", inputs: { reviewedBy: "reviewedBy", reviewedDateTime: "reviewedDateTime" }, ngImport: i0, template: `
-        <div class="alert alert-info" *ngIf="reviewedDateTime">
-            Review completed by {{ reviewedBy }} on {{ reviewedDateTime | date: 'shortDate' }} at
-            {{ reviewedDateTime | date: 'shortTime' }}.
-        </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: DatePipe, name: "date" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.24", type: ChoReviewStatusAlertComponent, isStandalone: true, selector: "cho-review-status-alert", inputs: { reviewedBy: { classPropertyName: "reviewedBy", publicName: "reviewedBy", isSignal: true, isRequired: false, transformFunction: null }, reviewedDateTime: { classPropertyName: "reviewedDateTime", publicName: "reviewedDateTime", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+        @if (reviewedDateTime(); as completedAt) {
+            <div class="cho-review-status" role="status">
+                Review completed by {{ reviewedBy() }} on {{ completedAt | date: 'shortDate' }} at
+                {{ completedAt | date: 'shortTime' }}.
+            </div>
+        }
+    `, isInline: true, dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.24", ngImport: i0, type: ChoReviewStatusAlertComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'cho-review-status-alert',
-                    template: `
-        <div class="alert alert-info" *ngIf="reviewedDateTime">
-            Review completed by {{ reviewedBy }} on {{ reviewedDateTime | date: 'shortDate' }} at
-            {{ reviewedDateTime | date: 'shortTime' }}.
-        </div>
+                    standalone: true,
+                    imports: [DatePipe],
+                    template: `
+        @if (reviewedDateTime(); as completedAt) {
+            <div class="cho-review-status" role="status">
+                Review completed by {{ reviewedBy() }} on {{ completedAt | date: 'shortDate' }} at
+                {{ completedAt | date: 'shortTime' }}.
+            </div>
+        }
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class ChoSearchCardFiltersDirective {
+    constructor() {
+        this.templateRef = inject((TemplateRef));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.24", ngImport: i0, type: ChoSearchCardFiltersDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.24", type: ChoSearchCardFiltersDirective, isStandalone: true, selector: "ng-template[choSearchCardFilters]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.24", ngImport: i0, type: ChoSearchCardFiltersDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[choSearchCardFilters]', standalone: true }]
+        }] });
+class ChoSearchCardToolbarDirective {
+    constructor() {
+        this.templateRef = inject((TemplateRef));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.24", ngImport: i0, type: ChoSearchCardToolbarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.24", type: ChoSearchCardToolbarDirective, isStandalone: true, selector: "ng-template[choSearchCardToolbar]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.24", ngImport: i0, type: ChoSearchCardToolbarDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[choSearchCardToolbar]', standalone: true }]
+        }] });
+class ChoSearchCardTabsDirective {
+    constructor() {
+        this.templateRef = inject((TemplateRef));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.24", ngImport: i0, type: ChoSearchCardTabsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.24", type: ChoSearchCardTabsDirective, isStandalone: true, selector: "ng-template[choSearchCardTabs]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.24", ngImport: i0, type: ChoSearchCardTabsDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[choSearchCardTabs]', standalone: true }]
+        }] });
+class ChoSearchCardContentDirective {
+    constructor() {
+        this.templateRef = inject((TemplateRef));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.24", ngImport: i0, type: ChoSearchCardContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.24", type: ChoSearchCardContentDirective, isStandalone: true, selector: "ng-template[choSearchCardContent]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.24", ngImport: i0, type: ChoSearchCardContentDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[choSearchCardContent]', standalone: true }]
+        }] });
+class ChoSearchCardComponent {
+    constructor() {
+        this.cardTitle = input('');
+        this.contentPadding = input('comfortable');
+        this.embedded = input(false);
+        this.headingLevel = input(3);
+        this.hideHeader = input(false);
+        this.pager = input();
+        this.pageSizeOptions = input();
+        this.syncPagerQueryParams = input(true);
+        this.pagingChanged = output();
+        this.content = contentChild(ChoSearchCardContentDirective);
+        this.filters = contentChild(ChoSearchCardFiltersDirective);
+        this.tabs = contentChild(ChoSearchCardTabsDirective);
+        this.toolbar = contentChild(ChoSearchCardToolbarDirective);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.24", ngImport: i0, type: ChoSearchCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.24", type: ChoSearchCardComponent, isStandalone: true, selector: "cho-search-card", inputs: { cardTitle: { classPropertyName: "cardTitle", publicName: "cardTitle", isSignal: true, isRequired: false, transformFunction: null }, contentPadding: { classPropertyName: "contentPadding", publicName: "contentPadding", isSignal: true, isRequired: false, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null }, hideHeader: { classPropertyName: "hideHeader", publicName: "hideHeader", isSignal: true, isRequired: false, transformFunction: null }, pager: { classPropertyName: "pager", publicName: "pager", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, syncPagerQueryParams: { classPropertyName: "syncPagerQueryParams", publicName: "syncPagerQueryParams", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pagingChanged: "pagingChanged" }, queries: [{ propertyName: "content", first: true, predicate: ChoSearchCardContentDirective, descendants: true, isSignal: true }, { propertyName: "filters", first: true, predicate: ChoSearchCardFiltersDirective, descendants: true, isSignal: true }, { propertyName: "tabs", first: true, predicate: ChoSearchCardTabsDirective, descendants: true, isSignal: true }, { propertyName: "toolbar", first: true, predicate: ChoSearchCardToolbarDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
+        <cho-card
+            [content]="cardContent"
+            [contentPadding]="'none'"
+            [embedded]="embedded()"
+            [filters]="filters()?.templateRef"
+            [headingLevel]="headingLevel()"
+            [headerText]="cardTitle()"
+            [hideHeader]="embedded() || hideHeader()"
+            [tabsContent]="embedded() ? undefined : tabs()?.templateRef"
+            [toolbar]="toolbar()?.templateRef">
+        </cho-card>
+
+        <ng-template #cardContent>
+            <div
+                class="cho-search-card__content"
+                [class.cho-search-card__content--compact]="contentPadding() === 'compact'"
+                [class.cho-search-card__content--comfortable]="contentPadding() === 'comfortable'"
+                [class.cho-search-card__content--none]="contentPadding() === 'none'">
+                @if (content(); as projectedContent) {
+                    <ng-container [ngTemplateOutlet]="projectedContent.templateRef" />
+                } @else {
+                    <ng-content />
+                }
+
+                @if (pager(); as currentPager) {
+                    <cho-pager
+                        [instance]="currentPager"
+                        [pageSizeOptions]="pageSizeOptions()"
+                        [syncQueryParams]="syncPagerQueryParams()"
+                        (pagingChanged)="pagingChanged.emit($event)" />
+                }
+            </div>
+        </ng-template>
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ChoCardComponent, selector: "cho-card", inputs: ["content", "contentPadding", "embedded", "filters", "header", "headerText", "headingLevel", "hideHeader", "showBody", "tabs", "tabsContent", "toolbar"], outputs: ["tabSelect"] }, { kind: "component", type: ChoPagerComponent, selector: "cho-pager", inputs: ["instance", "alwaysShow", "currentPageReportTemplate", "pageSizeOptions", "syncQueryParams", "totalItems"], outputs: ["pagingChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.24", ngImport: i0, type: ChoSearchCardComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'cho-search-card',
+                    standalone: true,
+                    imports: [NgTemplateOutlet, ChoCardComponent, ChoPagerComponent],
+                    template: `
+        <cho-card
+            [content]="cardContent"
+            [contentPadding]="'none'"
+            [embedded]="embedded()"
+            [filters]="filters()?.templateRef"
+            [headingLevel]="headingLevel()"
+            [headerText]="cardTitle()"
+            [hideHeader]="embedded() || hideHeader()"
+            [tabsContent]="embedded() ? undefined : tabs()?.templateRef"
+            [toolbar]="toolbar()?.templateRef">
+        </cho-card>
+
+        <ng-template #cardContent>
+            <div
+                class="cho-search-card__content"
+                [class.cho-search-card__content--compact]="contentPadding() === 'compact'"
+                [class.cho-search-card__content--comfortable]="contentPadding() === 'comfortable'"
+                [class.cho-search-card__content--none]="contentPadding() === 'none'">
+                @if (content(); as projectedContent) {
+                    <ng-container [ngTemplateOutlet]="projectedContent.templateRef" />
+                } @else {
+                    <ng-content />
+                }
+
+                @if (pager(); as currentPager) {
+                    <cho-pager
+                        [instance]="currentPager"
+                        [pageSizeOptions]="pageSizeOptions()"
+                        [syncQueryParams]="syncPagerQueryParams()"
+                        (pagingChanged)="pagingChanged.emit($event)" />
+                }
+            </div>
+        </ng-template>
     `,
-                    imports: [NgIf, DatePipe],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { reviewedBy: [{
-                type: Input
-            }], reviewedDateTime: [{
-                type: Input
-            }] } });
+        }] });
 
 /*
  * Public API Surface of ngx-cho-components
@@ -498,5 +965,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.24", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ChoAddressInfoComponent, ChoCardComponent, ChoCardFiltersComponent, ChoCardHeaderComponent, ChoCardTabsComponent, ChoCardToolbarComponent, ChoDetailsCardComponent, ChoEmailInfoComponent, ChoPhoneInfoComponent, ChoRadioGroupComponent, ChoReviewStatusAlertComponent };
+export { ChoAddressInfoComponent, ChoCardComponent, ChoDetailPageComponent, ChoDetailPageTabsDirective, ChoDetailPageToolbarDirective, ChoDetailsCardComponent, ChoEmailInfoComponent, ChoPagerComponent, ChoPhoneInfoComponent, ChoRadioGroupComponent, ChoReviewStatusAlertComponent, ChoSearchCardComponent, ChoSearchCardContentDirective, ChoSearchCardFiltersDirective, ChoSearchCardTabsDirective, ChoSearchCardToolbarDirective };
 //# sourceMappingURL=ngx-cho-components.mjs.map