codexly-ui 0.10.98 → 0.10.100

package/fesm2022/codexly-ui.mjs

@@ -2148,9 +2148,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
 
 const STEPPER_SIZE_MAP = {
-    sm: { circle: 'w-7 h-7', iconSize: 'xs', label: 'text-xs', desc: 'text-xs', connector: 'h-0.5' },
-    md: { circle: 'w-9 h-9', iconSize: 'sm', label: 'text-sm', desc: 'text-xs', connector: 'h-0.5' },
-    lg: { circle: 'w-11 h-11', iconSize: 'md', label: 'text-sm', desc: 'text-xs', connector: 'h-1' },
+    sm: { circle: 'w-7 h-7', iconSize: 'xs', label: 'text-xs', desc: 'text-xs', connector: 'h-0.5', connectorOffsetH: 'mt-3.5' },
+    md: { circle: 'w-9 h-9', iconSize: 'sm', label: 'text-sm', desc: 'text-xs', connector: 'h-0.5', connectorOffsetH: 'mt-4.5' },
+    lg: { circle: 'w-11 h-11', iconSize: 'md', label: 'text-sm', desc: 'text-xs', connector: 'h-1', connectorOffsetH: 'mt-[1.375rem]' },
 };
 
 class ClxStepperComponent {
@@ -2169,24 +2169,25 @@ class ClxStepperComponent {
             : 'flex flex-col w-full';
     }, ...(ngDevMode ? [{ debugName: "_hostClass" }] : /* istanbul ignore next */ []));
     // ── Step wrapper ──────────────────────────────────────────────────────────────
+    // Horizontal: circle-column first (fixed to its own content width), connector fills the
+    // rest of the step's flex-1 share — so the label (inside the circle column) always centers
+    // under its own circle instead of under circle+connector combined.
     _stepWrapClass = computed(() => {
         const horiz = this.orientation() === 'horizontal';
         return horiz
-            ? 'flex flex-col items-center flex-1 min-w-0'
-            : 'flex flex-row gap-3';
+            ? 'flex flex-row items-start flex-1 min-w-0'
+            : 'flex flex-row';
     }, ...(ngDevMode ? [{ debugName: "_stepWrapClass" }] : /* istanbul ignore next */ []));
-    // ── Axis (circle + connector) ─────────────────────────────────────────────────
-    _axisClass = computed(() => {
-        const horiz = this.orientation() === 'horizontal';
-        return horiz
-            ? 'flex flex-row items-center w-full'
-            : 'flex flex-col items-center shrink-0';
-    }, ...(ngDevMode ? [{ debugName: "_axisClass" }] : /* istanbul ignore next */ []));
+    // ── Circle column ──────────────────────────────────────────────────────────────
+    // Horizontal: circle + label stacked, so the label centers directly under the circle
+    // regardless of the connector's flex-1 width next to it.
+    // Vertical: circle + connector stacked, with the label as a separate sibling beside it.
+    _circleColClass = computed(() => 'flex flex-col items-center shrink-0', ...(ngDevMode ? [{ debugName: "_circleColClass" }] : /* istanbul ignore next */ []));
     // ── Label wrapper ─────────────────────────────────────────────────────────────
     _labelWrapClass = computed(() => {
         const horiz = this.orientation() === 'horizontal';
         return horiz
-            ? 'flex flex-col items-center text-center mt-2 px-1'
+            ? 'flex flex-col items-center text-center mt-2 px-1 max-w-[8rem]'
             : 'flex flex-col justify-center pb-6 min-w-0';
     }, ...(ngDevMode ? [{ debugName: "_labelWrapClass" }] : /* istanbul ignore next */ []));
     // ── Circle ────────────────────────────────────────────────────────────────────
