codexly-ui 0.8.0 → 0.8.2

package/fesm2022/codexly-ui.mjs

@@ -10055,18 +10055,22 @@ class ClxPageHeaderComponent {
     _titleSlot = contentChild(ClxPageHeaderTitleDirective, ...(ngDevMode ? [{ debugName: "_titleSlot" }] : /* istanbul ignore next */ []));
     _hasCustomTitle = computed(() => !!this._titleSlot(), ...(ngDevMode ? [{ debugName: "_hasCustomTitle" }] : /* istanbul ignore next */ []));
     _color = computed(() => this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
-    _titleClass = computed(() => {
+    /** Title classes resolved from the theme — also usable by consumers projecting a custom
+     *  [clxPageHeaderTitle] block, via a template reference: `<clx-page-header #ph="clxPageHeader">`
+     *  then `[class]="ph.titleClass()"` on their own <h1>. */
+    titleClass = computed(() => {
         const s = this._themeSvc.pageHeaderTitleStyle();
         const colorCls = s.color ? resolveColor(s.color).textSubtle : 'text-clx-text-label';
         return `${TEXT_SIZE_CLASS[s.size]} font-[${s.weight}] ${colorCls} truncate`;
-    }, ...(ngDevMode ? [{ debugName: "_titleClass" }] : /* istanbul ignore next */ []));
-    _subtitleClass = computed(() => {
+    }, ...(ngDevMode ? [{ debugName: "titleClass" }] : /* istanbul ignore next */ []));
+    /** Subtitle classes resolved from the theme — same usage as titleClass. */
+    subtitleClass = computed(() => {
         const s = this._themeSvc.pageHeaderSubtitleStyle();
         const colorCls = s.color ? resolveColor(s.color).textSubtle : 'text-clx-text-muted';
         return `${TEXT_SIZE_CLASS[s.size]} font-[${s.weight}] ${colorCls} mt-0.5`;
-    }, ...(ngDevMode ? [{ debugName: "_subtitleClass" }] : /* istanbul ignore next */ []));
+    }, ...(ngDevMode ? [{ debugName: "subtitleClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxPageHeaderComponent, isStandalone: true, selector: "clx-page-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, showBack: { classPropertyName: "showBack", publicName: "showBack", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { back: "back" }, host: { classAttribute: "flex items-center gap-3 flex-wrap" }, queries: [{ propertyName: "_titleSlot", first: true, predicate: ClxPageHeaderTitleDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxPageHeaderComponent, isStandalone: true, selector: "clx-page-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, showBack: { classPropertyName: "showBack", publicName: "showBack", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { back: "back" }, host: { classAttribute: "flex items-center gap-3 flex-wrap" }, queries: [{ propertyName: "_titleSlot", first: true, predicate: ClxPageHeaderTitleDirective, descendants: true, isSignal: true }], exportAs: ["clxPageHeader"], ngImport: i0, template: `
     @if (showBack()) {
       <button clx-button variant="ghost" [color]="_color()" icon="arrow_back" [iconOnly]="true"
         (click)="back.emit()"></button>
@@ -10079,9 +10083,9 @@ class ClxPageHeaderComponent {
         </div>
       } @else {
         <div class="min-w-0">
-          <h1 [class]="_titleClass()">{{ title() }}</h1>
+          <h1 [class]="titleClass()">{{ title() }}</h1>
           @if (subtitle()) {
-            <p [class]="_subtitleClass()">{{ subtitle() }}</p>
+            <p [class]="subtitleClass()">{{ subtitle() }}</p>
           }
         </div>
       }
@@ -10094,6 +10098,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
             args: [{
                     selector: 'clx-page-header',
                     standalone: true,
+                    exportAs: 'clxPageHeader',
                     imports: [ClxButtonComponent],
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -10111,9 +10116,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         </div>
       } @else {
         <div class="min-w-0">
-          <h1 [class]="_titleClass()">{{ title() }}</h1>
+          <h1 [class]="titleClass()">{{ title() }}</h1>
           @if (subtitle()) {
-            <p [class]="_subtitleClass()">{{ subtitle() }}</p>
+            <p [class]="subtitleClass()">{{ subtitle() }}</p>
           }
         </div>
       }
@@ -13149,7 +13154,7 @@ class ClxTableComponent {
                     @if (_getColumnDef(col.key)?.headerCell()?.templateRef; as tpl) {
                       <ng-container [ngTemplateOutlet]="tpl"></ng-container>
                     } @else {
-                      <span>{{ col.header || col.key }}</span>
+                      <span>{{ col.header ?? col.key }}</span>
                     }
                     @if (col.sortable) {
                       <span class="opacity-50">
@@ -13296,7 +13301,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     @if (_getColumnDef(col.key)?.headerCell()?.templateRef; as tpl) {
                       <ng-container [ngTemplateOutlet]="tpl"></ng-container>
                     } @else {
-                      <span>{{ col.header || col.key }}</span>
+                      <span>{{ col.header ?? col.key }}</span>
                     }
                     @if (col.sortable) {
                       <span class="opacity-50">