codexly-ui 0.10.98 → 0.10.99

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 }] }] } });