codexly-ui 0.6.16 → 0.6.18

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)
@@ -9869,15 +9882,12 @@ class ClxMenuItemComponent {
     _iconCls = computed(() => resolveColor(this._resolved().color).textSubtle, ...(ngDevMode ? [{ debugName: "_iconCls" }] : /* istanbul ignore next */ []));
     _idleCls = computed(() => {
         const hover = resolveColor(this._resolved().color).hoverBgMuted;
-        return `${NAV_ITEM_BASE} ${resolveNavZoneIdle(this._resolved())} ${this._geom()} ${hover}`;
+        return `${NAV_ITEM_BASE} ${resolveNavZoneIdle(this._resolved())} ${this._geom()} ${hover} rounded-lg`;
     }, ...(ngDevMode ? [{ debugName: "_idleCls" }] : /* istanbul ignore next */ []));
     _activeCls = computed(() => {
         const t = resolveColor(this._resolved().color);
         const typography = resolveNavZoneActive(this._resolved());
-        if (this.collapsed()) {
-            return `${NAV_ITEM_BASE} ${typography} ${this._geom()} ${t.textSubtle}`;
-        }
-        return `${NAV_ITEM_BASE} ${typography} ${this._geom()} ${t.textSubtle} border-l-2 ${t.borderLight} !pl-[22px] ${t.hoverBgMuted}`;
+        return `${NAV_ITEM_BASE} ${typography} ${this._geom()} ${t.textSubtle} ${t.bgSubtle} rounded-lg`;
     }, ...(ngDevMode ? [{ debugName: "_activeCls" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxMenuItemComponent, isStandalone: true, selector: "clx-menu-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, nested: { classPropertyName: "nested", publicName: "nested", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActiveOptions: { classPropertyName: "routerLinkActiveOptions", publicName: "routerLinkActiveOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, host: { classAttribute: "block" }, ngImport: i0, template: `
@@ -10012,6 +10022,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 +10053,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 +10077,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 +10109,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>
       }