codexly-ui 0.6.16 → 0.6.17

package/fesm2022/codexly-ui.mjs

@@ -564,6 +564,19 @@ class ClxThemeService {
             weight: override?.weight ?? defaultWeight,
         };
     }
+    /** Resolved style for ClxPageHeaderComponent's title — falls back to the default
+     *  text-clx-text-label color (no override) / 2xl / emphasis */
+    pageHeaderTitleStyle = computed(() => this._resolvePageHeaderZoneStyle(this._config().pageHeaderTitle, '2xl', 'emphasis'), ...(ngDevMode ? [{ debugName: "pageHeaderTitleStyle" }] : /* istanbul ignore next */ []));
+    /** Resolved style for ClxPageHeaderComponent's subtitle — falls back to the default
+     *  text-clx-text-muted color (no override) / sm / label */
+    pageHeaderSubtitleStyle = computed(() => this._resolvePageHeaderZoneStyle(this._config().pageHeaderSubtitle, 'sm', 'label'), ...(ngDevMode ? [{ debugName: "pageHeaderSubtitleStyle" }] : /* istanbul ignore next */ []));
+    _resolvePageHeaderZoneStyle(override, defaultSize, defaultWeight) {
+        return {
+            color: override?.color,
+            size: override?.size ?? defaultSize,
+            weight: override?.weight ?? defaultWeight,
+        };
+    }
     constructor() {
         effect(() => {
             if (!this._isBrowser)
@@ -10012,6 +10025,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
             args: [{ selector: '[clxPageHeaderTitle]', standalone: true }]
         }] });
 
+const TEXT_SIZE_CLASS = {
+    sm: 'text-sm',
+    base: 'text-base',
+    lg: 'text-lg',
+    xl: 'text-xl',
+    '2xl': 'text-2xl',
+    '3xl': 'text-3xl',
+};
+const WEIGHT_CLASS = {
+    label: 'font-(--clx-font-weight-label)',
+    emphasis: 'font-(--clx-font-weight-emphasis)',
+};
 /**
  * Standard page title block: an optional back button, title + optional subtitle on the
  * left, a free-content slot (button, select, badge...) on the right. Replaces the
@@ -10031,6 +10056,16 @@ 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(() => {
+        const s = this._themeSvc.pageHeaderTitleStyle();
+        const colorCls = s.color ? resolveColor(s.color).textSubtle : 'text-clx-text-label';
+        return `${TEXT_SIZE_CLASS[s.size]} ${WEIGHT_CLASS[s.weight]} ${colorCls} truncate`;
+    }, ...(ngDevMode ? [{ debugName: "_titleClass" }] : /* istanbul ignore next */ []));
+    _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]} ${WEIGHT_CLASS[s.weight]} ${colorCls} mt-0.5`;
+    }, ...(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: `
     @if (showBack()) {
@@ -10045,9 +10080,9 @@ class ClxPageHeaderComponent {
         </div>
       } @else {
         <div class="min-w-0">
-          <h1 class="text-2xl font-(--clx-font-weight-emphasis) text-clx-text-label truncate">{{ title() }}</h1>
+          <h1 [class]="_titleClass()">{{ title() }}</h1>
           @if (subtitle()) {
-            <p class="text-sm text-clx-text-muted mt-0.5">{{ subtitle() }}</p>
+            <p [class]="_subtitleClass()">{{ subtitle() }}</p>
           }
         </div>
       }
@@ -10077,9 +10112,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         </div>
       } @else {
         <div class="min-w-0">
-          <h1 class="text-2xl font-(--clx-font-weight-emphasis) text-clx-text-label truncate">{{ title() }}</h1>
+          <h1 [class]="_titleClass()">{{ title() }}</h1>
           @if (subtitle()) {
-            <p class="text-sm text-clx-text-muted mt-0.5">{{ subtitle() }}</p>
+            <p [class]="_subtitleClass()">{{ subtitle() }}</p>
           }
         </div>
       }