/**
 * @module wizard-step-indicator.component
 * @description Pure-display step breadcrumb bar for the Database Designer create wizard.
 *
 * Renders a horizontal step progression:
 *   ① Basics ── ② Fields ── ③ Relationships ── ④ Review ── ⑤ Create
 *
 * Completed steps show a checkmark. The active step is highlighted.
 * Future steps are muted.  Parent controls all state via inputs — this
 * component has no local state and emits no events.
 */
import { Component, Input, ChangeDetectionStrategy, } from '@angular/core';
import * as i0 from "@angular/core";
function WizardStepIndicatorComponent_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "i", 3);
} }
function WizardStepIndicatorComponent_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span");
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ɵ$index_3_r1 = i0.ɵɵnextContext().$index;
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate(ɵ$index_3_r1 + 1);
} }
function WizardStepIndicatorComponent_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "div", 6);
} if (rf & 2) {
    const step_r2 = i0.ɵɵnextContext().$implicit;
    i0.ɵɵclassProp("connector-done", step_r2.isComplete);
} }
function WizardStepIndicatorComponent_For_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 1)(1, "div", 2);
    i0.ɵɵconditionalCreate(2, WizardStepIndicatorComponent_For_2_Conditional_2_Template, 1, 0, "i", 3)(3, WizardStepIndicatorComponent_For_2_Conditional_3_Template, 2, 1, "span");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(4, "span", 4);
    i0.ɵɵtext(5);
    i0.ɵɵelementEnd()();
    i0.ɵɵconditionalCreate(6, WizardStepIndicatorComponent_For_2_Conditional_6_Template, 1, 2, "div", 5);
} if (rf & 2) {
    const step_r2 = ctx.$implicit;
    const ɵ$index_3_r1 = ctx.$index;
    const ɵ$count_3_r3 = ctx.$count;
    i0.ɵɵclassProp("step-complete", step_r2.isComplete)("step-active", step_r2.isActive)("step-future", !step_r2.isComplete && !step_r2.isActive);
    i0.ɵɵattribute("aria-current", step_r2.isActive ? "step" : null);
    i0.ɵɵadvance(2);
    i0.ɵɵconditional(step_r2.isComplete ? 2 : 3);
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate(step_r2.label);
    i0.ɵɵadvance();
    i0.ɵɵconditional(!(ɵ$index_3_r1 === ɵ$count_3_r3 - 1) ? 6 : -1);
} }
export class WizardStepIndicatorComponent {
    /** Ordered list of step definitions. */
    Steps = [];
    /** 0-based index of the currently active step. */
    CurrentStep = 0;
    /** Used by @for track. */
    TrackByStep(_, step) {
        return step.id;
    }
    static ɵfac = function WizardStepIndicatorComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || WizardStepIndicatorComponent)(); };
    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: WizardStepIndicatorComponent, selectors: [["mj-entity-wizard-step-indicator"]], inputs: { Steps: "Steps", CurrentStep: "CurrentStep" }, standalone: false, decls: 3, vars: 0, consts: [["aria-label", "Wizard steps", 1, "step-indicator"], [1, "step"], [1, "step-circle"], [1, "fa-solid", "fa-check"], [1, "step-label"], [1, "step-connector", 3, "connector-done"], [1, "step-connector"]], template: function WizardStepIndicatorComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵelementStart(0, "nav", 0);
            i0.ɵɵrepeaterCreate(1, WizardStepIndicatorComponent_For_2_Template, 7, 10, null, null, ctx.TrackByStep, true);
            i0.ɵɵelementEnd();
        } if (rf & 2) {
            i0.ɵɵadvance();
            i0.ɵɵrepeater(ctx.Steps);
        } }, styles: [".step-indicator[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  padding: 16px 24px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n  background: var(--mj-bg-surface-card);\n  overflow-x: auto;\n  gap: 0;\n}\n\n\n\n\n.step[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-shrink: 0;\n}\n\n.step-circle[_ngcontent-%COMP%] {\n  width: 30px;\n  height: 30px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 0.8rem;\n  font-weight: 600;\n  border: 2px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-muted);\n  transition: background 0.2s, border-color 0.2s, color 0.2s;\n  flex-shrink: 0;\n}\n\n.step-label[_ngcontent-%COMP%] {\n  font-size: 0.8125rem;\n  font-weight: 500;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n  transition: color 0.2s;\n}\n\n\n\n\n.step-active[_ngcontent-%COMP%]   .step-circle[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.step-active[_ngcontent-%COMP%]   .step-label[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n  font-weight: 600;\n}\n\n.step-complete[_ngcontent-%COMP%]   .step-circle[_ngcontent-%COMP%] {\n  background: var(--mj-status-success);\n  border-color: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n}\n\n.step-complete[_ngcontent-%COMP%]   .step-label[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n}\n\n\n\n\n.step-connector[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 20px;\n  height: 3px;\n  background: var(--mj-border-default);\n  margin: 0 8px;\n  border-radius: 2px;\n  transition: background 0.2s;\n}\n\n.connector-done[_ngcontent-%COMP%] {\n  background: var(--mj-status-success);\n}"], changeDetection: 0 });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WizardStepIndicatorComponent, [{
        type: Component,
        args: [{ standalone: false, selector: 'mj-entity-wizard-step-indicator', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"step-indicator\" aria-label=\"Wizard steps\">\n  @for (step of Steps; track TrackByStep($index, step); let last = $last; let i = $index) {\n    <div\n      class=\"step\"\n      [class.step-complete]=\"step.isComplete\"\n      [class.step-active]=\"step.isActive\"\n      [class.step-future]=\"!step.isComplete && !step.isActive\"\n      [attr.aria-current]=\"step.isActive ? 'step' : null\">\n\n      <div class=\"step-circle\">\n        @if (step.isComplete) {\n          <i class=\"fa-solid fa-check\"></i>\n        } @else {\n          <span>{{ i + 1 }}</span>\n        }\n      </div>\n\n      <span class=\"step-label\">{{ step.label }}</span>\n    </div>\n\n    @if (!last) {\n      <div class=\"step-connector\" [class.connector-done]=\"step.isComplete\"></div>\n    }\n  }\n</nav>\n", styles: [".step-indicator {\n  display: flex;\n  align-items: center;\n  padding: 16px 24px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n  background: var(--mj-bg-surface-card);\n  overflow-x: auto;\n  gap: 0;\n}\n\n/* \u2500\u2500 Step item \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.step {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-shrink: 0;\n}\n\n.step-circle {\n  width: 30px;\n  height: 30px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 0.8rem;\n  font-weight: 600;\n  border: 2px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-muted);\n  transition: background 0.2s, border-color 0.2s, color 0.2s;\n  flex-shrink: 0;\n}\n\n.step-label {\n  font-size: 0.8125rem;\n  font-weight: 500;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n  transition: color 0.2s;\n}\n\n/* \u2500\u2500 States \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.step-active .step-circle {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.step-active .step-label {\n  color: var(--mj-text-primary);\n  font-weight: 600;\n}\n\n.step-complete .step-circle {\n  background: var(--mj-status-success);\n  border-color: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n}\n\n.step-complete .step-label {\n  color: var(--mj-text-secondary);\n}\n\n/* \u2500\u2500 Connector line \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.step-connector {\n  flex: 1;\n  min-width: 20px;\n  height: 3px;\n  background: var(--mj-border-default);\n  margin: 0 8px;\n  border-radius: 2px;\n  transition: background 0.2s;\n}\n\n.connector-done {\n  background: var(--mj-status-success);\n}\n"] }]
    }], null, { Steps: [{
            type: Input
        }], CurrentStep: [{
            type: Input
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(WizardStepIndicatorComponent, { className: "WizardStepIndicatorComponent", filePath: "src/DatabaseDesigner/components/shared/wizard-step-indicator.component.ts", lineNumber: 25 }); })();
//# sourceMappingURL=wizard-step-indicator.component.js.map