@@ -2205,10 +2206,10 @@ class ClxStepperComponent {
     _connectorClass(status) {
         const t = resolveColor(this._color());
         const horiz = this.orientation() === 'horizontal';
-        const size = this._tokens().connector;
+        const tokens = this._tokens();
         const filled = status === 'completed' ? `${t.bg}` : 'bg-clx-border';
         return horiz
-            ? `flex-1 ${size} ${filled} transition-colors duration-300`
+            ? `flex-1 ${tokens.connector} ${tokens.connectorOffsetH} ${filled} transition-colors duration-300`
             : `w-0.5 flex-1 my-1 min-h-[1.5rem] ${filled} transition-colors duration-300`;
     }
     // ── Label ─────────────────────────────────────────────────────────────────────
@@ -2227,104 +2228,134 @@ class ClxStepperComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxStepperComponent, isStandalone: true, selector: "clx-stepper", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_hostClass()" } }, ngImport: i0, template: `
     @for (step of steps(); track $index; let last = $last; let i = $index) {
 
-      <!-- Step -->
+      <!-- Horizontal: circle+label form one fixed-width column, connector is a separate flex-1
+           track next to it — so the label centers under its own circle, not under circle+connector.
+           Vertical: circle+connector form one column, label sits beside it. -->
       <div [class]="_stepWrapClass()">
 
-        <!-- Circle + connector (horizontal: connector after, vertical: connector below) -->
-        <div [class]="_axisClass()">
-
-          <!-- Circle -->
-          <div [class]="_circleClass(step.status)">
-            @switch (step.status) {
-              @case ('completed') {
-                <span clx-icon name="check" [size]="_tokens().iconSize"></span>
-              }
-              @case ('error') {
-                <span clx-icon name="close" [size]="_tokens().iconSize"></span>
-              }
-              @default {
-                @if (step.icon) {
-                  <span clx-icon [name]="step.icon" [size]="_tokens().iconSize"></span>
-                } @else {
-                  <span [class]="'font-bold leading-none select-none ' + _tokens().label">{{ i + 1 }}</span>
-                }
+        @if (orientation() === 'horizontal') {
+          <div [class]="_circleColClass()">
+            <div [class]="_circleClass(step.status)">
+              <ng-container [ngTemplateOutlet]="circleContent" [ngTemplateOutletContext]="{ step, i }" />
+            </div>
+            <div [class]="_labelWrapClass()">
+              <span [class]="_labelClass(step.status)">{{ step.label }}</span>
+              @if (step.description) {
+                <span [class]="'text-clx-text-subtle ' + _tokens().desc">{{ step.description }}</span>
               }
-            }
+            </div>
           </div>
-
-          <!-- Connector -->
           @if (!last) {
             <div [class]="_connectorClass(step.status)"></div>
           }
-
-        </div>
-
-        <!-- Label + description -->
-        <div [class]="_labelWrapClass()">
-          <span [class]="_labelClass(step.status)">{{ step.label }}</span>
-          @if (step.description) {
-            <span [class]="'text-clx-text-subtle ' + _tokens().desc">{{ step.description }}</span>
-          }
-        </div>
+        } @else {
+          <div [class]="_circleColClass()">
+            <div [class]="_circleClass(step.status)">
+              <ng-container [ngTemplateOutlet]="circleContent" [ngTemplateOutletContext]="{ step, i }" />
+            </div>
+            @if (!last) {
+              <div [class]="_connectorClass(step.status)"></div>
+            }
+          </div>
+          <div [class]="_labelWrapClass()">
+            <span [class]="_labelClass(step.status)">{{ step.label }}</span>
+            @if (step.description) {
+              <span [class]="'text-clx-text-subtle ' + _tokens().desc">{{ step.description }}</span>
+            }
+          </div>
+        }
 
       </div>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+
+    <ng-template #circleContent let-step="step" let-i="i">
+      @switch (step.status) {
+        @case ('completed') {
+          <span clx-icon name="check" [size]="_tokens().iconSize"></span>
+        }
+        @case ('error') {
+          <span clx-icon name="close" [size]="_tokens().iconSize"></span>
+        }
+        @default {
+          @if (step.icon) {
+            <span clx-icon [name]="step.icon" [size]="_tokens().iconSize"></span>
+          } @else {
+            <span [class]="'font-bold leading-none select-none ' + _tokens().label">{{ i + 1 }}</span>
+          }
+        }
+      }
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxStepperComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'clx-stepper',
                     standalone: true,
-                    imports: [ClxIconComponent],
+                    imports: [ClxIconComponent, NgTemplateOutlet],
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { '[class]': '_hostClass()' },
                     template: `
     @for (step of steps(); track $index; let last = $last; let i = $index) {
 
-      <!-- Step -->
+      <!-- Horizontal: circle+label form one fixed-width column, connector is a separate flex-1
+           track next to it — so the label centers under its own circle, not under circle+connector.
+           Vertical: circle+connector form one column, label sits beside it. -->
       <div [class]="_stepWrapClass()">
 
-        <!-- Circle + connector (horizontal: connector after, vertical: connector below) -->
-        <div [class]="_axisClass()">
-
-          <!-- Circle -->
-          <div [class]="_circleClass(step.status)">
-            @switch (step.status) {
-              @case ('completed') {
-                <span clx-icon name="check" [size]="_tokens().iconSize"></span>
-              }
-              @case ('error') {
-                <span clx-icon name="close" [size]="_tokens().iconSize"></span>
-              }
-              @default {
-                @if (step.icon) {
-                  <span clx-icon [name]="step.icon" [size]="_tokens().iconSize"></span>
-                } @else {
-                  <span [class]="'font-bold leading-none select-none ' + _tokens().label">{{ i + 1 }}</span>
-                }
+        @if (orientation() === 'horizontal') {
+          <div [class]="_circleColClass()">
+            <div [class]="_circleClass(step.status)">
+              <ng-container [ngTemplateOutlet]="circleContent" [ngTemplateOutletContext]="{ step, i }" />
+            </div>
+            <div [class]="_labelWrapClass()">
+              <span [class]="_labelClass(step.status)">{{ step.label }}</span>
+              @if (step.description) {
+                <span [class]="'text-clx-text-subtle ' + _tokens().desc">{{ step.description }}</span>
               }
-            }
+            </div>
           </div>
-
-          <!-- Connector -->
           @if (!last) {
             <div [class]="_connectorClass(step.status)"></div>
           }
-
-        </div>
-
-        <!-- Label + description -->
-        <div [class]="_labelWrapClass()">
-          <span [class]="_labelClass(step.status)">{{ step.label }}</span>
-          @if (step.description) {
-            <span [class]="'text-clx-text-subtle ' + _tokens().desc">{{ step.description }}</span>
-          }
-        </div>
+        } @else {
+          <div [class]="_circleColClass()">
+            <div [class]="_circleClass(step.status)">
+              <ng-container [ngTemplateOutlet]="circleContent" [ngTemplateOutletContext]="{ step, i }" />
+            </div>
+            @if (!last) {
+              <div [class]="_connectorClass(step.status)"></div>
+            }
+          </div>
+          <div [class]="_labelWrapClass()">
+            <span [class]="_labelClass(step.status)">{{ step.label }}</span>
+            @if (step.description) {
+              <span [class]="'text-clx-text-subtle ' + _tokens().desc">{{ step.description }}</span>
+            }
+          </div>
+        }
 
       </div>
     }
+
+    <ng-template #circleContent let-step="step" let-i="i">
+      @switch (step.status) {
+        @case ('completed') {
+          <span clx-icon name="check" [size]="_tokens().iconSize"></span>
+        }
+        @case ('error') {
+          <span clx-icon name="close" [size]="_tokens().iconSize"></span>
+        }
+        @default {
+          @if (step.icon) {
+            <span clx-icon [name]="step.icon" [size]="_tokens().iconSize"></span>
+          } @else {
+            <span [class]="'font-bold leading-none select-none ' + _tokens().label">{{ i + 1 }}</span>
+          }
+        }
+      }
+    </ng-template>
   `,
                 }]
         }], propDecorators: { steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
@@ -10160,17 +10191,29 @@ 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-white text-sm font-semibold truncate leading-tight">{{ name() }}</p>
+          }
           @if (description()) {
             <p class="text-slate-400 text-xs truncate leading-tight">{{ description() }}</p>
           }
@@ -10189,7 +10232,11 @@ 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-white text-sm font-semibold truncate leading-tight">{{ name() }}</p>
+          }
           @if (description()) {
             <p class="text-slate-400 text-xs truncate leading-tight">{{ description() }}</p>
           }
@@ -10201,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';