import * as i0 from '@angular/core';
import { input, booleanAttribute, output, viewChild, ChangeDetectionStrategy, Component, contentChildren, model, effect, untracked, HostBinding } from '@angular/core';
import { NgTemplateOutlet } from '@angular/common';
import * as i2 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import * as i1 from '@angular/material/stepper';
import { MatStepper, MatStepperModule } from '@angular/material/stepper';

class SdStep {
    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
    // Optional Material icon name shown when the step is in 'pending' state
    // (overrides the default numbered indicator).
    icon = input(undefined, ...(ngDevMode ? [{ debugName: "icon" }] : []));
    // Set true to mark the step skippable in linear mode.
    optional = input(false, ...(ngDevMode ? [{ debugName: "optional", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
    // When false, user cannot return to this step after it's been completed.
    editable = input(true, ...(ngDevMode ? [{ debugName: "editable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
    // Reactive form / control. When the stepper is linear, the user can only
    // proceed past this step once stepControl.valid is true.
    stepControl = input(undefined, ...(ngDevMode ? [{ debugName: "stepControl" }] : []));
    // Override the auto-derived state (eg force 'error' from outside on async validation).
    state = input(undefined, ...(ngDevMode ? [{ debugName: "state" }] : []));
    // Error message rendered next to the step header when state is 'error'.
    errorMessage = input(undefined, ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
    // Emitted when this step transitions to selected.
    selectChange = output();
    // Body template captured from projected <ng-content>.
    bodyTpl = viewChild.required('body');
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SdStep, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.24", type: SdStep, isStandalone: true, selector: "sd-step", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, stepControl: { classPropertyName: "stepControl", publicName: "stepControl", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectChange: "selectChange" }, viewQueries: [{ propertyName: "bodyTpl", first: true, predicate: ["body"], descendants: true, isSignal: true }], ngImport: i0, template: `<ng-template #body><ng-content></ng-content></ng-template>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SdStep, decorators: [{
            type: Component,
            args: [{
                    selector: 'sd-step',
                    standalone: true,
                    // why: identical pattern to <sd-tab> — capture projected content via #body
                    // template ref so <sd-stepper> can render it inside mat-step's matStepContent
                    // (lazy mount + animation-friendly).
                    template: `<ng-template #body><ng-content></ng-content></ng-template>`,
                    changeDetection: ChangeDetectionStrategy.OnPush,
                }]
        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], stepControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepControl", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], selectChange: [{ type: i0.Output, args: ["selectChange"] }], bodyTpl: [{ type: i0.ViewChild, args: ['body', { isSignal: true }] }] } });

class SdStepper {
    steps = contentChildren(SdStep, ...(ngDevMode ? [{ debugName: "steps" }] : []));
    selectedIndex = model(0, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : []));
    // why: enforce sequential gating — only valid steps unlock the next.
    linear = input(false, ...(ngDevMode ? [{ debugName: "linear", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
    orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
    labelPosition = input('end', ...(ngDevMode ? [{ debugName: "labelPosition" }] : []));
    headerPosition = input('top', ...(ngDevMode ? [{ debugName: "headerPosition" }] : []));
    animationDuration = input('500ms', ...(ngDevMode ? [{ debugName: "animationDuration" }] : []));
    disableRipple = input(false, ...(ngDevMode ? [{ debugName: "disableRipple", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
    // Drives the Core color CSS vars on indicators / connector / line.
    color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
    autoId = input(undefined, ...(ngDevMode ? [{ debugName: "autoId" }] : []));
    // Emits {previousIndex, selectedIndex, previousStep, selectedStep}.
    selectionChange = output();
    matStepper = viewChild(MatStepper, ...(ngDevMode ? [{ debugName: "matStepper" }] : []));
    get autoIdAttr() {
        return this.autoId() ?? null;
    }
    // Core color CSS vars — same mechanism as <sd-tab-group>.
    get cssActive() {
        return `var(--sd-${this.color()})`;
    }
    get cssActiveBg() {
        return `var(--sd-${this.color()})`;
    }
    get cssCompleted() {
        return `var(--sd-${this.color()})`;
    }
    get cssLine() {
        return `var(--sd-${this.color()})`;
    }
    constructor() {
        // why: clamp selectedIndex when a step is removed past the active one.
        effect(() => {
            const len = this.steps().length;
            const cur = untracked(() => this.selectedIndex());
            if (len > 0 && cur >= len) {
                this.selectedIndex.set(Math.max(0, len - 1));
            }
        });
    }
    next() {
        this.matStepper()?.next();
    }
    previous() {
        this.matStepper()?.previous();
    }
    reset() {
        this.matStepper()?.reset();
    }
    goTo(index) {
        const len = this.steps().length;
        if (len === 0) {
            this.selectedIndex.set(0);
            return;
        }
        this.selectedIndex.set(Math.max(0, Math.min(index, len - 1)));
    }
    onSelectionChange(ev) {
        this.selectionChange.emit(ev);
        // Forward to each step that just became selected so consumer can react.
        const step = this.steps()[ev.selectedIndex];
        step?.selectChange.emit();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SdStepper, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: SdStepper, isStandalone: true, selector: "sd-stepper", inputs: { selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, headerPosition: { classPropertyName: "headerPosition", publicName: "headerPosition", isSignal: true, isRequired: false, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: true, isRequired: false, transformFunction: null }, disableRipple: { classPropertyName: "disableRipple", publicName: "disableRipple", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, autoId: { classPropertyName: "autoId", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange", selectionChange: "selectionChange" }, host: { properties: { "attr.data-autoId": "this.autoIdAttr", "style.--sd-stepper-active-color": "this.cssActive", "style.--sd-stepper-active-bg": "this.cssActiveBg", "style.--sd-stepper-completed-color": "this.cssCompleted", "style.--sd-stepper-line-active-color": "this.cssLine" } }, queries: [{ propertyName: "steps", predicate: SdStep, isSignal: true }], viewQueries: [{ propertyName: "matStepper", first: true, predicate: MatStepper, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-stepper\n  class=\"sd-stepper\"\n  [(selectedIndex)]=\"selectedIndex\"\n  [linear]=\"linear()\"\n  [orientation]=\"orientation()\"\n  [labelPosition]=\"labelPosition()\"\n  [headerPosition]=\"headerPosition()\"\n  [animationDuration]=\"animationDuration()\"\n  [disableRipple]=\"disableRipple()\"\n  (selectionChange)=\"onSelectionChange($event)\">\n  @for (step of steps(); track step; let i = $index) {\n    <mat-step\n      [stepControl]=\"step.stepControl() ?? undefined!\"\n      [optional]=\"step.optional()\"\n      [editable]=\"step.editable()\"\n      [state]=\"step.state() ?? ''\"\n      [errorMessage]=\"step.errorMessage() ?? ''\">\n      <ng-template matStepLabel>\n        <span class=\"sd-step__label\">\n          @if (step.icon(); as ic) {\n            <mat-icon class=\"sd-step__icon\">{{ ic }}</mat-icon>\n          }\n          <span class=\"sd-step__text\">{{ step.label() }}</span>\n        </span>\n      </ng-template>\n\n      <ng-template matStepContent>\n        <ng-container [ngTemplateOutlet]=\"step.bodyTpl()\"></ng-container>\n      </ng-template>\n    </mat-step>\n  }\n</mat-stepper>\n", styles: [":host{display:block;--sd-stepper-active-color: var(--sd-primary, #1565c0);--sd-stepper-active-bg: var(--sd-primary, #1565c0);--sd-stepper-completed-color: var(--sd-primary, #1565c0);--sd-stepper-line-active-color: var(--sd-primary, #1565c0);--sd-stepper-error-color: var(--sd-error, #f44336);--sd-stepper-pending-bg: #e0e0e0;--sd-stepper-pending-color: rgba(0, 0, 0, .54);--sd-stepper-text-color: var(--sd-text-primary, #1a1a1a)}.sd-step__label{display:inline-flex;align-items:center;gap:4px}.sd-step__icon{font-size:18px;width:18px;height:18px;line-height:18px}.sd-step__text{white-space:nowrap}:host ::ng-deep .mat-step-icon{background-color:var(--sd-stepper-pending-bg);color:var(--sd-stepper-pending-color)}:host ::ng-deep .mat-step-icon-selected{background-color:var(--sd-stepper-active-bg)!important;color:#fff!important}:host ::ng-deep .mat-step-icon-state-done,:host ::ng-deep .mat-step-icon-state-edit{background-color:var(--sd-stepper-completed-color)!important;color:#fff!important}:host ::ng-deep .mat-step-icon-state-error{background-color:var(--sd-stepper-error-color)!important;color:#fff!important}:host ::ng-deep .mat-step-label.mat-step-label-active .mat-step-text-label{color:var(--sd-stepper-text-color);font-weight:500}:host ::ng-deep .mat-step-label-selected .mat-step-text-label{color:var(--sd-stepper-active-color);font-weight:600}:host ::ng-deep .mat-stepper-horizontal-line,:host ::ng-deep .mat-stepper-vertical-line:before{border-color:#0000001f}:host ::ng-deep .mat-step-header.cdk-program-focused,:host ::ng-deep .mat-step-header:hover{background-color:#00000005}\n"], dependencies: [{ kind: "ngmodule", type: MatStepperModule }, { kind: "component", type: i1.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i1.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i1.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "directive", type: i1.MatStepContent, selector: "ng-template[matStepContent]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SdStepper, decorators: [{
            type: Component,
            args: [{ selector: 'sd-stepper', standalone: true, imports: [MatStepperModule, MatIconModule, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-stepper\n  class=\"sd-stepper\"\n  [(selectedIndex)]=\"selectedIndex\"\n  [linear]=\"linear()\"\n  [orientation]=\"orientation()\"\n  [labelPosition]=\"labelPosition()\"\n  [headerPosition]=\"headerPosition()\"\n  [animationDuration]=\"animationDuration()\"\n  [disableRipple]=\"disableRipple()\"\n  (selectionChange)=\"onSelectionChange($event)\">\n  @for (step of steps(); track step; let i = $index) {\n    <mat-step\n      [stepControl]=\"step.stepControl() ?? undefined!\"\n      [optional]=\"step.optional()\"\n      [editable]=\"step.editable()\"\n      [state]=\"step.state() ?? ''\"\n      [errorMessage]=\"step.errorMessage() ?? ''\">\n      <ng-template matStepLabel>\n        <span class=\"sd-step__label\">\n          @if (step.icon(); as ic) {\n            <mat-icon class=\"sd-step__icon\">{{ ic }}</mat-icon>\n          }\n          <span class=\"sd-step__text\">{{ step.label() }}</span>\n        </span>\n      </ng-template>\n\n      <ng-template matStepContent>\n        <ng-container [ngTemplateOutlet]=\"step.bodyTpl()\"></ng-container>\n      </ng-template>\n    </mat-step>\n  }\n</mat-stepper>\n", styles: [":host{display:block;--sd-stepper-active-color: var(--sd-primary, #1565c0);--sd-stepper-active-bg: var(--sd-primary, #1565c0);--sd-stepper-completed-color: var(--sd-primary, #1565c0);--sd-stepper-line-active-color: var(--sd-primary, #1565c0);--sd-stepper-error-color: var(--sd-error, #f44336);--sd-stepper-pending-bg: #e0e0e0;--sd-stepper-pending-color: rgba(0, 0, 0, .54);--sd-stepper-text-color: var(--sd-text-primary, #1a1a1a)}.sd-step__label{display:inline-flex;align-items:center;gap:4px}.sd-step__icon{font-size:18px;width:18px;height:18px;line-height:18px}.sd-step__text{white-space:nowrap}:host ::ng-deep .mat-step-icon{background-color:var(--sd-stepper-pending-bg);color:var(--sd-stepper-pending-color)}:host ::ng-deep .mat-step-icon-selected{background-color:var(--sd-stepper-active-bg)!important;color:#fff!important}:host ::ng-deep .mat-step-icon-state-done,:host ::ng-deep .mat-step-icon-state-edit{background-color:var(--sd-stepper-completed-color)!important;color:#fff!important}:host ::ng-deep .mat-step-icon-state-error{background-color:var(--sd-stepper-error-color)!important;color:#fff!important}:host ::ng-deep .mat-step-label.mat-step-label-active .mat-step-text-label{color:var(--sd-stepper-text-color);font-weight:500}:host ::ng-deep .mat-step-label-selected .mat-step-text-label{color:var(--sd-stepper-active-color);font-weight:600}:host ::ng-deep .mat-stepper-horizontal-line,:host ::ng-deep .mat-stepper-vertical-line:before{border-color:#0000001f}:host ::ng-deep .mat-step-header.cdk-program-focused,:host ::ng-deep .mat-step-header:hover{background-color:#00000005}\n"] }]
        }], ctorParameters: () => [], propDecorators: { steps: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdStep), { isSignal: true }] }], selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }, { type: i0.Output, args: ["selectedIndexChange"] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], headerPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerPosition", required: false }] }], animationDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDuration", required: false }] }], disableRipple: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableRipple", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], autoId: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoId", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], matStepper: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatStepper), { isSignal: true }] }], autoIdAttr: [{
                type: HostBinding,
                args: ['attr.data-autoId']
            }], cssActive: [{
                type: HostBinding,
                args: ['style.--sd-stepper-active-color']
            }], cssActiveBg: [{
                type: HostBinding,
                args: ['style.--sd-stepper-active-bg']
            }], cssCompleted: [{
                type: HostBinding,
                args: ['style.--sd-stepper-completed-color']
            }], cssLine: [{
                type: HostBinding,
                args: ['style.--sd-stepper-line-active-color']
            }] } });

/**
 * Generated bundle index. Do not edit.
 */

export { SdStep, SdStepper };
//# sourceMappingURL=sdcorejs-angular-components-stepper.mjs.map
