codexly-ui 0.10.99 → 0.10.101

package/fesm2022/codexly-ui.mjs

@@ -10191,19 +10191,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         }], ctorParameters: () => [], propDecorators: { activeColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeColor", required: false }] }], collapsedChange: [{ type: i0.Output, args: ["collapsedChange"] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }] } });
 
 class ClxBrandComponent {
+    _sanitizer = inject(DomSanitizer);
     logo = input.required(...(ngDevMode ? [{ debugName: "logo" }] : /* istanbul ignore next */ []));
     name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /** Optional rich-text brand name (e.g. per-word colored spans) — takes over from the plain
+     *  `name` text when set, which still backs the logo's `alt` and the fallback rendering. Caller
+     *  is responsible for only ever passing admin-authored content here, never unescaped user input —
+     *  this component trusts it as-is (bypassSecurityTrustHtml), same as ClxSocialIconComponent's
+     *  internal SVG markup. */
+    nameHtml = input(undefined, ...(ngDevMode ? [{ debugName: "nameHtml" }] : /* istanbul ignore next */ []));
     description = input('', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
     collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    _safeNameHtml = computed(() => this._sanitizer.bypassSecurityTrustHtml(this.nameHtml() ?? ''), ...(ngDevMode ? [{ debugName: "_safeNameHtml" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxBrandComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxBrandComponent, isStandalone: true, selector: "clx-brand", inputs: { logo: { classPropertyName: "logo", publicName: "logo", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxBrandComponent, isStandalone: true, selector: "clx-brand", inputs: { logo: { classPropertyName: "logo", publicName: "logo", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, nameHtml: { classPropertyName: "nameHtml", publicName: "nameHtml", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
     <div [class]="collapsed() ? 'flex items-center justify-center py-4' : 'flex items-center gap-3 px-4 py-4'">
       <img [src]="logo()" [alt]="name()" class="h-8 w-8 shrink-0 object-contain" />
       @if (!collapsed()) {
         <div class="min-w-0 overflow-hidden">
-          <p class="text-white text-sm font-semibold truncate leading-tight">{{ name() }}</p>
+          @if (nameHtml()) {
+            <p class="text-sm font-semibold truncate leading-tight" [innerHTML]="_safeNameHtml()"></p>
+          } @else {
+            <p class="text-clx-text-label text-sm font-semibold truncate leading-tight">{{ name() }}</p>
+          }
           @if (description()) {
-            <p class="text-slate-400 text-xs truncate leading-tight">{{ description() }}</p>
+            <p class="text-clx-text-muted text-xs truncate leading-tight">{{ description() }}</p>
           }
         </div>
       }
@@ -10220,9 +10232,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
       <img [src]="logo()" [alt]="name()" class="h-8 w-8 shrink-0 object-contain" />
       @if (!collapsed()) {
         <div class="min-w-0 overflow-hidden">
-          <p class="text-white text-sm font-semibold truncate leading-tight">{{ name() }}</p>
+          @if (nameHtml()) {
+            <p class="text-sm font-semibold truncate leading-tight" [innerHTML]="_safeNameHtml()"></p>
+          } @else {
+            <p class="text-clx-text-label text-sm font-semibold truncate leading-tight">{{ name() }}</p>
+          }
           @if (description()) {
-            <p class="text-slate-400 text-xs truncate leading-tight">{{ description() }}</p>
+            <p class="text-clx-text-muted text-xs truncate leading-tight">{{ description() }}</p>
           }
         </div>
       }
@@ -10232,7 +10248,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'block' },
                 }]
-        }], propDecorators: { logo: [{ type: i0.Input, args: [{ isSignal: true, alias: "logo", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }] } });
+        }], propDecorators: { logo: [{ type: i0.Input, args: [{ isSignal: true, alias: "logo", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], nameHtml: [{ type: i0.Input, args: [{ isSignal: true, alias: "nameHtml", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }] } });
 
 // ── Item geometry ──────────────────────────────────────────────────────────────
 const NAV_ITEM_BASE = 'flex items-center gap-3 cursor-pointer select-none';