@akcelik/strct 1.13.0 → 1.14.0

package/fesm2022/akcelik-strct.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, DOCUMENT, signal, computed, Injectable, input, isDevMode, ViewEncapsulation, ChangeDetectionStrategy, Component, ElementRef, NgZone, afterNextRender, Directive, model, output, booleanAttribute, HostListener, contentChildren, effect, ApplicationRef, EnvironmentInjector, createComponent, forwardRef, DestroyRef, contentChild, viewChild, viewChildren, untracked, TemplateRef, Renderer2, Pipe } from '@angular/core';
+import { inject, DOCUMENT, signal, computed, Injectable, input, isDevMode, ViewEncapsulation, ChangeDetectionStrategy, Component, ElementRef, NgZone, afterNextRender, Directive, model, output, booleanAttribute, HostListener, contentChildren, effect, ApplicationRef, EnvironmentInjector, createComponent, forwardRef, DestroyRef, contentChild, untracked, viewChild, viewChildren, TemplateRef, Renderer2, Pipe } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { NgTemplateOutlet, DOCUMENT as DOCUMENT$1 } from '@angular/common';
 import { RouterLink, RouterLinkActive } from '@angular/router';
@@ -3744,10 +3744,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
   `, host: { class: 'strct-submenu-host' }, styles: [".strct-submenu{position:relative}.strct-submenu__trigger{display:flex;align-items:center;gap:8px;padding:7px 8px 7px 10px;border-radius:5px;cursor:default;font-size:13px;color:var(--t1)}.strct-submenu__trigger:hover{background:var(--bg-3)}.strct-submenu__trigger:focus-visible{outline:none;background:var(--bg-3)}.strct-submenu__icon{color:var(--t2);flex-shrink:0}.strct-submenu__icon-spacer{width:14px;flex-shrink:0}.strct-submenu__label{flex:1;display:inline-flex;align-items:center;gap:8px}.strct-submenu__arrow{color:var(--t3)}.strct-submenu__panel{position:absolute;top:-5px;left:100%;z-index:1;min-width:170px;margin-inline-start:2px;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh);animation:strct-submenu-in .1s ease}.strct-submenu__panel--flip{left:auto;right:100%;margin-inline-start:0;margin-inline-end:2px}@keyframes strct-submenu-in{0%{opacity:0;transform:translate(-4px)}}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }] } });
 
-/** A single wizard step. `label` names it in the step header. */
+/** A single wizard step. `label` names it in the step header / rail. */
 class StrctStep {
     /** Label text. */
     label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Rail sublabel (vertical mode; shown while the step is active). */
+    description = input('', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
     /** When false, the wizard's Next / Finish is disabled on this step. */
     canAdvance = input(true, { ...(ngDevMode ? { debugName: "canAdvance" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     _active = signal(false, ...(ngDevMode ? [{ debugName: "_active" }] : /* istanbul ignore next */ []));
@@ -3757,7 +3759,7 @@ class StrctStep {
         this._active.set(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctStep, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctStep, isStandalone: true, selector: "strct-step", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, canAdvance: { classPropertyName: "canAdvance", publicName: "canAdvance", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "hidden": "!active()" }, classAttribute: "strct-step" }, ngImport: i0, template: `@if (active()) {
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctStep, isStandalone: true, selector: "strct-step", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, canAdvance: { classPropertyName: "canAdvance", publicName: "canAdvance", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "hidden": "!active()" }, classAttribute: "strct-step" }, ngImport: i0, template: `@if (active()) {
     <ng-content />
   }`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -3771,16 +3773,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
   }`,
                     host: { class: 'strct-step', '[hidden]': '!active()' },
                 }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], canAdvance: [{ type: i0.Input, args: [{ isSignal: true, alias: "canAdvance", required: false }] }] } });
-/** Multi-step flow with a numbered header and Back / Next / Finish controls. */
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], canAdvance: [{ type: i0.Input, args: [{ isSignal: true, alias: "canAdvance", required: false }] }] } });
+/** Marks the live-summary column projected beside a vertical wizard. */
+class StrctWizardAside {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctWizardAside, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: StrctWizardAside, isStandalone: true, selector: "[strctWizardAside]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctWizardAside, decorators: [{
+            type: Directive,
+            args: [{ selector: '[strctWizardAside]' }]
+        }] });
+/**
+ * Multi-step flow with Back / Next / Finish controls.
+ *
+ * Default: a numbered horizontal header. With `vertical`, steps become a left
+ * rail — dashed-ring states (idle ⊙ / active ●⊙ / done ✓), a progress bar
+ * with an “n/N” counter, and click-back navigation to visited steps — plus an
+ * optional right column projected via `strctWizardAside` (live summaries).
+ * The rail never flips horizontal: under ~720px of component width it
+ * collapses to a compact vertical ring column (container query).
+ *
+ *   <strct-wizard vertical title="Create virtual machine">
+ *     <strct-step label="Identity" description="Name, environment">…</strct-step>
+ *     …
+ *     <aside strctWizardAside>…live summary…</aside>
+ *   </strct-wizard>
+ */
 class StrctWizard {
     steps = contentChildren(StrctStep, ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
+    asideDef = contentChild(StrctWizardAside, ...(ngDevMode ? [{ debugName: "asideDef" }] : /* istanbul ignore next */ []));
     current = model(0, ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
+    /**
+     * Vertical mode: steps become a left rail with dashed-ring states, a
+     * progress bar and click-back navigation; `strctWizardAside` projects a
+     * right column. The rail collapses to a compact vertical ring column under
+     * ~720px of component width — it never flips horizontal.
+     */
+    vertical = input(false, { ...(ngDevMode ? { debugName: "vertical" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Rail heading shown above the progress bar (vertical mode). */
+    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
     /** Label for the final-step button (default "Finish"). */
     finishLabel = input('Finish', ...(ngDevMode ? [{ debugName: "finishLabel" }] : /* istanbul ignore next */ []));
-    /** Labels for the Back / Next buttons (localizable). */
+    /** Labels for the Back / Next / Cancel buttons (localizable). */
     backLabel = input('Back', ...(ngDevMode ? [{ debugName: "backLabel" }] : /* istanbul ignore next */ []));
     nextLabel = input('Next', ...(ngDevMode ? [{ debugName: "nextLabel" }] : /* istanbul ignore next */ []));
+    cancelLabel = input('Cancel', ...(ngDevMode ? [{ debugName: "cancelLabel" }] : /* istanbul ignore next */ []));
+    /** Busy label while `submitting` (localizable). */
+    submittingLabel = input('Submitting…', ...(ngDevMode ? [{ debugName: "submittingLabel" }] : /* istanbul ignore next */ []));
+    /** Counter suffix in the rail: "2/5 {progressLabel}". */
+    progressLabel = input('completed', ...(ngDevMode ? [{ debugName: "progressLabel" }] : /* istanbul ignore next */ []));
+    /** Accessible name of the vertical step rail. */
+    stepsLabel = input('Steps', ...(ngDevMode ? [{ debugName: "stepsLabel" }] : /* istanbul ignore next */ []));
     /** Disable Finish and show a busy label while an async submit is in flight. */
     submitting = input(false, { ...(ngDevMode ? { debugName: "submitting" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Show a Cancel button on the left. */
@@ -3789,8 +3832,11 @@ class StrctWizard {
     finished = output();
     /** Emitted when the user clicks Cancel. */
     cancelled = output();
-    /** Emits the new step index after a Back / Next move. */
+    /** Emits the new step index after a Back / Next / rail move. */
     stepChange = output();
+    /** Furthest step reached — drives the progress bar and rail clickability. */
+    maxVisited = signal(0, ...(ngDevMode ? [{ debugName: "maxVisited" }] : /* istanbul ignore next */ []));
+    progressPct = computed(() => this.steps().length ? (this.maxVisited() / this.steps().length) * 100 : 0, ...(ngDevMode ? [{ debugName: "progressPct" }] : /* istanbul ignore next */ []));
     isLast = computed(() => this.current() >= this.steps().length - 1, ...(ngDevMode ? [{ debugName: "isLast" }] : /* istanbul ignore next */ []));
     /** Whether the current step permits advancing (its `canAdvance`). */
     canAdvance = computed(() => this.steps()[this.current()]?.canAdvance() ?? true, ...(ngDevMode ? [{ debugName: "canAdvance" }] : /* istanbul ignore next */ []));
@@ -3798,6 +3844,10 @@ class StrctWizard {
         effect(() => {
             const idx = this.current();
             this.steps().forEach((step, i) => step.setActive(i === idx));
+            untracked(() => {
+                if (idx > this.maxVisited())
+                    this.maxVisited.set(idx);
+            });
         });
     }
     next() {
@@ -3812,103 +3862,216 @@ class StrctWizard {
             this.stepChange.emit(this.current());
         }
     }
+    /** Jump to a visited step (rail click). Forward moves still go through Next. */
+    goTo(index) {
+        if (index === this.current() || index < 0 || index > this.maxVisited())
+            return;
+        this.current.set(index);
+        this.stepChange.emit(index);
+    }
     finish() {
         if (this.canAdvance() && !this.submitting())
             this.finished.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctWizard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctWizard, isStandalone: true, selector: "strct-wizard", inputs: { current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null }, finishLabel: { classPropertyName: "finishLabel", publicName: "finishLabel", isSignal: true, isRequired: false, transformFunction: null }, backLabel: { classPropertyName: "backLabel", publicName: "backLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, submitting: { classPropertyName: "submitting", publicName: "submitting", isSignal: true, isRequired: false, transformFunction: null }, cancelable: { classPropertyName: "cancelable", publicName: "cancelable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { current: "currentChange", finished: "finished", cancelled: "cancelled", stepChange: "stepChange" }, host: { classAttribute: "strct-wiz" }, queries: [{ propertyName: "steps", predicate: StrctStep, isSignal: true }], ngImport: i0, template: `
