/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
import { Component, EventEmitter, Input, Output, ViewChild, ChangeDetectionStrategy } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/material/stepper";
import * as i2 from "@angular/common";
export class QmsStepperComponent {
    constructor(changeDetector) {
        this.changeDetector = changeDetector;
        this.steps = [];
        this.isHorizontal = false;
        this.currentStep = 0;
        this.labelPosition = 'end';
        this.selectionChangeEvent = new EventEmitter();
    }
    ngOnInit() {
    }
    changeStep(selectedIndex) {
        this.currentStep = selectedIndex;
        this.selectionChangeEvent.emit(this.currentStep);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QmsStepperComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: QmsStepperComponent, selector: "app-qms-stepper", inputs: { steps: "steps", width: "width", height: "height", isHorizontal: "isHorizontal", currentStep: "currentStep", labelPosition: "labelPosition" }, outputs: { selectionChangeEvent: "selectionChangeEvent" }, viewQueries: [{ propertyName: "stepper", first: true, predicate: ["stepper"], descendants: true }], ngImport: i0, template: "<div class=\"qms-stepper-container\">\n    <div *ngIf=\"isHorizontal\">\n        <mat-horizontal-stepper [style.width.px]=\"width\" labelPosition=\"{{labelPosition}}\" #stepper\n            (selectionChange)=\"changeStep($event.selectedIndex)\" class=\"overflow-auto\" [selectedIndex]=\"currentStep\">\n            <mat-step *ngFor=\"let step of steps; let i = index;\" [completed]=\"false\"\n                [aria-labelledby]=\"step.disabled ? 'disabled' : 'step-item'\">\n                <ng-template matStepLabel>\n                    <span tabindex=\"0\" (keydown.enter)=\"changeStep(i)\" class=\"title-step\"\n                        [ngClass]=\"{ 'is-deleted-field': step.isDeleted }\">{{step.name}}<span\n                            *ngIf=\"step.isMandatory && !step.isDeleted\" class=\"is-mandatory-field\"> *</span></span>\n                </ng-template>\n                <ng-template matStepContent>\n                </ng-template>\n            </mat-step>\n            <ng-template matStepperIcon=\"edit\">\n                {{stepper.selectedIndex + 1}}\n            </ng-template>\n        </mat-horizontal-stepper>\n    </div>\n    <div *ngIf=\"!isHorizontal\">\n        <mat-vertical-stepper [style.height.px]=\"height\" #stepper (selectionChange)=\"changeStep($event.selectedIndex)\"\n            [selectedIndex]=\"currentStep\" class=\"overflow-auto\">\n            <mat-step *ngFor=\"let step of steps; let i = index;\" [completed]=\"false\"\n                [aria-label]=\"step.disabled ? 'disabled' : 'step-item'\">\n                <ng-template matStepLabel>\n                    <span tabindex=\"0\" (keydown.enter)=\"changeStep(i)\" class=\"title-step\"\n                        [ngClass]=\"{ 'is-deleted-field': step.isDeleted }\">{{step.name}}<span\n                            *ngIf=\"step.isMandatory && !step.isDeleted\" class=\"is-mandatory-field\"> *</span></span>\n                </ng-template>\n                <ng-template matStepContent>\n                </ng-template>\n            </mat-step>\n            <ng-template matStepperIcon=\"edit\">\n                <span>{{stepper.selectedIndex + 1}}</span>\n            </ng-template>\n        </mat-vertical-stepper>\n    </div>\n</div>", styles: [".qms-stepper-container ::ng-deep .mat-step-header[aria-labelledby=step-item]{height:22px!important;padding:8px 12px;left:0;top:0;border-radius:4px;color:#fff}.qms-stepper-container ::ng-deep .mat-step-header[aria-labelledby=step-item].mat-horizontal-stepper-header{min-width:fit-content}.qms-stepper-container ::ng-deep .mat-step-header[aria-labelledby=step-item].mat-vertical-stepper-header{width:156px}.qms-stepper-container ::ng-deep .mat-step-header .mat-step-icon{background:#0009;margin-right:14px}.qms-stepper-container ::ng-deep .mat-step-header .mat-step-icon-selected{background-color:#1954a9!important;color:#fff}.qms-stepper-container ::ng-deep .mat-step-header[aria-selected=true] .title-step{font-weight:600!important;outline:none!important;-webkit-font-smoothing:antialiased!important}.qms-stepper-container ::ng-deep mat-step-header:active{background:#e5eefb}.qms-stepper-container ::ng-deep mat-step-header:active mat-step-label{color:#fff}.qms-stepper-container ::ng-deep mat-step-header:active mat-step-icon{color:#323232;background:#0009}.qms-stepper-container ::ng-deep mat-step-header .mat-ripple-element{background-color:#e5eefb4d}.qms-stepper-container ::ng-deep mat-step-header:hover{background:#f2f7fd}.qms-stepper-container ::ng-deep mat-step-header:hover mat-step-label{color:#fff}.qms-stepper-container ::ng-deep mat-step-header:hover mat-step-icon{color:#323232;background:#0009}.qms-stepper-container ::ng-deep .mat-step-header[aria-labelledby=disabled]{pointer-events:none!important;cursor:not-allowed;opacity:.6;height:22px!important;width:156px;left:0;top:0;border-radius:4px;padding:8px 12px}.qms-stepper-container ::ng-deep mat-step-header:focus{border:2px solid rgb(25,84,169)}.qms-stepper-container ::ng-deep mat-step-header:focus mat-step-label{color:#fff}.qms-stepper-container ::ng-deep mat-step-header:focus mat-step-icon{color:#323232;background:#0009}.qms-stepper-container ::ng-deep mat-step-header.mat-step-header.cdk-keyboard-focused,.qms-stepper-container ::ng-deep mat-step-header.mat-step-header.cdk-program-focused{border:3px solid rgb(25,84,169);background:#fff}.qms-stepper-container ::ng-deep mat-step-header:focus:not(:focus-visible){border:none}.qms-stepper-container ::ng-deep .mat-step-header[aria-labelledby=active]{pointer-events:none!important;cursor:not-allowed;opacity:.6}.qms-stepper-container .title-step{font-family:Open Sans;font-size:14px;font-style:normal;font-weight:400;letter-spacing:0px;text-align:center;color:#323232;outline:none!important}.qms-stepper-container ::ng-deep .mat-step-icon{width:24px;height:24px}.qms-stepper-container ::ng-deep .mat-step-icon .mat-step-icon-content{font-family:Open Sans;font-size:14px;font-style:normal;font-weight:400;letter-spacing:0px;text-align:center;color:#fff;padding-top:1px}.qms-stepper-container ::ng-deep .mat-stepper-vertical-line:before{border-left-width:0;border-right-width:0}.qms-stepper-container ::ng-deep .mat-stepper-vertical-line{margin-left:23px;background:#0000001f;height:30px;width:1px}.qms-stepper-container ::ng-deep .mat-stepper-horizontal-line{height:1px;width:22px!important;left:0;top:18px;border-radius:0;margin:8px;background:#0000001f;max-width:22px!important}.qms-stepper-container .is-mandatory-field{color:#002e68!important}.qms-stepper-container .is-deleted-field{color:#ef1d34!important}\n"], dependencies: [{ 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.MatStepperIcon, selector: "ng-template[matStepperIcon]", inputs: ["matStepperIcon"] }, { kind: "directive", type: i1.MatStepContent, selector: "ng-template[matStepContent]" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QmsStepperComponent, decorators: [{
            type: Component,
            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-qms-stepper', template: "<div class=\"qms-stepper-container\">\n    <div *ngIf=\"isHorizontal\">\n        <mat-horizontal-stepper [style.width.px]=\"width\" labelPosition=\"{{labelPosition}}\" #stepper\n            (selectionChange)=\"changeStep($event.selectedIndex)\" class=\"overflow-auto\" [selectedIndex]=\"currentStep\">\n            <mat-step *ngFor=\"let step of steps; let i = index;\" [completed]=\"false\"\n                [aria-labelledby]=\"step.disabled ? 'disabled' : 'step-item'\">\n                <ng-template matStepLabel>\n                    <span tabindex=\"0\" (keydown.enter)=\"changeStep(i)\" class=\"title-step\"\n                        [ngClass]=\"{ 'is-deleted-field': step.isDeleted }\">{{step.name}}<span\n                            *ngIf=\"step.isMandatory && !step.isDeleted\" class=\"is-mandatory-field\"> *</span></span>\n                </ng-template>\n                <ng-template matStepContent>\n                </ng-template>\n            </mat-step>\n            <ng-template matStepperIcon=\"edit\">\n                {{stepper.selectedIndex + 1}}\n            </ng-template>\n        </mat-horizontal-stepper>\n    </div>\n    <div *ngIf=\"!isHorizontal\">\n        <mat-vertical-stepper [style.height.px]=\"height\" #stepper (selectionChange)=\"changeStep($event.selectedIndex)\"\n            [selectedIndex]=\"currentStep\" class=\"overflow-auto\">\n            <mat-step *ngFor=\"let step of steps; let i = index;\" [completed]=\"false\"\n                [aria-label]=\"step.disabled ? 'disabled' : 'step-item'\">\n                <ng-template matStepLabel>\n                    <span tabindex=\"0\" (keydown.enter)=\"changeStep(i)\" class=\"title-step\"\n                        [ngClass]=\"{ 'is-deleted-field': step.isDeleted }\">{{step.name}}<span\n                            *ngIf=\"step.isMandatory && !step.isDeleted\" class=\"is-mandatory-field\"> *</span></span>\n                </ng-template>\n                <ng-template matStepContent>\n                </ng-template>\n            </mat-step>\n            <ng-template matStepperIcon=\"edit\">\n                <span>{{stepper.selectedIndex + 1}}</span>\n            </ng-template>\n        </mat-vertical-stepper>\n    </div>\n</div>", styles: [".qms-stepper-container ::ng-deep .mat-step-header[aria-labelledby=step-item]{height:22px!important;padding:8px 12px;left:0;top:0;border-radius:4px;color:#fff}.qms-stepper-container ::ng-deep .mat-step-header[aria-labelledby=step-item].mat-horizontal-stepper-header{min-width:fit-content}.qms-stepper-container ::ng-deep .mat-step-header[aria-labelledby=step-item].mat-vertical-stepper-header{width:156px}.qms-stepper-container ::ng-deep .mat-step-header .mat-step-icon{background:#0009;margin-right:14px}.qms-stepper-container ::ng-deep .mat-step-header .mat-step-icon-selected{background-color:#1954a9!important;color:#fff}.qms-stepper-container ::ng-deep .mat-step-header[aria-selected=true] .title-step{font-weight:600!important;outline:none!important;-webkit-font-smoothing:antialiased!important}.qms-stepper-container ::ng-deep mat-step-header:active{background:#e5eefb}.qms-stepper-container ::ng-deep mat-step-header:active mat-step-label{color:#fff}.qms-stepper-container ::ng-deep mat-step-header:active mat-step-icon{color:#323232;background:#0009}.qms-stepper-container ::ng-deep mat-step-header .mat-ripple-element{background-color:#e5eefb4d}.qms-stepper-container ::ng-deep mat-step-header:hover{background:#f2f7fd}.qms-stepper-container ::ng-deep mat-step-header:hover mat-step-label{color:#fff}.qms-stepper-container ::ng-deep mat-step-header:hover mat-step-icon{color:#323232;background:#0009}.qms-stepper-container ::ng-deep .mat-step-header[aria-labelledby=disabled]{pointer-events:none!important;cursor:not-allowed;opacity:.6;height:22px!important;width:156px;left:0;top:0;border-radius:4px;padding:8px 12px}.qms-stepper-container ::ng-deep mat-step-header:focus{border:2px solid rgb(25,84,169)}.qms-stepper-container ::ng-deep mat-step-header:focus mat-step-label{color:#fff}.qms-stepper-container ::ng-deep mat-step-header:focus mat-step-icon{color:#323232;background:#0009}.qms-stepper-container ::ng-deep mat-step-header.mat-step-header.cdk-keyboard-focused,.qms-stepper-container ::ng-deep mat-step-header.mat-step-header.cdk-program-focused{border:3px solid rgb(25,84,169);background:#fff}.qms-stepper-container ::ng-deep mat-step-header:focus:not(:focus-visible){border:none}.qms-stepper-container ::ng-deep .mat-step-header[aria-labelledby=active]{pointer-events:none!important;cursor:not-allowed;opacity:.6}.qms-stepper-container .title-step{font-family:Open Sans;font-size:14px;font-style:normal;font-weight:400;letter-spacing:0px;text-align:center;color:#323232;outline:none!important}.qms-stepper-container ::ng-deep .mat-step-icon{width:24px;height:24px}.qms-stepper-container ::ng-deep .mat-step-icon .mat-step-icon-content{font-family:Open Sans;font-size:14px;font-style:normal;font-weight:400;letter-spacing:0px;text-align:center;color:#fff;padding-top:1px}.qms-stepper-container ::ng-deep .mat-stepper-vertical-line:before{border-left-width:0;border-right-width:0}.qms-stepper-container ::ng-deep .mat-stepper-vertical-line{margin-left:23px;background:#0000001f;height:30px;width:1px}.qms-stepper-container ::ng-deep .mat-stepper-horizontal-line{height:1px;width:22px!important;left:0;top:18px;border-radius:0;margin:8px;background:#0000001f;max-width:22px!important}.qms-stepper-container .is-mandatory-field{color:#002e68!important}.qms-stepper-container .is-deleted-field{color:#ef1d34!important}\n"] }]
        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { stepper: [{
                type: ViewChild,
                args: ['stepper', { static: false }]
            }], steps: [{
                type: Input
            }], width: [{
                type: Input
            }], height: [{
                type: Input
            }], isHorizontal: [{
                type: Input
            }], currentStep: [{
                type: Input
            }], labelPosition: [{
                type: Input
            }], selectionChangeEvent: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 