-    <div class="strct-wiz__steps">
-      @for (step of steps(); track step; let i = $index; let last = $last) {
-        <div
-          class="strct-wiz__step"
-          [class.strct-wiz__step--active]="i === current()"
-          [class.strct-wiz__step--done]="i < current()"
-        >
-          <span class="strct-wiz__dot">{{ i + 1 }}</span>
-          <span class="strct-wiz__label">{{ step.label() }}</span>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctWizard, isStandalone: true, selector: "strct-wizard", inputs: { current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, finishLabel: { classPropertyName: "finishLabel", publicName: "finishLabel", isSignal: true, isRequired: false, transformFunction: null }, backLabel: { classPropertyName: "backLabel", publicName: "backLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, submittingLabel: { classPropertyName: "submittingLabel", publicName: "submittingLabel", isSignal: true, isRequired: false, transformFunction: null }, progressLabel: { classPropertyName: "progressLabel", publicName: "progressLabel", isSignal: true, isRequired: false, transformFunction: null }, stepsLabel: { classPropertyName: "stepsLabel", publicName: "stepsLabel", isSignal: true, isRequired: false, transformFunction: null }, submitting: { classPropertyName: "submitting", publicName: "submitting", isSignal: true, isRequired: false, transformFunction: null }, cancelable: { classPropertyName: "cancelable", publicName: "cancelable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { current: "currentChange", finished: "finished", cancelled: "cancelled", stepChange: "stepChange" }, host: { properties: { "class.strct-wiz--vertical": "vertical()" }, classAttribute: "strct-wiz" }, queries: [{ propertyName: "steps", predicate: StrctStep, isSignal: true }, { propertyName: "asideDef", first: true, predicate: StrctWizardAside, descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div
+      class="strct-wiz__layout"
+      [class.strct-wiz__layout--v]="vertical()"
+      [class.strct-wiz__layout--aside]="vertical() && asideDef()"
+    >
+      @if (vertical()) {
+        <nav class="strct-wiz__rail" [attr.aria-label]="stepsLabel()">
+          @if (title()) {
+            <div class="strct-wiz__vtitle">{{ title() }}</div>
+          }
+          <div class="strct-wiz__pbar" aria-hidden="true">
+            <i [style.width.%]="progressPct()"></i>
+          </div>
+          <div class="strct-wiz__pcount">
+            {{ maxVisited() }}/{{ steps().length }} {{ progressLabel() }}
+          </div>
+          <div class="strct-wiz__vsteps">
+            @for (step of steps(); track step; let i = $index) {
+              <button
+                type="button"
+                class="strct-wiz__vstep"
+                [class.strct-wiz__vstep--done]="i < maxVisited() && i !== current()"
+                [class.strct-wiz__vstep--active]="i === current()"
+                [disabled]="i > maxVisited() || null"
+                [attr.aria-current]="i === current() ? 'step' : null"
+                [attr.title]="step.label()"
+                (click)="goTo(i)"
+              >
+                <span class="strct-wiz__ring" aria-hidden="true"></span>
+                <span class="strct-wiz__vmeta">
+                  <span class="strct-wiz__vlabel">{{ step.label() }}</span>
+                  @if (step.description()) {
+                    <span class="strct-wiz__vdesc">{{ step.description() }}</span>
+                  }
+                </span>
+              </button>
+            }
+          </div>
+        </nav>
+      } @else {
+        <div class="strct-wiz__steps">
+          @for (step of steps(); track step; let i = $index; let last = $last) {
+            <div
+              class="strct-wiz__step"
+              [class.strct-wiz__step--active]="i === current()"
+              [class.strct-wiz__step--done]="i < current()"
+            >
+              <span class="strct-wiz__dot">{{ i + 1 }}</span>
+              <span class="strct-wiz__label">{{ step.label() }}</span>
+            </div>
+            @if (!last) {
+              <span class="strct-wiz__sep"></span>
+            }
+          }
         </div>
-        @if (!last) {
-          <span class="strct-wiz__sep"></span>
-        }
       }
-    </div>
 
-    <div class="strct-wiz__content"><ng-content /></div>
+      <div class="strct-wiz__main">
+        <div class="strct-wiz__content"><ng-content /></div>
 
-    <div class="strct-wiz__foot">
-      @if (cancelable()) {
-        <button strct-button variant="flat" class="strct-wiz__cancel" (click)="cancelled.emit()">
-          Cancel
-        </button>
-      }
-      <button strct-button variant="flat" [disabled]="current() === 0" (click)="back()">
-        {{ backLabel() }}
-      </button>
-      @if (isLast()) {
-        <button
-          strct-button
-          variant="primary"
-          [disabled]="submitting() || !canAdvance()"
-          (click)="finish()"
-        >
-          {{ submitting() ? 'Submitting…' : finishLabel() }}
-        </button>
-      } @else {
-        <button strct-button variant="primary" [disabled]="!canAdvance()" (click)="next()">
-          {{ nextLabel() }}
-        </button>
-      }
+        <div class="strct-wiz__foot">
+          @if (cancelable()) {
+            <button
+              strct-button
+              variant="flat"
+              class="strct-wiz__cancel"
+              (click)="cancelled.emit()"
+            >
+              {{ cancelLabel() }}
+            </button>
+          }
+          <button strct-button variant="flat" [disabled]="current() === 0" (click)="back()">
+            {{ backLabel() }}
+          </button>
+          @if (isLast()) {
+            <button
+              strct-button
+              variant="primary"
+              [disabled]="submitting() || !canAdvance()"
+              (click)="finish()"
+            >
+              {{ submitting() ? submittingLabel() : finishLabel() }}
+            </button>
+          } @else {
+            <button strct-button variant="primary" [disabled]="!canAdvance()" (click)="next()">
+              {{ nextLabel() }}
+            </button>
+          }
+        </div>
+      </div>
+
+      <aside class="strct-wiz__aside">
+        <ng-content select="[strctWizardAside]" />
+      </aside>
     </div>
-  `, isInline: true, styles: [".strct-wiz{display:block}.strct-wiz__steps{display:flex;align-items:center;gap:6px}.strct-wiz__step{display:flex;align-items:center;gap:8px}.strct-wiz__dot{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:12px;font-weight:600;color:var(--t2);background:var(--bg-3);border:1px solid var(--b2)}.strct-wiz__label{font-size:12px;color:var(--t2)}.strct-wiz__step--active .strct-wiz__dot{background:var(--acc-m);color:var(--acc);border-color:var(--acc)}.strct-wiz__step--active .strct-wiz__label{color:var(--t1);font-weight:600}.strct-wiz__step--done .strct-wiz__dot{background:var(--acc-m);color:var(--acc);border-color:var(--acc30)}.strct-wiz__sep{flex:1;height:1px;background:var(--b2);min-width:18px}.strct-wiz__content{margin:18px 0;padding:16px;min-height:80px;background:var(--bg-1);border:1px solid var(--b2);border-radius:8px;color:var(--t2);font-size:13px}.strct-wiz__foot{display:flex;justify-content:flex-end;gap:8px}.strct-wiz__cancel{margin-inline-end:auto}\n"], dependencies: [{ kind: "component", type: StrctButton, selector: "button[strct-button], a[strct-button]", inputs: ["variant", "size", "solid", "block", "iconOnly"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-wiz{display:block}.strct-wiz__steps{display:flex;align-items:center;gap:6px}.strct-wiz__step{display:flex;align-items:center;gap:8px}.strct-wiz__dot{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:12px;font-weight:600;color:var(--t2);background:var(--bg-3);border:1px solid var(--b2)}.strct-wiz__label{font-size:12px;color:var(--t2)}.strct-wiz__step--active .strct-wiz__dot{background:var(--acc-m);color:var(--acc);border-color:var(--acc)}.strct-wiz__step--active .strct-wiz__label{color:var(--t1);font-weight:600}.strct-wiz__step--done .strct-wiz__dot{background:var(--acc-m);color:var(--acc);border-color:var(--acc30)}.strct-wiz__sep{flex:1;height:1px;background:var(--b2);min-width:18px}.strct-wiz__content{margin:18px 0;padding:16px;min-height:80px;background:var(--bg-1);border:1px solid var(--b2);border-radius:8px;color:var(--t2);font-size:13px}.strct-wiz__foot{display:flex;justify-content:flex-end;gap:8px}.strct-wiz__cancel{margin-inline-end:auto}.strct-wiz__aside{display:none}.strct-wiz--vertical{container-type:inline-size}.strct-wiz__layout--v{display:grid;grid-template-columns:232px minmax(0,1fr);border:1px solid var(--b2);border-radius:12px;background:var(--bg-1);overflow:hidden}.strct-wiz__layout--v.strct-wiz__layout--aside{grid-template-columns:232px minmax(0,1fr) 280px}.strct-wiz__layout--v .strct-wiz__aside{display:block;background:var(--bg-2);border-inline-start:1px solid var(--b1);overflow-y:auto}.strct-wiz__layout--v .strct-wiz__main{display:flex;flex-direction:column;min-width:0}.strct-wiz__layout--v .strct-wiz__content{flex:1;margin:0;padding:20px 24px;border:0;border-radius:0;background:transparent;overflow-y:auto}.strct-wiz__layout--v .strct-wiz__foot{padding:13px 24px;border-top:1px solid var(--b1)}.strct-wiz__rail{display:flex;flex-direction:column;padding:20px 18px 16px;background:var(--bg-2);border-inline-end:1px solid var(--b1);min-width:0}.strct-wiz__vtitle{font-size:15px;font-weight:600;letter-spacing:-.2px;line-height:1.3;margin-bottom:12px}.strct-wiz__pbar{height:4px;border-radius:99px;background:var(--bg-a);overflow:hidden;flex:none}.strct-wiz__pbar i{display:block;height:100%;border-radius:99px;background:var(--acc);transition:width .4s cubic-bezier(.4,0,.2,1)}.strct-wiz__pcount{font-family:var(--mono);font-size:10.5px;letter-spacing:.4px;color:var(--t3);margin:7px 0 16px;font-variant-numeric:tabular-nums}.strct-wiz__vsteps{display:flex;flex-direction:column}.strct-wiz__vstep{display:grid;grid-template-columns:22px 1fr;gap:11px;align-items:start;width:100%;padding:8px 0;border:0;background:none;text-align:start;font:inherit;color:inherit;cursor:pointer}.strct-wiz__vstep:disabled{cursor:default;opacity:.55}.strct-wiz__ring{width:20px;height:20px;margin-top:1px;border-radius:50%;border:2px dashed var(--b3);display:grid;place-items:center;transition:border-color .2s,background .2s}.strct-wiz__vlabel{display:block;font-size:13px;color:var(--t2);transition:color .15s}.strct-wiz__vdesc{display:block;font-size:11px;color:var(--t3);margin-top:1px;opacity:0;height:0;overflow:hidden;transition:opacity .25s}.strct-wiz__vstep--done .strct-wiz__ring{border:0;background:var(--success)}.strct-wiz__vstep--done .strct-wiz__ring:after{content:\"\";width:8px;height:4px;border-left:2px solid var(--inv);border-bottom:2px solid var(--inv);transform:rotate(-45deg) translate(1px,-1px)}.strct-wiz__vstep--done .strct-wiz__vlabel{color:var(--t1)}.strct-wiz__vstep--active .strct-wiz__ring{border-style:solid;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc18)}.strct-wiz__vstep--active .strct-wiz__ring:after{content:\"\";width:7px;height:7px;border-radius:50%;background:var(--acc)}.strct-wiz__vstep--active .strct-wiz__vlabel{color:var(--t1);font-weight:600}.strct-wiz__vstep--active .strct-wiz__vdesc{opacity:1;height:auto}@container (max-width: 800px){.strct-wiz__layout--v.strct-wiz__layout--aside{grid-template-columns:232px minmax(0,1fr)}.strct-wiz__layout--v .strct-wiz__aside{display:none}}@container (max-width: 720px){.strct-wiz__layout--v,.strct-wiz__layout--v.strct-wiz__layout--aside{grid-template-columns:56px minmax(0,1fr)}.strct-wiz__rail{padding:18px 0 12px;align-items:center}.strct-wiz__vtitle,.strct-wiz__pbar,.strct-wiz__pcount,.strct-wiz__vmeta{display:none}.strct-wiz__vsteps{gap:3px;align-items:center}.strct-wiz__vstep{grid-template-columns:22px;justify-items:center;position:relative;padding:7px 0}.strct-wiz__vstep:not(:last-child):after{content:\"\";position:absolute;left:50%;top:30px;height:10px;width:1.5px;background:var(--b3)}.strct-wiz__vstep--done:not(:last-child):after{background:var(--success);opacity:.6}.strct-wiz__layout--v .strct-wiz__content{padding:16px 18px}.strct-wiz__layout--v .strct-wiz__foot{padding:12px 18px}}@media(prefers-reduced-motion:reduce){.strct-wiz__pbar i,.strct-wiz__ring,.strct-wiz__vlabel,.strct-wiz__vdesc{transition:none}}\n"], dependencies: [{ kind: "component", type: StrctButton, selector: "button[strct-button], a[strct-button]", inputs: ["variant", "size", "solid", "block", "iconOnly"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctWizard, decorators: [{
             type: Component,
             args: [{ selector: 'strct-wizard', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctButton], template: `
-    <div class="strct-wiz__steps">
-      @for (step of steps(); track step; let i = $index; let last = $last) {
-        <div
-          class="strct-wiz__step"
-          [class.strct-wiz__step--active]="i === current()"
-          [class.strct-wiz__step--done]="i < current()"
-        >
-          <span class="strct-wiz__dot">{{ i + 1 }}</span>
-          <span class="strct-wiz__label">{{ step.label() }}</span>
+    <div
+      class="strct-wiz__layout"
+      [class.strct-wiz__layout--v]="vertical()"
+      [class.strct-wiz__layout--aside]="vertical() && asideDef()"
+    >
+      @if (vertical()) {
+        <nav class="strct-wiz__rail" [attr.aria-label]="stepsLabel()">
+          @if (title()) {
+            <div class="strct-wiz__vtitle">{{ title() }}</div>
+          }
+          <div class="strct-wiz__pbar" aria-hidden="true">
+            <i [style.width.%]="progressPct()"></i>
+          </div>
+          <div class="strct-wiz__pcount">
+            {{ maxVisited() }}/{{ steps().length }} {{ progressLabel() }}
+          </div>
+          <div class="strct-wiz__vsteps">
+            @for (step of steps(); track step; let i = $index) {
+              <button
+                type="button"
+                class="strct-wiz__vstep"
+                [class.strct-wiz__vstep--done]="i < maxVisited() && i !== current()"
+                [class.strct-wiz__vstep--active]="i === current()"
+                [disabled]="i > maxVisited() || null"
+                [attr.aria-current]="i === current() ? 'step' : null"
+                [attr.title]="step.label()"
+                (click)="goTo(i)"
+              >
+                <span class="strct-wiz__ring" aria-hidden="true"></span>
+                <span class="strct-wiz__vmeta">
+                  <span class="strct-wiz__vlabel">{{ step.label() }}</span>
+                  @if (step.description()) {
+                    <span class="strct-wiz__vdesc">{{ step.description() }}</span>
+                  }
+                </span>
+              </button>
+            }
+          </div>
+        </nav>
+      } @else {
+        <div class="strct-wiz__steps">
+          @for (step of steps(); track step; let i = $index; let last = $last) {
+            <div
+              class="strct-wiz__step"
+              [class.strct-wiz__step--active]="i === current()"
+              [class.strct-wiz__step--done]="i < current()"
+            >
+              <span class="strct-wiz__dot">{{ i + 1 }}</span>
+              <span class="strct-wiz__label">{{ step.label() }}</span>
+            </div>
+            @if (!last) {
+              <span class="strct-wiz__sep"></span>
+            }
+          }
         </div>
-        @if (!last) {
-          <span class="strct-wiz__sep"></span>
-        }
       }
-    </div>
 
-    <div class="strct-wiz__content"><ng-content /></div>
+      <div class="strct-wiz__main">
+        <div class="strct-wiz__content"><ng-content /></div>
 
-    <div class="strct-wiz__foot">
-      @if (cancelable()) {
-        <button strct-button variant="flat" class="strct-wiz__cancel" (click)="cancelled.emit()">
-          Cancel
-        </button>
-      }
-      <button strct-button variant="flat" [disabled]="current() === 0" (click)="back()">
-        {{ backLabel() }}
-      </button>
-      @if (isLast()) {
-        <button
-          strct-button
-          variant="primary"
-          [disabled]="submitting() || !canAdvance()"
-          (click)="finish()"
-        >
-          {{ submitting() ? 'Submitting…' : finishLabel() }}
-        </button>
-      } @else {
-        <button strct-button variant="primary" [disabled]="!canAdvance()" (click)="next()">
-          {{ nextLabel() }}
-        </button>
-      }
+        <div class="strct-wiz__foot">
+          @if (cancelable()) {
+            <button
+              strct-button
+              variant="flat"
+              class="strct-wiz__cancel"
+              (click)="cancelled.emit()"
+            >
+              {{ cancelLabel() }}
+            </button>
+          }
+          <button strct-button variant="flat" [disabled]="current() === 0" (click)="back()">
+            {{ backLabel() }}
+          </button>
+          @if (isLast()) {
+            <button
+              strct-button
+              variant="primary"
+              [disabled]="submitting() || !canAdvance()"
+              (click)="finish()"
+            >
+              {{ submitting() ? submittingLabel() : finishLabel() }}
+            </button>
+          } @else {
+            <button strct-button variant="primary" [disabled]="!canAdvance()" (click)="next()">
+              {{ nextLabel() }}
+            </button>
+          }
+        </div>
+      </div>
+
+      <aside class="strct-wiz__aside">
+        <ng-content select="[strctWizardAside]" />
+      </aside>
     </div>
-  `, host: { class: 'strct-wiz' }, styles: [".strct-wiz{display:block}.strct-wiz__steps{display:flex;align-items:center;gap:6px}.strct-wiz__step{display:flex;align-items:center;gap:8px}.strct-wiz__dot{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:12px;font-weight:600;color:var(--t2);background:var(--bg-3);border:1px solid var(--b2)}.strct-wiz__label{font-size:12px;color:var(--t2)}.strct-wiz__step--active .strct-wiz__dot{background:var(--acc-m);color:var(--acc);border-color:var(--acc)}.strct-wiz__step--active .strct-wiz__label{color:var(--t1);font-weight:600}.strct-wiz__step--done .strct-wiz__dot{background:var(--acc-m);color:var(--acc);border-color:var(--acc30)}.strct-wiz__sep{flex:1;height:1px;background:var(--b2);min-width:18px}.strct-wiz__content{margin:18px 0;padding:16px;min-height:80px;background:var(--bg-1);border:1px solid var(--b2);border-radius:8px;color:var(--t2);font-size:13px}.strct-wiz__foot{display:flex;justify-content:flex-end;gap:8px}.strct-wiz__cancel{margin-inline-end:auto}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { steps: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrctStep), { isSignal: true }] }], current: [{ type: i0.Input, args: [{ isSignal: true, alias: "current", required: false }] }, { type: i0.Output, args: ["currentChange"] }], finishLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "finishLabel", required: false }] }], backLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "backLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], submitting: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitting", required: false }] }], cancelable: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelable", required: false }] }], finished: [{ type: i0.Output, args: ["finished"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }], stepChange: [{ type: i0.Output, args: ["stepChange"] }] } });
+  `, host: { class: 'strct-wiz', '[class.strct-wiz--vertical]': 'vertical()' }, styles: [".strct-wiz{display:block}.strct-wiz__steps{display:flex;align-items:center;gap:6px}.strct-wiz__step{display:flex;align-items:center;gap:8px}.strct-wiz__dot{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:12px;font-weight:600;color:var(--t2);background:var(--bg-3);border:1px solid var(--b2)}.strct-wiz__label{font-size:12px;color:var(--t2)}.strct-wiz__step--active .strct-wiz__dot{background:var(--acc-m);color:var(--acc);border-color:var(--acc)}.strct-wiz__step--active .strct-wiz__label{color:var(--t1);font-weight:600}.strct-wiz__step--done .strct-wiz__dot{background:var(--acc-m);color:var(--acc);border-color:var(--acc30)}.strct-wiz__sep{flex:1;height:1px;background:var(--b2);min-width:18px}.strct-wiz__content{margin:18px 0;padding:16px;min-height:80px;background:var(--bg-1);border:1px solid var(--b2);border-radius:8px;color:var(--t2);font-size:13px}.strct-wiz__foot{display:flex;justify-content:flex-end;gap:8px}.strct-wiz__cancel{margin-inline-end:auto}.strct-wiz__aside{display:none}.strct-wiz--vertical{container-type:inline-size}.strct-wiz__layout--v{display:grid;grid-template-columns:232px minmax(0,1fr);border:1px solid var(--b2);border-radius:12px;background:var(--bg-1);overflow:hidden}.strct-wiz__layout--v.strct-wiz__layout--aside{grid-template-columns:232px minmax(0,1fr) 280px}.strct-wiz__layout--v .strct-wiz__aside{display:block;background:var(--bg-2);border-inline-start:1px solid var(--b1);overflow-y:auto}.strct-wiz__layout--v .strct-wiz__main{display:flex;flex-direction:column;min-width:0}.strct-wiz__layout--v .strct-wiz__content{flex:1;margin:0;padding:20px 24px;border:0;border-radius:0;background:transparent;overflow-y:auto}.strct-wiz__layout--v .strct-wiz__foot{padding:13px 24px;border-top:1px solid var(--b1)}.strct-wiz__rail{display:flex;flex-direction:column;padding:20px 18px 16px;background:var(--bg-2);border-inline-end:1px solid var(--b1);min-width:0}.strct-wiz__vtitle{font-size:15px;font-weight:600;letter-spacing:-.2px;line-height:1.3;margin-bottom:12px}.strct-wiz__pbar{height:4px;border-radius:99px;background:var(--bg-a);overflow:hidden;flex:none}.strct-wiz__pbar i{display:block;height:100%;border-radius:99px;background:var(--acc);transition:width .4s cubic-bezier(.4,0,.2,1)}.strct-wiz__pcount{font-family:var(--mono);font-size:10.5px;letter-spacing:.4px;color:var(--t3);margin:7px 0 16px;font-variant-numeric:tabular-nums}.strct-wiz__vsteps{display:flex;flex-direction:column}.strct-wiz__vstep{display:grid;grid-template-columns:22px 1fr;gap:11px;align-items:start;width:100%;padding:8px 0;border:0;background:none;text-align:start;font:inherit;color:inherit;cursor:pointer}.strct-wiz__vstep:disabled{cursor:default;opacity:.55}.strct-wiz__ring{width:20px;height:20px;margin-top:1px;border-radius:50%;border:2px dashed var(--b3);display:grid;place-items:center;transition:border-color .2s,background .2s}.strct-wiz__vlabel{display:block;font-size:13px;color:var(--t2);transition:color .15s}.strct-wiz__vdesc{display:block;font-size:11px;color:var(--t3);margin-top:1px;opacity:0;height:0;overflow:hidden;transition:opacity .25s}.strct-wiz__vstep--done .strct-wiz__ring{border:0;background:var(--success)}.strct-wiz__vstep--done .strct-wiz__ring:after{content:\"\";width:8px;height:4px;border-left:2px solid var(--inv);border-bottom:2px solid var(--inv);transform:rotate(-45deg) translate(1px,-1px)}.strct-wiz__vstep--done .strct-wiz__vlabel{color:var(--t1)}.strct-wiz__vstep--active .strct-wiz__ring{border-style:solid;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc18)}.strct-wiz__vstep--active .strct-wiz__ring:after{content:\"\";width:7px;height:7px;border-radius:50%;background:var(--acc)}.strct-wiz__vstep--active .strct-wiz__vlabel{color:var(--t1);font-weight:600}.strct-wiz__vstep--active .strct-wiz__vdesc{opacity:1;height:auto}@container (max-width: 800px){.strct-wiz__layout--v.strct-wiz__layout--aside{grid-template-columns:232px minmax(0,1fr)}.strct-wiz__layout--v .strct-wiz__aside{display:none}}@container (max-width: 720px){.strct-wiz__layout--v,.strct-wiz__layout--v.strct-wiz__layout--aside{grid-template-columns:56px minmax(0,1fr)}.strct-wiz__rail{padding:18px 0 12px;align-items:center}.strct-wiz__vtitle,.strct-wiz__pbar,.strct-wiz__pcount,.strct-wiz__vmeta{display:none}.strct-wiz__vsteps{gap:3px;align-items:center}.strct-wiz__vstep{grid-template-columns:22px;justify-items:center;position:relative;padding:7px 0}.strct-wiz__vstep:not(:last-child):after{content:\"\";position:absolute;left:50%;top:30px;height:10px;width:1.5px;background:var(--b3)}.strct-wiz__vstep--done:not(:last-child):after{background:var(--success);opacity:.6}.strct-wiz__layout--v .strct-wiz__content{padding:16px 18px}.strct-wiz__layout--v .strct-wiz__foot{padding:12px 18px}}@media(prefers-reduced-motion:reduce){.strct-wiz__pbar i,.strct-wiz__ring,.strct-wiz__vlabel,.strct-wiz__vdesc{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { steps: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrctStep), { isSignal: true }] }], asideDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctWizardAside), { isSignal: true }] }], current: [{ type: i0.Input, args: [{ isSignal: true, alias: "current", required: false }] }, { type: i0.Output, args: ["currentChange"] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], finishLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "finishLabel", required: false }] }], backLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "backLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], submittingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "submittingLabel", required: false }] }], progressLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressLabel", required: false }] }], stepsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepsLabel", required: false }] }], submitting: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitting", required: false }] }], cancelable: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelable", required: false }] }], finished: [{ type: i0.Output, args: ["finished"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }], stepChange: [{ type: i0.Output, args: ["stepChange"] }] } });
 
 /**
  * Separator rule. Horizontal by default; pass `vertical` for an inline rule.
@@ -15653,5 +15816,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_ICON_NAMES, STRCT_MASKS, STRCT_PALETTES, STRCT_RAW_ICONS, STRCT_TIME_RANGE_PRESETS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAnnouncer, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctBytesPipe, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCascadeHost, StrctCascadeNode, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChart, StrctCheckbox, StrctChips, StrctCode, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctContextMenu, StrctContextMenuTrigger, StrctCopy, StrctDatagrid, StrctDatagridActionBar, StrctDatepicker, StrctDesc, StrctDescriptionList, StrctDiff, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctDropdownTrigger, StrctDurationPipe, StrctEmptyState, StrctField, StrctFile, StrctFilterBar, StrctFlow, StrctFooter, StrctGauge, StrctHeader, StrctHero, StrctHotkeysHelp, StrctHotkeysService, StrctIcon, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctLogViewer, StrctLogin, StrctMenuPanel, StrctMenuService, StrctMenubar, StrctMetricTile, StrctModal, StrctNav, StrctNavItem, StrctOverlay, StrctPageHeader, StrctPageHeaderActions, StrctPageHeaderCrumbs, StrctPagination, StrctPassword, StrctProgress, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRatePipe, StrctRating, StrctReorder, StrctReorderItem, StrctRowDetailDef, StrctSearchbox, StrctSectionMenu, StrctSegmented, StrctShell, StrctShellService, StrctSiPipe, StrctSignpost, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctSplitButton, StrctSplitter, StrctStack, StrctStackItem, StrctStep, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctThemeService, StrctThemeSwitcher, StrctTimeRangePicker, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctTooltip, StrctTour, StrctTransfer, StrctTree, StrctTreeNode, StrctVerticalNav, StrctWatermark, StrctWizard, parseAnsi, registerStrctIcon, strctComputeDiff, strctFormatBytes, strctFormatDuration, strctFormatRate, strctFormatSi, strctValidationIcon, strctValidationTone };
+export { STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_ICON_NAMES, STRCT_MASKS, STRCT_PALETTES, STRCT_RAW_ICONS, STRCT_TIME_RANGE_PRESETS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAnnouncer, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctBytesPipe, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCascadeHost, StrctCascadeNode, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChart, StrctCheckbox, StrctChips, StrctCode, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctContextMenu, StrctContextMenuTrigger, StrctCopy, StrctDatagrid, StrctDatagridActionBar, StrctDatepicker, StrctDesc, StrctDescriptionList, StrctDiff, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctDropdownTrigger, StrctDurationPipe, StrctEmptyState, StrctField, StrctFile, StrctFilterBar, StrctFlow, StrctFooter, StrctGauge, StrctHeader, StrctHero, StrctHotkeysHelp, StrctHotkeysService, StrctIcon, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctLogViewer, StrctLogin, StrctMenuPanel, StrctMenuService, StrctMenubar, StrctMetricTile, StrctModal, StrctNav, StrctNavItem, StrctOverlay, StrctPageHeader, StrctPageHeaderActions, StrctPageHeaderCrumbs, StrctPagination, StrctPassword, StrctProgress, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRatePipe, StrctRating, StrctReorder, StrctReorderItem, StrctRowDetailDef, StrctSearchbox, StrctSectionMenu, StrctSegmented, StrctShell, StrctShellService, StrctSiPipe, StrctSignpost, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctSplitButton, StrctSplitter, StrctStack, StrctStackItem, StrctStep, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctThemeService, StrctThemeSwitcher, StrctTimeRangePicker, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctTooltip, StrctTour, StrctTransfer, StrctTree, StrctTreeNode, StrctVerticalNav, StrctWatermark, StrctWizard, StrctWizardAside, parseAnsi, registerStrctIcon, strctComputeDiff, strctFormatBytes, strctFormatDuration, strctFormatRate, strctFormatSi, strctValidationIcon, strctValidationTone };
 //# sourceMappingURL=akcelik-strct.mjs.map